Frontend vs backend: Hva er forskjellen?
Frontend er den delen av en app som kjører i brukerens nettleser: sidene, knappene, skjemaene og animasjonene de ser og klikker på. Backend er den delen som kjører på en server brukeren aldri ser. Den lagrer og henter data, bruker forretningsreglene, sjekker hvem som har lov til å gjøre hva, og snakker med andre tjenester som betaling og e-post. De to kommuniserer gjennom et API, og sammen med en database utgjør de en «full stack»-app.
Hvorfor det betyr noe når du bygger med AI
Når du beskriver en app for et AI-byggeverktøy, beskriver du begge halvdelene samtidig, enten du tenker over det eller ikke. «Kunder kan booke en plass» betyr et bookingskjema (frontend), regler for hvilke plasser som er ledige (backend) og et sted å lagre bookingene (database).
Å kjenne til delingen hjelper på tre praktiske måter:
- Sikkerhet. Alt i frontend kan brukeren se og endre. Regler og hemmeligheter må ligge i backend.
- Feilsøking. «Knappen svarer ikke» og «knappen svarer, men ingenting lagres» peker på ulike halvdeler, og å si hva du ser hjelper AI-en å finne årsaken raskere.
- Hosting og kostnad. En nettside med kun frontend er billig og enkel å hoste. En backend må kjøre et sted, og det påvirker hva du betaler og hvordan appen oppfører seg når den er inaktiv.
En hverdagslig analogi
Tenk på en restaurant.
Frontend er spisesalen: menyen, bordene, interiøret og servitøren som tar bestillingen. Den er laget for gjester, og de kan se og berøre alt.
Backend er kjøkkenet og kontoret: kokkene som lager maten, lageret, kassen og lederens regler for hvem som får rabatt. Gjester går aldri inn der, og de skal ikke kunne det.
API-et er passet mellom dem: disken der bestillinger går inn og tallerkener kommer ut, i et avtalt format. Databasen er lageret og bestillingsboken.
En gjest kan skrive om bestillingslappen sin (frontend er under deres kontroll), men kjøkkenet bestemmer fortsatt hva det lager og hva det koster. Derfor hører de viktige kontrollene hjemme bakerst.
Hva hver side gjør
| Frontend | Backend | |
|---|---|---|
| Kjører på | Brukerens enhet, i nettleseren | En server du (eller hostingleverandøren) kontrollerer |
| Hovedjobb | Vise ting, samle inn input, reagere på klikk | Lagre data, bruke regler, håndheve tillatelser, kalle andre tjenester |
| Kan brukere se og endre koden? | Ja, den lastes ned til nettleseren deres | Nei |
| Kan holde hemmelige API-nøkler? | Nei | Ja, i miljøvariabler |
| Vanlige teknologier | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Hva går galt | Layouten bryter på mobil, knappen gjør ingenting, treg side | Data lagres ikke, feil data vises, feil, sikkerhetshull |
Noen rammeverk viskelisker grensen. Next.js lar for eksempel ett prosjekt inneholde både kode for nettleseren og kode for serveren. Ideen er den samme: spørsmålet er alltid hvor kjører denne biten?
Et konkret eksempel: booking av en yogatime
Slik skjer det når noen booker en yogatime, steg for steg.
| Steg | Hvor | Hva skjer |
|---|---|---|
| 1 | Frontend | Timeplansiden lastes og spør backend om ukens timer. |
| 2 | Backend | Leser timer og bookinger fra databasen, regner ut ledige plasser og returnerer listen som JSON. |
| 3 | Frontend | Viser hver time med tidspunkt, instruktør og ledige plasser. |
| 4 | Frontend | Brukeren velger en time og fyller inn navn og e-post. Skjemaet sjekker at e-posten ser gyldig ut (en høflighet, ingen garanti). |
| 5 | Frontend → Backend | Sender en POST /api/bookings-forespørsel gjennom API-et. |
| 6 | Backend | Validerer input på nytt, sjekker at timen ikke er full, lagrer bookingen og ber e-posttjenesten sende en bekreftelse med en hemmelig nøkkel. |
| 7 | Backend → Frontend | Returnerer «booket» eller «beklager, den er full». |
| 8 | Frontend | Viser bekreftelsesskjermen. |
Legg merke til steg 4 og 6: input sjekkes to ganger. Sjekken i frontend gir umiddelbar tilbakemelding; sjekken i backend er den som faktisk teller, fordi en bestemt bruker kan omgå frontend helt.
Vanlige begreper forklart
| Begrep | Betydning |
|---|---|
| Klient / server | Klienten er nettleseren (eller appen) som sender forespørsler; serveren svarer på dem. |
| UI | Brukergrensesnitt: skjermene og kontrollene. |
| API | Den avtalte måten frontend ber backend om data eller handlinger. |
| Endepunkt | Én bestemt URL i API-et, for eksempel /api/bookings. |
| Full stack | Frontend + backend + database sammen. Se hva en full stack-app er. |
| Statisk side | En frontend uten egen backend; de samme filene for alle. |
| SPA | Single-page application: en frontend som oppdaterer siden i nettleseren i stedet for å laste nye sider. |
| Server-side rendering (SSR) | Serveren bygger HTML-en for siden før den sendes, noe som kan hjelpe hastighet og SEO. |
| Miljøvariabler | Innstillinger og hemmeligheter som gis til backend ved kjøring, og som holdes utenfor koden. |
Trenger appen din en backend?
| Hvis appen din… | Trenger den backend? |
|---|---|
| Viser informasjon som er lik for alle | Nei |
| Har et kontaktskjema som bare sender e-post til deg | Vanligvis en liten en, eller en skjematjeneste |
| Lagrer data andre skal se | Ja |
| Har innlogging og private data | Ja |
| Tar betalinger | Ja, i det minste for å opprette betalinger og motta betalingswebhooks |
| Bruker en betalt AI- eller annen API med en hemmelig nøkkel | Ja, for å holde nøkkelen unna nettleseren |
Vanlige feil og misforståelser
- Å legge hemmelige nøkler i frontend. De blir synlige for alle som åpner utviklerverktøyene i nettleseren. Dette er den vanligste alvorlige feilen i AI-bygde apper.
- Å håndheve regler kun i frontend. Å skjule «slett»-knappen for ikke-administratorer er ikke beskyttelse; backend må avvise forespørselen.
- Å tro at backend bare er «databasen». Databasen lagrer data. Backend bestemmer hvem som kan lese og endre dem, og hvordan.
- Å tro at JavaScript betyr frontend. JavaScript og TypeScript kjører også på servere, med Node.js.
- Å skylde på feil halvdel. Hvis siden ser riktig ut, men dataene er feil, ligger problemet oftest i backend eller databasen, ikke i designet.
- Å bygge for mye. En portefølje trenger ikke en egendefinert backend. Å legge til en gir kostnad og flere bevegelige deler.
Hva du bør be AI-byggeren din om
- «Hvilke deler av denne appen kjører i nettleseren, og hvilke kjører på serveren?»
- «Flytt alle API-nøkler til backend og les dem fra miljøvariabler.»
- «Valider hvert skjema på serveren i tillegg til i nettleseren.»
- «Sørg for at bare administratorer kan slette bookinger, håndhevet i backend.»
- «Siden ser fin ut, men dataene lagres ikke. Sjekk backend-loggene for forespørselen.»
- «Dette er en enkel markedsføringsside; hold den kun med frontend med mindre vi trenger en backend.»
Frontend og backend i Mythex
Et nytt Mythex-prosjekt starter med en frontend i Vite, React, TypeScript og Tailwind, og agenten legger til en backend når appen din trenger det. Du kan også be om et eget API i Node, Python (FastAPI), C# eller Java som kjører ved siden av frontend i samme prosjekt. I forhåndsvisningen kan du bytte mellom nettstedet og API-serveren, og publisering setter opp begge, med en database og fillagring lagt til når det trengs. Dokumentasjonen forklarer apper med flere tjenester, nettsidehosting-guiden viser hvor hver halvdel kjører når appen er live, og app-malene er en rask måte å se full stack-eksempler på.
Spørsmål
Hva er forskjellen mellom frontend og backend?
Frontend er den delen av en app som kjører i brukerens nettleser: sidene, knappene og skjemaene de ser. Backend kjører på en server brukeren aldri ser. Den lagrer data, bruker forretningsregler, sjekker tillatelser og kommuniserer med andre tjenester.
Trenger alle apper en backend?
Nei. En markedsføringsside, en portefølje eller en enkel landingsside kan kun ha frontend. Så snart en app må lagre delte data, logge inn brukere, ta betalinger eller bruke hemmelige API-nøkler, trenger den en backend av en eller annen type.
Er HTML frontend eller backend?
HTML, CSS og JavaScript som kjører i nettleseren er frontend. JavaScript kan også kjøre på en server med Node.js, og da er det backend-kode. Språket avgjør ikke dette; det er hvor koden kjører som gjør det.
Hva betyr full stack?
Full stack betyr at man dekker både frontend og backend (og vanligvis databasen). En full stack-app er en app som har alle tre delene, og en full stack-utvikler jobber med alle sammen.