Vad en server är och vad Node.js är till för

Var en webbplats faktiskt bor, vad ett API är och varför nivå 2-formuläret inte hade någonstans att skicka sina meddelanden.

Minns du formuläret utan mottagare?

På nivå 2 byggde du ett formulär som kollade ett meddelande, tackade… och kastade sedan bort meddelandet. Det fanns ingenstans att spara det. Din webbplats kan hittills bara delge ut färdiga filer – den kan inte ta emot och minnas något. För det behöver du en server. Och det är precis det du ska lära dig bygga.

Frontend och backend

Varje stor applikation (Instagram, en onlineskola, en nätbutik) har två halvor:

Frontend – allt som kör i besökarens webbläsare. HTML, CSS, JavaScript, React. Det kan du redan!
Backend – ett program som kör på en server. Det tar emot förfrågningar, sparar data, upprätthåller regler. Och eftersom Node.js finns kan det skrivas i ett språk du redan kan: JavaScript.

Hur pratar de två halvorna med varandra? Genom ett API (Application Programming Interface) – överenskomna adresser där backend svarar. Här är ett exempel på samtal:

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 = “ge mig data” (din webbläsare gör det varje gång du öppnar en sida).
POST = “här är data, spara den” (det gör ditt formulär).

Data skickas i formatet JSON – det ser nästan exakt ut som JavaScript-objekten du kan från quizet. En lycklig slump? Nej – JSON står för JavaScript Object Notation. Det är på din sida.

Var kör en sådan backend?

Under utveckling på din egen dator (localhost – du känner det från Vite). I produktion på en dator som alltid är på och uppkopplad – antingen en hyrd “skiva” av en server (en VPS), eller en tjänst som sköter allt åt dig (Render, Railway…). Vi kommer till deployment i sista lektionen.

💡

Så vad var GitHub Pages till för då? Det är hosting bara för frontend – den delar ut filer, inget mer. Perfekt för en nivå 1–2-webbplats (och också det säkraste: där inget kör kan inget hackas). Du behöver en backend i det ögonblick din webbplats måste ta emot och minnas något – meddelanden, anmälningar, användare.

Nu är det din tur 💪 (ett mini-uppdrag av nyfikenhet)

Öppna din favoritwebbplats, tryck F12 och byt till fliken Network. Ladda om sidan och titta på vattenfallet av förfrågningar – varje rad är ett samtal mellan webbläsaren och en server.
Hitta en GET-förfrågan i listan, och en som returnerar JSON (kolumnen Type: json eller fetch). Klicka på den och titta på svaret – du ser datan sidan byggs av.
Skriv det här i konsolen och se frontend hämta data på egen hand:

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

fetch(...) är JavaScript-kommandot “anropa ett API.” I lektion 9 använder du exakt det här kommandot för att koppla ett formulär till din egen server.

✅

Kolla själv: Du kan förklara med egna ord skillnaden mellan frontend och backend, du vet vad GET, POST och JSON är, och du har sett i Network-panelen hur webbplatser pratar med varandra. I nästa lektion bygger du en sådan server själv.

Det här tar du med dig från lektionen

Frontend kör på besökarens enhet, backend kör på en server; de pratar via ett API med GET (ge) och POST (spara)-meddelanden.
Data flödar i JSON-format – det ser ut som JavaScript-objekt.
fetch() är hur en frontend frågar en server om data.

Vad en server är och vad Node.js är till för

Den här lektionen ingår i en betald nivå

Minns du formuläret utan mottagare?

Frontend och backend

Var kör en sådan backend?

Nu är det din tur 💪 (ett mini-uppdrag av nyfikenhet)

Det här tar du med dig från lektionen