Was ein Server ist und wofür Node.js da ist

Wo eine Website wirklich lebt, was eine API ist und warum das Level-2-Formular nirgends seine Nachrichten hinschicken konnte.

Erinnerst du dich an das Formular ohne Empfänger?

In Level 2 hast du ein Formular gebaut, das eine Nachricht prüfte, Danke sagte… und die Nachricht dann wegwarf. Es gab nirgends, sie zu speichern. Deine Website kann bisher nur fertige Dateien ausliefern – sie kann nichts empfangen und merken. Dafür brauchst du einen Server. Und genau das lernst du jetzt zu bauen.

Frontend und Backend

Jede große Anwendung (Instagram, eine Online-Schule, ein Online-Shop) hat zwei Hälften:

Frontend – alles, was im Browser des Besuchers läuft. HTML, CSS, JavaScript, React. Das kennst du schon!
Backend – ein Programm auf einem Server. Es empfängt Anfragen, speichert Daten, setzt Regeln durch. Und weil Node.js existiert, kann es in einer Sprache geschrieben werden, die du schon kennst: JavaScript.

Wie reden die beiden Hälften miteinander? Über eine API (Application Programming Interface) – vereinbarte Adressen, an denen das Backend antwortet. So könnte ein Gespräch aussehen:

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 = „gib mir Daten” (dein Browser macht das jedes Mal, wenn du eine Seite öffnest).
POST = „hier sind Daten, speichere sie” (genau das macht dein Formular).

Daten werden im JSON-Format geschickt – es sieht fast genauso aus wie die JavaScript-Objekte aus dem Quiz. Zufall? Nein – JSON steht für JavaScript Object Notation. Es ist auf deiner Seite.

Wo läuft so ein Backend?

Beim Entwickeln auf deinem eigenen Computer (localhost – kennst du von Vite). In Produktion auf einem Computer, der immer an ist und verbunden – entweder ein gemietetes „Stück” Server (VPS) oder ein Dienst, der alles für dich erledigt (Render, Railway…). Zum Deployment kommen wir in der letzten Lektion.

💡

Wofür war dann GitHub Pages? Das ist Hosting nur fürs Frontend – es liefert Dateien aus, nicht mehr. Perfekt für eine Level-1–2-Website (und auch am sichersten: wo nichts läuft, kann nichts gehackt werden). Ein Backend brauchst du, sobald deine Website etwas empfangen und merken soll – Nachrichten, Anmeldungen, Nutzer.

Jetzt du 💪 (eine Mini-Mission aus Neugier)

Öffne deine Lieblingswebsite, drücke F12 und wechsle zum Tab Network. Lade die Seite neu und schau dir den Wasserfall der Anfragen an – jede Zeile ist ein Gespräch zwischen Browser und Server.
Finde in der Liste eine GET-Anfrage und eine, die JSON zurückgibt (Spalte Type: json oder fetch). Klick sie an und schau dir die Antwort an – du siehst die Daten, aus denen die Seite gebaut ist.
Tippe das in die Konsole und schau, wie das Frontend von selbst nach Daten fragt:

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

fetch(...) ist der JavaScript-Befehl „ruf eine API an.” In Lektion 9 nutzt du genau diesen Befehl, um ein Formular mit deinem eigenen Server zu verbinden.

✅

Kontrolliere dich selbst: Du kannst in eigenen Worten den Unterschied zwischen Frontend und Backend erklären, du weißt, was GET, POST und JSON sind, und du hast im Network-Panel gesehen, wie Websites miteinander reden. In der nächsten Lektion baust du so einen Server selbst.

Das nimmst du aus dieser Lektion mit

Das Frontend läuft auf dem Gerät des Besuchers, das Backend auf einem Server; sie reden über eine API mit GET (geben) und POST (speichern).
Daten fließen im JSON-Format – es sieht aus wie JavaScript-Objekte.
fetch() ist, wie ein Frontend einen Server nach Daten fragt.