Frontend vs backend: vad är skillnaden?
Frontend är den del av en app som körs i användarens webbläsare – sidorna, knapparna, formulären och animationerna som de ser och klickar på. Backend är den del som körs på en server som användaren aldrig ser. Den lagrar och hämtar data, tillämpar affärsreglerna, kontrollerar vem som får göra vad och pratar med andra tjänster som betalningar och e-post. De två delarna kommunicerar via ett API, och tillsammans med en databas utgör de en “full-stack”-app.
Varför det spelar roll när du bygger med AI
När du beskriver en app för en AI-byggare beskriver du båda halvorna samtidigt, oavsett om du inser det eller inte. “Kunder kan boka en tid” betyder ett bokningsformulär (frontend), regler för vilka tider som är lediga (backend) och någonstans att spara bokningarna (databas).
Att känna till uppdelningen hjälper på tre praktiska sätt:
- Säkerhet. Allt i frontend kan ses och ändras av användaren. Regler och hemligheter måste ligga i backend.
- Felsökning. “Knappen svarar inte” och “knappen svarar men inget sparas” pekar på olika halvor. Om du säger vilken du ser hjälper det AI:n att hitta orsaken snabbare.
- Hosting och kostnad. En frontend-only-sida är billig och enkel att hosta. En backend måste köras någonstans, och det påverkar vad du betalar och hur appen beter sig när den är inaktiv.
En vardaglig jämförelse
Tänk dig en restaurang.
Den frontend är matsalen: menyn, borden, inredningen och servitören som tar din beställning. Den är gjord för gästerna, och de kan se och röra vid allt.
Den backend är köket och kontoret: kockarna som lagar maten, förrådet, kassan och chefens regler för vem som får rabatt. Gästerna går aldrig dit, och de ska inte kunna det.
Det API:et är överlämningen mellan dem – disken där beställningar går in och tallrikar kommer ut, i ett överenskommet format. Databasen är förrådet och orderboken.
En gäst kan skriva om sin beställningslapp (frontend står under gästens kontroll), men köket bestämmer ändå vad som lagas och vad det kostar. Därför hör de viktiga kontrollerna hemma i backend.
Vad varje sida gör
| Frontend | Backend | |
|---|---|---|
| Körs på | Användarens enhet, i webbläsaren | En server som du (eller din hostingleverantör) kontrollerar |
| Huvuduppgift | Visa saker, ta emot indata, svara på klick | Lagra data, tillämpa regler, säkerställa behörigheter, anropa andra tjänster |
| Kan användare se och ändra koden? | Ja – den laddas ner till deras webbläsare | Nej |
| Kan hålla hemliga API-nycklar? | Nej | Ja, i miljövariabler |
| Vanliga tekniker | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Vad går fel | Layouten bryts på mobilen, knappen gör ingenting, långsam sida | Data sparas inte, fel data visas, fel, säkerhetshål |
Vissa ramverk suddar ut gränsen. Next.js låter till exempel ett projekt innehålla både kod för webbläsaren och kod för servern. Tanken är densamma: frågan är alltid var körs den här biten?
Ett praktiskt exempel: boka en yogalektion
Så här går det till när någon bokar en yogalektion, steg för steg.
| Steg | Var | Vad händer |
|---|---|---|
| 1 | Frontend | Schemasidan laddas och frågar backend efter veckans lektioner. |
| 2 | Backend | Läser lektioner och bokningar från databasen, räknar ut lediga platser och returnerar listan som JSON. |
| 3 | Frontend | Visar varje lektion med tid, lärare och lediga platser. |
| 4 | Frontend | Användaren väljer en lektion och fyller i namn och e-post. Formuläret kontrollerar att e-posten ser giltig ut (en artighet, inte en garanti). |
| 5 | Frontend → Backend | Skickar en POST /api/bookings-förfrågan via API:et. |
| 6 | Backend | Validerar indatan igen, kontrollerar att lektionen inte är full, sparar bokningen och ber e-posttjänsten skicka en bekräftelse med en hemlig nyckel. |
| 7 | Backend → Frontend | Returnerar “bokad” eller “tyvärr, fullbokat”. |
| 8 | Frontend | Visar bekräftelseskärmen. |
Lägg märke till steg 4 och 6: indatan kontrolleras två gånger. Kontrollen i frontend ger direkt återkoppling. Kontrollen i backend är den som faktiskt räknas, eftersom en envis användare kan kringgå frontend helt.
Vanliga begrepp förklarade
| Begrepp | Betydelse |
|---|---|
| Klient / server | Klienten är webbläsaren (eller appen) som skickar förfrågningar; servern svarar på dem. |
| UI | User interface – skärmarna och kontrollerna. |
| API | Det överenskomna sättet för frontend att be backend om data eller åtgärder. |
| Endpoint | En specifik URL i API:et, till exempel /api/bookings. |
| Full stack | Frontend + backend + databas tillsammans. Se vad en full-stack-app är. |
| Statisk sida | En frontend utan egen backend; samma filer för alla. |
| SPA | Single-page application: en frontend som uppdaterar sidan i webbläsaren i stället för att ladda nya sidor. |
| Server-side rendering (SSR) | Servern bygger sidans HTML innan den skickas, vilket kan förbättra hastigheten och SEO. |
| Miljövariabler | Inställningar och hemligheter som ges till backend vid körning, utanför koden. |
Behöver din app en backend?
| Om din app… | Behövs en backend? |
|---|---|
| Visar information som är densamma för alla | Nej |
| Har ett kontaktformulär som bara mejlar dig | Oftast en liten, eller en formulärtjänst |
| Sparar data som andra kommer att se | Ja |
| Har inloggningar och privata data | Ja |
| Tar betalningar | Ja – åtminstone för att skapa kassor och ta emot betalningswebhooks |
| Använder ett betalt AI- eller annat API med en hemlig nyckel | Ja, för att hålla nyckeln borta från webbläsaren |
Vanliga misstag och missförstånd
- Att lägga hemliga nycklar i frontend. De syns för alla som öppnar webbläsarens utvecklarverktyg. Det är det vanligaste allvarliga misstaget i AI-byggda appar.
- Att bara tillämpa regler i frontend. Att dölja “ta bort”-knappen för icke-administratörer är inget skydd. Backend måste neka förfrågan.
- Att tro att backend bara är “databasen”. Databasen lagrar data. Backend avgör vem som får läsa och ändra den, och hur.
- Att tro att JavaScript betyder frontend. JavaScript och TypeScript körs även på servrar, med Node.js.
- Att skylla på fel halva. Om sidan ser rätt ut men datan är fel ligger problemet oftast i backend eller databasen, inte i designen.
- Att bygga för mycket. En portfolio behöver inte en egen backend. Det lägger till kostnad och fler rörliga delar.
Vad du kan be din AI-byggare om
- “Vilka delar av appen körs i webbläsaren och vilka på servern?”
- “Flytta alla API-nycklar till backend och läs dem från miljövariabler.”
- “Validera varje formulär på servern också, inte bara i webbläsaren.”
- “Se till att bara administratörer kan ta bort bokningar, med kontroll i backend.”
- “Sidan ser bra ut men datan sparas inte – kontrollera backend-loggarna för förfrågan.”
- “Det här är en enkel marknadsföringssida. Håll den på frontend om vi inte behöver en backend.”
Frontend och backend i Mythex
Ett nytt Mythex-projekt startar från en frontend i Vite, React, TypeScript och Tailwind, och agenten lägger till en backend när din app behöver den. Du kan också be om ett separat API i Node, Python (FastAPI), C# eller Java som körs bredvid frontenden i samma projekt. I förhandsvisningen kan du växla mellan webbplatsen och API-servern, och publicering driftsätter båda, med en databas och fillagring tillagda vid behov. Dokumentationen beskriver appar med flera tjänster, guiden om webbhotell förklarar var varje del körs när appen är live, och app-mallarna är ett snabbt sätt att se fullstack-exempel.
Frågor
Vad är skillnaden mellan frontend och backend?
Frontend är den del av en app som körs i användarens webbläsare – sidorna, knapparna och formulären de ser och klickar på. Backend körs på en server som användaren aldrig ser. Den lagrar data, tillämpar affärsregler, kontrollerar behörigheter och pratar med andra tjänster.
Behöver varje app en backend?
Nej. En marknadsföringssida, portfolio eller enkel landningssida kan vara enbart frontend. Så snart en app behöver spara gemensamma data, logga in användare, ta betalningar eller använda hemliga API-nycklar behöver den någon form av backend.
Är HTML frontend eller backend?
HTML, CSS och JavaScript som körs i webbläsaren är frontend. JavaScript kan också köras på en server med Node.js, och då är det backendkod. Språket avgör inte; det är var koden körs som gör skillnaden.
Vad betyder full stack?
Full stack innebär att täcka både frontend och backend (och vanligtvis databasen). En full-stack-app är en app som har alla tre delarna, och en full-stack-utvecklare arbetar med alla dem.