Frontend vs Backend: Ποια είναι η διαφορά;
Το frontend είναι το μέρος μιας εφαρμογής που τρέχει στον browser του χρήστη — οι σελίδες, τα κουμπιά, οι φόρμες και οι κινούμενες εικόνες που βλέπει και πατάει. Το backend είναι το μέρος που τρέχει σε έναν server τον οποίο ο χρήστης δεν βλέπει ποτέ: αποθηκεύει και ανακτά δεδομένα, εφαρμόζει τους επιχειρησιακούς κανόνες, ελέγχει ποιος επιτρέπεται να κάνει τι και μιλά με άλλες υπηρεσίες, όπως οι πληρωμές και το email. Τα δύο μέρη επικοινωνούν μέσω ενός API και, μαζί με μια βάση δεδομένων, αποτελούν μια εφαρμογή «full stack».
Γιατί έχει σημασία όταν χτίζετε με AI
Όταν περιγράφετε μια εφαρμογή σε ένα AI builder, περιγράφετε και τα δύο μέρη ταυτόχρονα, όσο κι αν το καταλαβαίνετε. Το «οι πελάτες μπορούν να κλείσουν μια θέση» σημαίνει μια φόρμα κράτησης (frontend), κανόνες για το ποιες θέσεις είναι ελεύθερες (backend) και κάπου να αποθηκευτούν οι κρατήσεις (βάση δεδομένων).
Η γνώση της διαίρεσης βοηθά με τρεις πρακτικούς τρόπους:
- Ασφάλεια. Ό,τι βρίσκεται στο frontend μπορεί να το δει και να το αλλάξει ο χρήστης. Οι κανόνες και τα μυστικά πρέπει να μένουν στο backend.
- Αποσφαλμάτωση. Το «το κουμπί δεν αντιδρά» και το «το κουμπί αντιδρά αλλά τίποτα δεν αποθηκεύεται» δείχνουν σε διαφορετικά μέρη. Αν πείτε ποιο από τα δύο βλέπετε, το AI θα βρει την αιτία πιο γρήγορα.
- Φιλοξενία και κόστος. Ένας ιστότοπος μόνο με frontend είναι φθηνός και απλός στη φιλοξενία. Ένα backend πρέπει να τρέχει κάπου, και αυτό επηρεάζει τι πληρώνετε και πώς συμπεριφέρεται η εφαρμογή σας όταν είναι αδρανής.
Μια καθημερινή αναλογία
Σκεφτείτε ένα εστιατόριο.
Το frontend είναι η αίθουσα: το μενού, τα τραπέζια, η διακόσμηση, ο σερβιτόρος που παίρνει την παραγγελία. Είναι φτιαγμένο για τους πελάτες και εκείνοι μπορούν να δουν και να αγγίξουν όλα όσα βλέπουν.
Το backend είναι η κουζίνα και το γραφείο: οι σεφ που μαγειρεύουν, η αποθήκη, το ταμείο, οι κανόνες του διευθυντή για το ποιος παίρνει έκπτωση. Οι πελάτες δεν μπαίνουν εκεί, και δεν πρέπει να μπορούν.
Το API είναι το πέρασμα ανάμεσά τους — ο πάγκος όπου μπαίνουν οι παραγγελίες και βγαίνουν τα πιάτα, σε μορφή που έχει συμφωνηθεί. Η βάση δεδομένων είναι η αποθήκη και το βιβλίο παραγγελιών.
Ένας πελάτης μπορεί να ξαναγράψει το δελτίο παραγγελίας του (το frontend είναι υπό τον έλεγχό του), αλλά η κουζίνα εξακολουθεί να αποφασίζει τι θα μαγειρέψει και πόσο θα χρεώσει. Γι' αυτό οι σημαντικοί έλεγχοι ανήκουν στο πίσω μέρος.
Τι κάνει το καθένα
| Frontend | Backend | |
|---|---|---|
| Τρέχει σε | Τη συσκευή του χρήστη, στον browser | Έναν server που ελέγχετε εσείς ή ο πάροχος φιλοξενίας |
| Κύρια δουλειά | Εμφάνιση, συλλογή στοιχείων, απόκριση σε κλικ | Αποθήκευση δεδομένων, εφαρμογή κανόνων, έλεγχος δικαιωμάτων, κλήσεις σε άλλες υπηρεσίες |
| Μπορούν οι χρήστες να δουν και να αλλάξουν τον κώδικα; | Ναι — κατεβαίνει στον browser τους | Όχι |
| Μπορεί να κρατά μυστικά κλειδιά API; | Όχι | Ναι, σε μεταβλητές περιβάλλοντος |
| Κοινές τεχνολογίες | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Τι συνήθως πάει στραβά | Το layout σπάει σε κινητό, το κουμπί δεν κάνει τίποτα, η σελίδα αργεί | Τα δεδομένα δεν αποθηκεύονται, εμφανίζονται λάθος δεδομένα, σφάλματα, κενά ασφαλείας |
Κάποια frameworks θολώνουν τη διαχωριστική γραμμή. Το Next.js, για παράδειγμα, επιτρέπει σε ένα project να περιέχει και κώδικα για τον browser και κώδικα για τον server. Η ιδέα μένει η ίδια: το ερώτημα είναι πάντα πού τρέχει αυτό το κομμάτι;
Ένα παράδειγμα βήμα προς βήμα: κράτηση μαθήματος
Αυτό συμβαίνει όταν κάποιος κλείνει μια θέση σε μάθημα yoga, βήμα βήμα.
| Βήμα | Πού | Τι συμβαίνει |
|---|---|---|
| 1 | Frontend | Φορτώνει η σελίδα προγράμματος και ζητά από το backend τα μαθήματα της εβδομάδας. |
| 2 | Backend | Διαβάζει μαθήματα και κρατήσεις από τη βάση, υπολογίζει τις ελεύθερες θέσεις και επιστρέφει τη λίστα ως JSON. |
| 3 | Frontend | Εμφανίζει κάθε μάθημα με ώρα, εκπαιδευτή και ελεύθερες θέσεις. |
| 4 | Frontend | Ο χρήστης επιλέγει μάθημα και συμπληρώνει όνομα και email. Η φόρμα ελέγχει ότι το email μοιάζει έγκυρο (για διευκόλυνση, όχι ως εγγύηση). |
| 5 | Frontend → Backend | Στέλνει αίτημα POST /api/bookings μέσω του API. |
| 6 | Backend | Ελέγχει ξανά τα δεδομένα, βλέπει αν το μάθημα είναι γεμάτο, αποθηκεύει την κράτηση και ζητά από την υπηρεσία email να στείλει επιβεβαίωση με ένα μυστικό κλειδί. |
| 7 | Backend → Frontend | Επιστρέφει «κλείστηκε» ή «δυστυχώς είναι γεμάτο». |
| 8 | Frontend | Εμφανίζει την οθόνη επιβεβαίωσης. |
Προσέξτε τα βήματα 4 και 6: τα στοιχεία ελέγχονται δύο φορές. Ο έλεγχος στο frontend δίνει άμεση ανάδραση· ο έλεγχος στο backend είναι αυτός που μετράει πραγματικά, γιατί ένας αποφασισμένος χρήστης μπορεί να παρακάμψει εντελώς το frontend.
Βασικοί όροι εξηγημένοι
| Όρος | Σημασία |
|---|---|
| Client / server | Ο client είναι ο browser (ή η εφαρμογή) που κάνει τα αιτήματα· ο server τα απαντά. |
| UI | User interface — οι οθόνες και τα χειριστήρια. |
| API | Ο συμφωνημένος τρόπος με τον οποίο το frontend ζητά δεδομένα ή ενέργειες από το backend. |
| Endpoint | Μία συγκεκριμένη διεύθυνση του API, όπως η /api/bookings. |
| Full stack | Frontend + backend + βάση δεδομένων μαζί. Δείτε τι είναι μια εφαρμογή full stack. |
| Static site | Frontend χωρίς δικό του backend· τα ίδια αρχεία για όλους. |
| SPA | Single-page application: frontend που ενημερώνει τη σελίδα μέσα στον browser αντί να φορτώνει νέες σελίδες. |
| Server-side rendering (SSR) | Ο server χτίζει το HTML της σελίδας πριν το στείλει, κάτι που μπορεί να βοηθήσει την ταχύτητα και το SEO. |
| Μεταβλητές περιβάλλοντος | Ρυθμίσεις και μυστικά που δίνονται στο backend κατά την εκτέλεση, εκτός του κώδικα. |
Χρειάζεται η εφαρμογή σας backend;
| Αν η εφαρμογή σας… | Χρειάζεται backend; |
|---|---|
| Δείχνει πληροφορίες που είναι ίδιες για όλους | Όχι |
| Έχει φόρμα επικοινωνίας που απλώς σας στέλνει email | Συνήθως ένα μικρό, ή μια υπηρεσία φορμών |
| Αποθηκεύει δεδομένα που θα βλέπουν και άλλοι | Ναι |
| Έχει συνδέσεις χρηστών και ιδιωτικά δεδομένα | Ναι |
| Δέχεται πληρωμές | Ναι — τουλάχιστον για να δημιουργεί checkout και να λαμβάνει webhooks πληρωμής |
| Χρησιμοποιεί ένα πληρωμένο AI ή άλλο API με μυστικό κλειδί | Ναι, για να μένει το κλειδί μακριά από τον browser |
Συνηθισμένα λάθη και παρεξηγήσεις
- Η τοποθέτηση μυστικών κλειδιών στο frontend. Θα είναι ορατά σε όποιον ανοίξει τα εργαλεία προγραμματιστή του browser. Είναι το πιο συνηθισμένο σοβαρό λάθος σε εφαρμογές που χτίζονται με AI.
- Επιβολή κανόνων μόνο στο frontend. Το να κρύβετε το κουμπί «διαγραφή» από τους μη διαχειριστές δεν είναι προστασία· το backend πρέπει να αρνείται το αίτημα.
- Η υπόθεση ότι το backend είναι «απλώς η βάση». Η βάση αποθηκεύει δεδομένα. Το backend αποφασίζει ποιος μπορεί να τα διαβάσει και να τα αλλάξει, και πώς.
- Η σκέψη ότι η JavaScript σημαίνει frontend. Η JavaScript και η TypeScript τρέχουν και σε servers, με το Node.js.
- Η κατηγορία του λάθος μέρους. Αν η σελίδα φαίνεται σωστή αλλά τα δεδομένα είναι λάθος, το πρόβλημα είναι συνήθως στο backend ή στη βάση, όχι στον σχεδιασμό.
- Υπερβολικό χτίσιμο. Ένα portfolio δεν χρειάζεται δικό του backend. Αν το προσθέσετε, προσθέτετε κόστος και κινούμενα μέρη.
Τι να ζητήσετε από τον AI builder σας
- «Ποια μέρη αυτής της εφαρμογής τρέχουν στον browser και ποια στον server;»
- «Μετέφερε όλα τα κλειδιά API στο backend και διάβαζέ τα από μεταβλητές περιβάλλοντος.»
- «Επικύρωνε κάθε φόρμα και στον server, όχι μόνο στον browser.»
- «Επέβαλε στο backend ότι μόνο οι διαχειριστές μπορούν να διαγράφουν κρατήσεις.»
- «Η σελίδα φαίνεται εντάξει αλλά τα δεδομένα δεν αποθηκεύονται — έλεγξε τα logs του backend για το αίτημα.»
- «Αυτός είναι ένας απλός ιστότοπος μάρκετινγκ· κράτησέ τον μόνο frontend, εκτός αν χρειαστούμε backend.»
Frontend και backend στο Mythex
Ένα νέο project στο Mythex ξεκινά από frontend με Vite, React, TypeScript και Tailwind, και ο agent προσθέτει backend όταν η εφαρμογή το χρειάζεται — ή μπορείτε να ζητήσετε ξεχωριστό API σε Node, Python (FastAPI), C# ή Java που τρέχει δίπλα στο frontend, μέσα στο ίδιο project. Στην προεπισκόπηση μπορείτε να αλλάζετε ανάμεσα στον ιστότοπο και στον API server, και η δημοσίευση ανεβάζει και τα δύο, με βάση δεδομένων και αποθήκευση αρχείων όπου χρειάζεται. Η τεκμηρίωση εξηγεί τις εφαρμογές πολλών υπηρεσιών, ο οδηγός φιλοξενίας ιστοσελίδων δείχνει πού τρέχει το κάθε μέρος όταν είναι σε λειτουργία, και τα πρότυπα εφαρμογών είναι ένας γρήγορος τρόπος να δείτε παραδείγματα full stack.
Ερωτήσεις
Ποια είναι η διαφορά ανάμεσα σε frontend και backend;
Το frontend είναι το μέρος μιας εφαρμογής που τρέχει στον browser του χρήστη — οι σελίδες, τα κουμπιά και οι φόρμες που βλέπει και πατάει. Το backend τρέχει σε server που ο χρήστης δεν βλέπει ποτέ· αποθηκεύει δεδομένα, εφαρμόζει τους κανόνες, ελέγχει τα δικαιώματα και επικοινωνεί με άλλες υπηρεσίες.
Κάθε εφαρμογή χρειάζεται backend;
Όχι. Ένας ιστότοπος μάρκετινγκ, ένα portfolio ή μια απλή landing page μπορούν να είναι μόνο frontend. Μόλις μια εφαρμογή χρειαστεί να αποθηκεύσει κοινά δεδομένα, να συνδέει χρήστες, να δέχεται πληρωμές ή να χρησιμοποιεί μυστικά κλειδιά API, χρειάζεται κάποιο είδος backend.
Το HTML είναι frontend ή backend;
Η HTML, η CSS και η JavaScript που τρέχουν στον browser είναι frontend. Η JavaScript μπορεί να τρέχει και σε server με Node.js, και τότε είναι backend κώδικας. Δεν αποφασίζει η γλώσσα· αποφασίζει το πού τρέχει ο κώδικας.
Τι σημαίνει full stack;
Full stack σημαίνει ότι καλύπτεις και το frontend και το backend (και συνήθως τη βάση δεδομένων). Μια εφαρμογή full stack έχει και τα τρία μέρη· ένας full-stack developer δουλεύει σε όλα.