Frontend vs. backend: Hvad er forskellen?
Frontend er den del af en app, der kører i brugerens browser — de sider, knapper, formularer og animationer, de ser og klikker på. Backend er den del, der kører på en server, som brugeren aldrig ser: den gemmer og henter data, anvender forretningsreglerne, kontrollerer hvem der må gøre hvad, og taler med andre tjenester som betaling og e-mail. De to kommunikerer via en API, og sammen med en database udgør de en "full-stack"-app.
Hvorfor det betyder noget, når du bygger med AI
Når du beskriver en app for et AI-byggeværktøj, beskriver du begge halvdele på én gang, uanset om du er klar over det eller ej. "Kunder kan booke en tid" betyder en bookingformular (frontend), regler for hvilke tider der er ledige (backend) og et sted at gemme bookingerne (database).
At kende opdelingen hjælper på tre praktiske måder:
- Sikkerhed. Alt i frontend kan ses og ændres af brugeren. Regler og hemmeligheder skal ligge i backend.
- Fejlfinding. "Knappen reagerer ikke" og "knappen reagerer, men intet bliver gemt" peger på to forskellige halvdele, og hvis du siger, hvad du ser, hjælper det AI'en med at finde årsagen hurtigere.
- Hosting og omkostninger. En site med kun frontend er billig og enkel at hoste. En backend skal køre et sted, og det påvirker, hvad du betaler, og hvordan appen opfører sig, når der ikke er aktivitet.
En hverdagsanalogi
Tænk på en restaurant.
Frontend er spisesalen: menuen, bordene, indretningen og tjeneren, der tager din bestilling. Den er designet til gæsterne, og de kan se og røre ved alt det.
Backend er køkkenet og kontoret: kokkene, der laver mad, lageret, kassen og lederens regler for, hvem der får rabat. Gæsterne kommer aldrig derind, og det skal de heller ikke kunne.
API'en er passet imellem dem — disken, hvor bestillinger kommer ind, og retterne kommer ud, i et aftalt format. Databasen er lageret og ordrebogen.
En gæst kan skrive om på sin bestillingsseddel (frontend er under deres kontrol), men køkkenet bestemmer stadig, hvad det laver, og hvad det koster. Derfor hører de vigtige kontroller hjemme bagerst.
Hvad hver side gør
| Frontend | Backend | |
|---|---|---|
| Kører på | Brugerens enhed, i browseren | En server, du (eller din host) kontrollerer |
| Hovedopgave | Vise ting, modtage input, reagere på klik | Gemme data, anvende regler, håndhæve rettigheder, kalde andre tjenester |
| Kan brugerne se og ændre koden? | Ja — den downloades til deres browser | Nej |
| Kan den rumme hemmelige API-nøgler? | Nej | Ja, i miljøvariable |
| Almindelige teknologier | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Hvad går galt | Layoutet bryder på mobil, knappen gør intet, langsom side | Data gemmes ikke, forkerte data vises, fejl, sikkerhedshuller |
Nogle frameworks visker grænsen ud. Next.js lader for eksempel ét projekt indeholde både kode til browseren og kode til serveren. Ideen er den samme: spørgsmålet er altid hvor kører denne del?
Et konkret eksempel: booking af en yogatime
Her er, hvad der sker, når nogen booker en yogatime, trin for trin.
| Trin | Hvor | Hvad sker der |
|---|---|---|
| 1 | Frontend | Skemasiden indlæses og beder backend om ugens hold. |
| 2 | Backend | Læser hold og bookinger fra databasen, beregner ledige pladser og returnerer listen som JSON. |
| 3 | Frontend | Viser hvert hold med tidspunkt, lærer og ledige pladser. |
| 4 | Frontend | Brugeren vælger et hold og udfylder navn og e-mail. Formularen kontrollerer, at e-mailen ser gyldig ud (en høflighed, ikke en garanti). |
| 5 | Frontend → Backend | Sender en POST /api/bookings-forespørgsel gennem API'en. |
| 6 | Backend | Validerer input igen, kontrollerer at holdet ikke er fuldt, gemmer bookingen og beder e-mailtjenesten sende en bekræftelse ved hjælp af en hemmelig nøgle. |
| 7 | Backend → Frontend | Returnerer "booket" eller "beklager, den er fuld". |
| 8 | Frontend | Viser bekræftelsesskærmen. |
Læg mærke til trin 4 og 6: input tjekkes to gange. Tjekket i frontend giver øjeblikkelig feedback; tjekket i backend er det, der faktisk tæller, for en fast beslutsom bruger kan omgå frontend helt.
Almindelige begreber forklaret
| Begreb | Betydning |
|---|---|
| Klient / server | Klienten er browseren (eller appen), der sender forespørgslerne; serveren svarer på dem. |
| UI | User interface — skærmene og kontrollerne. |
| API | Den aftalte måde, frontend beder backend om data eller handlinger. |
| Endpoint | Én specifik URL i API'en, for eksempel /api/bookings. |
| Full stack | Frontend + backend + database sammen. Se hvad en full-stack-app er. |
| Statisk site | En frontend uden egen backend; de samme filer til alle. |
| SPA | Single-page application: en frontend, der opdaterer siden i browseren i stedet for at indlæse nye sider. |
| Server-side rendering (SSR) | Serveren bygger sidens HTML, før den sendes, hvilket kan hjælpe hastighed og SEO. |
| Miljøvariable | Indstillinger og hemmeligheder, der gives til backend under kørsel, og som holdes ude af koden. |
Har din app brug for en backend?
| Hvis din app… | Backend nødvendig? |
|---|---|
| Viser information, der er den samme for alle | Nej |
| Har en kontaktformular, der kun sender dig en e-mail | Typisk en lille en, eller en formulartjeneste |
| Gemmer data, andre vil se | Ja |
| Har logins og private data | Ja |
| Tager betalinger | Ja — i det mindste for at oprette checkouts og modtage betalings-webhooks |
| Bruger en betalt AI- eller anden API med en hemmelig nøgle | Ja, for at holde nøglen væk fra browseren |
Almindelige fejl og misforståelser
- At putte hemmelige nøgler i frontend. De vil være synlige for enhver, der åbner browserens udviklerværktøjer. Det er den hyppigste alvorlige fejl i AI-byggede apps.
- At håndhæve regler kun i frontend. At skjule "slet"-knappen for ikke-administratorer er ikke beskyttelse; backend skal afvise forespørgslen.
- At antage, at backend bare er "databasen". Databasen gemmer data. Backend bestemmer, hvem der må læse og ændre dem, og hvordan.
- At tro, at JavaScript betyder frontend. JavaScript og TypeScript kører også på servere med Node.js.
- At give den forkerte halvdel skylden. Hvis siden ser rigtig ud, men data er forkerte, ligger problemet typisk i backend eller databasen, ikke i designet.
- At bygge for meget. En portfolio har ikke brug for en skræddersyet backend. En sådan tilføjer omkostninger og flere bevægelige dele.
Hvad du skal bede dit AI-byggeværktøj om
- "Hvilke dele af denne app kører i browseren, og hvilke kører på serveren?"
- "Flyt alle API-nøgler til backend, og læs dem fra miljøvariable."
- "Validér hver formular på serveren, ikke kun i browseren."
- "Håndhæv i backend, at kun administratorer kan slette bookinger."
- "Siden ser fin ud, men data gemmes ikke — tjek backend-loggene for forespørgslen."
- "Dette er en simpel markedsføringsside; hold den kun i frontend, medmindre vi får brug for en backend."
Frontend og backend i Mythex
Et nyt Mythex-projekt starter fra en frontend i Vite, React, TypeScript og Tailwind, og agenten tilføjer en backend, når din app har brug for den — eller du kan bede om en separat API i Node, Python (FastAPI), C# eller Java, der kører sammen med frontend i samme projekt. I preview kan du skifte mellem hjemmesiden og API-serveren, og publicering udrulle begge dele, med en database og filopbevaring tilføjet, når det er nødvendigt. Dokumentationen beskriver app med flere tjenester, webhosting-guiden forklarer, hvor hver halvdel kører, når appen er live, og app-skabelonerne er en hurtig måde at se full-stack-eksempler på.
Spørgsmål
Hvad er forskellen på frontend og backend?
Frontend er den del af en app, der kører i brugerens browser — de sider, knapper og formularer de ser og klikker på. Backend kører på en server, som brugeren aldrig ser; den gemmer data, anvender forretningsreglerne, tjekker rettigheder og taler med andre tjenester.
Har enhver app brug for en backend?
Nej. En markedsføringsside, en portfolio eller en simpel landingsside kan kun være frontend. Så snart en app skal gemme fælles data, logge brugere ind, modtage betalinger eller bruge hemmelige API-nøgler, har den brug for en eller anden form for backend.
Er HTML frontend eller backend?
HTML, CSS og JavaScript, der kører i browseren, er frontend. JavaScript kan også køre på en server med Node.js, og så er det backend-kode. Det er ikke sproget, der afgør det, men hvor koden kører.
Hvad betyder full stack?
Full stack betyder, at man dækker både frontend og backend (og typisk databasen). En full stack-app er en app, der har alle tre dele; en full stack-udvikler arbejder med dem alle.