Wat een server is en waarvoor Node.js dient

Waar een website echt woont, wat een API is, en waarom het Level 2-formulier nergens zijn berichten naartoe kon sturen.

Herinner je dat formulier zonder ontvanger?

In Level 2 bouwde je een formulier dat een bericht controleerde, bedankte… en het bericht daarna weggooide. Er was nergens om het op te slaan. Je website kan tot nu toe alleen kant-en-klare bestanden uitdelen – hij kan niets ontvangen en onthouden. Daarvoor heb je een server nodig. En precies die ga je nu leren bouwen.

Frontend en backend

Elke grote applicatie (Instagram, een online school, een webshop) heeft twee helften:

Frontend – alles wat in de browser van de bezoeker draait. HTML, CSS, JavaScript, React. Dat ken je al!
Backend – een programma op een server. Het ontvangt verzoeken, slaat data op, handhaaft regels. En omdat Node.js bestaat, kan het in een taal die je al kent: JavaScript.

Hoe praten de twee helften? Via een API (Application Programming Interface) – afgesproken adressen waar de backend antwoordt. Een voorbeeldgesprek:

Frontend:  GET /api/messages         ("Send me all the messages.")
Backend:   [{ "name": "Grandma", "text": "Lovely website!" }]

Frontend:  POST /api/messages        ("Here's data, save it: ...")
Backend:   { "saved": true }

GET = “geef me data” (je browser doet dit elke keer als je een pagina opent).
POST = “hier is data, sla op” (dat doet je formulier).

Data gaat in het JSON-formaat – het lijkt bijna precies op de JavaScript-objecten uit de quiz. Toeval? Nee – JSON staat voor JavaScript Object Notation. Het staat aan jouw kant.

Waar draait zo’n backend?

Tijdens ontwikkeling op je eigen computer (localhost – dat ken je van Vite). In productie op een computer die altijd aan staat en verbonden is – een gehuurde “plak” server (VPS), of een dienst die alles voor je regelt (Render, Railway…). Deployment komt in de laatste les.

💡

Waar was GitHub Pages dan voor? Dat is hosting alleen voor de frontend – het deelt bestanden uit, niets meer. Perfect voor een Level 1–2-website (en ook het veiligst: waar niets draait, kan niets gehackt worden). Je hebt een backend nodig zodra je website iets moet ontvangen en onthouden – berichten, aanmeldingen, gebruikers.

Nu jij 💪 (een mini-missie uit nieuwsgierigheid)

Open je favoriete website, druk op F12 en ga naar het tabblad Network. Ververs de pagina en kijk naar de waterval van verzoeken – elke regel is één gesprek tussen browser en server.
Zoek een GET-verzoek in de lijst, en één dat JSON teruggeeft (kolom Type: json of fetch). Klik erop en bekijk het antwoord – je ziet de data waar de pagina van is gebouwd.
Typ dit in de console en kijk hoe de frontend zelf om data vraagt:

fetch("https://api.chucknorris.io/jokes/random")
  .then((response) => response.json())
  .then((data) => console.log(data.value));

fetch(...) is het JavaScript-commando “roep een API aan.” In les 9 gebruik je precies dit commando om een formulier aan je eigen server te koppelen.

✅

Controleer jezelf: Je kunt in eigen woorden het verschil tussen frontend en backend uitleggen, je weet wat GET, POST en JSON zijn, en je hebt in het Network-paneel gezien hoe websites met elkaar praten. In de volgende les bouw je zo’n server zelf.

Wat neem je mee uit deze les

De frontend draait op het apparaat van de bezoeker, de backend op een server; ze praten via een API met GET (geven) en POST (opslaan).
Data stroomt in JSON – het lijkt op JavaScript-objecten.
fetch() is hoe een frontend een server om data vraagt.