Frontend vs backend: wat is het verschil?
De frontend is het deel van een app dat in de browser van de gebruiker draait: de pagina's, knoppen, formulieren en animaties die ze zien en aanklikken. De backend is het deel dat op een server draait die de gebruiker nooit ziet: het slaat data op en haalt ze weer op, past de bedrijfsregels toe, controleert wie wat mag doen, en praat met andere diensten zoals betalingen en e-mail. De twee communiceren via een API, en samen met een database vormen ze een “full-stack” app.
Waarom het ertoe doet als je met AI bouwt
Als je een app aan een AI-builder beschrijft, beschrijf je allebei de helften tegelijk, ook al besef je dat misschien niet. “Klanten kunnen een plek boeken” betekent een boekingsformulier (frontend), regels over welke plekken vrij zijn (backend) en ergens om boekingen op te slaan (database).
De verdeling kennen helpt op drie praktische manieren:
- Beveiliging. Alles in de frontend kan door de gebruiker worden gezien en aangepast. Regels en geheimen moeten in de backend staan.
- Debuggen. “De knop reageert niet” en “de knop reageert wel, maar er wordt niets opgeslagen” wijzen naar verschillende helften, en als je zegt wat je ziet, vindt de AI de oorzaak sneller.
- Hosting en kosten. Een site met alleen frontend is goedkoop en eenvoudig te hosten. Een backend moet ergens draaien, wat invloed heeft op wat je betaalt en hoe je app zich gedraagt als er niemand is.
Een alledaagse vergelijking
Denk aan een restaurant.
De frontend is de eetzaal: de menukaart, de tafels, de inrichting, de ober die je bestelling opneemt. Die is gemaakt voor klanten en zij kunnen alles zien en aanraken.
De backend is de keuken en het kantoor: de koks die koken, het magazijn, de kassa, de regels van de manager over wie korting krijgt. Klanten komen daar niet, en ze horen daar ook niet te komen.
De API is de doorgeefluik ertussen: de balie waar bestellingen naar binnen gaan en gerechten naar buiten komen, in een afgesproken formaat. De database is het magazijn en het bestelboek.
Een klant kan zijn bonnetje herschrijven (de frontend staat onder zijn controle), maar de keuken bepaalt nog steeds wat er wordt gemaakt en wat het kost. Daarom horen de belangrijke controles achter in het restaurant.
Wat elke kant doet
| Frontend | Backend | |
|---|---|---|
| Draait op | Het apparaat van de gebruiker, in de browser | Een server die jij (of je host) beheert |
| Belangrijkste taak | Dingen tonen, invoer verzamelen, reageren op klikken | Data opslaan, regels toepassen, rechten afdwingen, andere diensten aanroepen |
| Kunnen gebruikers de code zien en aanpassen? | Ja, die wordt naar hun browser gedownload | Nee |
| Kan er geheime API-sleutels bevatten? | Nee | Ja, in omgevingsvariabelen |
| Veelgebruikte technologieën | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Wat gaat er mis | Layout breekt op mobiel, knop doet niets, trage pagina | Data wordt niet opgeslagen, verkeerde data getoond, fouten, beveiligingslekken |
Sommige frameworks vervagen de grens. Next.js laat bijvoorbeeld één project zowel browsercode als servercode bevatten. Het idee blijft hetzelfde: de vraag is altijd waar draait dit stuk?
Een uitgewerkt voorbeeld: een yogales boeken
Hier is wat er gebeurt wanneer iemand een yogales boekt, stap voor stap.
| Stap | Waar | Wat er gebeurt |
|---|---|---|
| 1 | Frontend | De roosterpagina laadt en vraagt de backend om de lessen van deze week. |
| 2 | Backend | Leest lessen en boekingen uit de database, berekent de vrije plekken en geeft de lijst terug als JSON. |
| 3 | Frontend | Toont elke les met tijd, docent en vrije plekken. |
| 4 | Frontend | De gebruiker kiest een les en vult naam en e-mail in. Het formulier controleert of het e-mailadres geldig lijkt (een geste, geen garantie). |
| 5 | Frontend → Backend | Stuurt een POST /api/bookings-verzoek via de API. |
| 6 | Backend | Controleert de invoer opnieuw, kijkt of de les niet vol is, slaat de boeking op en vraagt de e-maildienst om met een geheime sleutel een bevestiging te sturen. |
| 7 | Backend → Frontend | Geeft “geboekt” of “sorry, het zit vol” terug. |
| 8 | Frontend | Toont het bevestigingsscherm. |
Let op stap 4 en 6: de invoer wordt twee keer gecontroleerd. De controle in de frontend geeft direct feedback; de controle in de backend is degene die echt telt, omdat een vastberaden gebruiker de frontend helemaal kan omzeilen.
Veelgebruikte termen uitgelegd
| Term | Betekenis |
|---|---|
| Client / server | De client is de browser (of app) die verzoeken doet; de server beantwoordt ze. |
| UI | User interface: de schermen en bedieningselementen. |
| API | De afgesproken manier waarop de frontend de backend om data of acties vraagt. |
| Endpoint | Eén specifieke URL van de API, zoals /api/bookings. |
| Full stack | Frontend + backend + database samen. Zie wat een full-stackapp is. |
| Statische site | Een frontend zonder eigen backend; voor iedereen dezelfde bestanden. |
| SPA | Single-page application: een frontend die de pagina in de browser bijwerkt in plaats van nieuwe pagina's te laden. |
| Server-side rendering (SSR) | De server bouwt de HTML van de pagina voordat hij wordt verstuurd, wat kan helpen bij snelheid en SEO. |
| Omgevingsvariabelen | Instellingen en geheimen die tijdens het draaien aan de backend worden gegeven, buiten de code gehouden. |
Heeft je app een backend nodig?
| Als je app… | Backend nodig? |
|---|---|
| Informatie toont die voor iedereen hetzelfde is | Nee |
| Een contactformulier heeft dat alleen een e-mail naar jou stuurt | Meestal een klein stukje, of een formulierdienst |
| Data opslaat die anderen gaan zien | Ja |
| Logins en privégegevens heeft | Ja |
| Betalingen verwerkt | Ja, in elk geval om checkouts aan te maken en betalingswebhooks te ontvangen |
| Een betaalde AI- of andere API gebruikt met een geheime sleutel | Ja, om de sleutel uit de browser te houden |
Veelgemaakte fouten en misverstanden
- Geheime sleutels in de frontend zetten. Ze zijn zichtbaar voor iedereen die de ontwikkelaarstools van de browser opent. Dit is de meest voorkomende ernstige fout in met AI gebouwde apps.
- Regels alleen in de frontend afdwingen. Een “verwijder”-knop verbergen voor niet-admins is geen bescherming; de backend moet het verzoek weigeren.
- Denken dat de backend “gewoon de database” is. De database slaat data op. De backend bepaalt wie ze mag lezen en wijzigen, en hoe.
- Denken dat JavaScript frontend betekent. JavaScript en TypeScript draaien ook op servers, met Node.js.
- De verkeerde helft de schuld geven. Als de pagina er goed uitziet maar de data klopt niet, zit het probleem meestal in de backend of database, niet in het ontwerp.
- Te veel bouwen. Een portfolio heeft geen eigen backend nodig. Die toevoegen kost geld en levert extra bewegende delen op.
Wat je aan je AI-builder kunt vragen
- “Welke onderdelen van deze app draaien in de browser en welke op de server?”
- “Verplaats alle API-sleutels naar de backend en lees ze uit omgevingsvariabelen.”
- “Valideer elk formulier op de server, niet alleen in de browser.”
- “Zorg in de backend dat alleen admins boekingen kunnen verwijderen.”
- “De pagina ziet er goed uit maar de data wordt niet opgeslagen; controleer de backendlogs voor het verzoek.”
- “Dit is een eenvoudige marketingsite; houd die alleen frontend, tenzij we een backend nodig hebben.”
Frontend en backend in Mythex
Een nieuw Mythex-project start met een Vite-, React-, TypeScript- en Tailwind-frontend, en de agent voegt een backend toe wanneer je app die nodig heeft. Je kunt ook om een aparte API in Node, Python (FastAPI), C# of Java vragen, die naast de frontend in hetzelfde project draait. In de preview wissel je tussen de website en de API-server, en publiceren zet beide live, met een database en bestandsopslag erbij wanneer dat nodig is. In de docs staan de multi-service apps, de gids over webhosting legt uit waar elke helft draait zodra je live bent, en de apptemplates zijn een snelle manier om full-stackvoorbeelden te zien.
Veelgestelde vragen
Wat is het verschil tussen frontend en backend?
De frontend is het deel van een app dat in de browser van de gebruiker draait: de pagina's, knoppen en formulieren die ze zien. De backend draait op een server die de gebruiker nooit ziet; die slaat data op, past bedrijfsregels toe, controleert rechten en praat met andere diensten.
Heeft elke app een backend nodig?
Nee. Een marketingsite, portfolio of eenvoudige landingspagina kan alleen frontend zijn. Zodra een app gedeelde data moet opslaan, gebruikers laat inloggen, betalingen verwerkt of geheime API-sleutels gebruikt, heeft hij een backend van een of andere vorm nodig.
Is HTML frontend of backend?
HTML, CSS en JavaScript die in de browser draaien, zijn frontend. JavaScript kan ook op een server draaien met Node.js, en dan is het backendcode. De taal bepaalt dat niet; waar de code draait wel.
Wat betekent full stack?
Full stack betekent dat je zowel de frontend als de backend (en meestal de database) beheerst. Een full-stackapp heeft alle drie de onderdelen; een full-stackontwikkelaar werkt aan alle drie.