# Bygde Next.js 16‑frontenden med bevisste strategier for SSR, SSG og CSR, og en gjenbrukbar fabrikk for forhåndshentede serversider som fjerner N+1‑kaskaden av hentinger fra hver autentisert side som flyttes over på den.

2025

**Situasjon.** Det innloggede dashbordet måtte føles raskt og samtidig være virkelig interaktivt, og de to målene drar mot hverandre hvis man går naivt til verks. Hent alt på klienten, og den første innlastingen drar ut, og verre: man får N+1‑mønsteret, der hver komponent våkner og fyrer av sin egen forespørsel, slik at én enkelt side blir en kaskade av rundturer.

**Oppgave.** Hver del av appen trengte den renderingen som faktisk passet den, uten å gi opp interaktiviteten på klientsiden der den betydde noe.

**Handling.** Frontenden i Next.js 16 bruker riktig modus for hver flate i stedet for ett felles valg. Markedsføringssider og offentlige sider genereres statisk — de endrer seg ikke fra bruker til bruker, så det er ingen grunn til å rendre dem ved hver forespørsel. De virkelig interaktive delene forblir klientrendret. Og der N+1‑kaskaden faktisk biter — det innloggede dashbordet og de store katalogoversiktene — ble løsningen trukket ut i en felles fabrikk i stedet for å skrives for hånd: createPrefetchedServerPage henter sidens data på serveren og gir dem til klienten ferdig utfylt, så komponentene kommer opp med dataene sine i stedet for at hver av dem går ut og spør etter dem. En strategi for cache‑invalidering er dokumentert for hver spørring, så dataene holder seg ferske uten at appen henter på nytt det den allerede har.

**Resultat.** Sidene som er flyttet over på fabrikken, kommer opp med én rundtur i stedet for en storm av dem, og fordi det er en fabrikk og ikke et mønster folk kopierer for hånd, arver neste side som flyttes over, oppførselen gratis. Resten av den innloggede appen er fortsatt klientrendret og venter fortsatt på tur etter den — en migrering med en fungerende mekanisme og en åpenbar neste side, og ikke en fullført opprydding.

---

- Rolle: Fullstack‑ingeniør
- Kategorier: [Plattformarkitektur](https://software.engineer.company/nb/categories/platform-architecture/), [Frontend‑utvikling](https://software.engineer.company/nb/categories/frontend/), [Fullstack‑utvikling](https://software.engineer.company/nb/categories/full-stack/), [Webutvikling](https://software.engineer.company/nb/categories/web-development/), [Ytelsesoptimalisering](https://software.engineer.company/nb/categories/performance/)
- Tjenester: [Frontend‑utvikling](https://software.engineer.company/nb/services/frontend-development/), [Fullstack‑produktutvikling](https://software.engineer.company/nb/services/full-stack-development/), [Utvikling av nettsteder og CMS](https://software.engineer.company/nb/services/web-development/)

<https://software.engineer.company/nb/portfolio/built-the-next-js-16-frontend-with-deliberate-73/>
