# Byggde frontenden i Next.js 16 med medvetna SSR-, SSG- och CSR‑strategier och en återanvändbar fabrik för förhämtade serversidor som tar bort N+1‑kaskaden av hämtningar från varje inloggad sida som flyttas över till den. 2025 **Situation.** Instrumentpanelen för inloggade användare behövde kännas snabb och förbli genuint interaktiv, och de två målen drar åt olika håll om man är naiv. Hämta allt på klienten, så drar den första laddningen ut på tiden, och värre än så får du N+1‑mönstret där varje komponent vaknar och skickar sitt eget anrop, så att en enda sida blir en kaskad av rundresor. **Uppgift.** Varje del av appen behövde renderas på det sätt som faktiskt passade den, utan att interaktiviteten på klientsidan offrades där den spelade roll. **Handling.** Frontenden i Next.js 16 använder rätt läge för varje yta i stället för ett enda generellt val. Marknadsföringssidor och publika sidor genereras statiskt — de ändras inte per användare, så det finns ingen anledning att rendera dem vid varje anrop. De genuint interaktiva delarna förblir klientrenderade. Och där N+1‑kaskaden faktiskt biter — dashboarden för inloggade användare och de stora katalogsidorna — bröts lösningen ut i en gemensam fabrik i stället för att skrivas för hand: createPrefetchedServerPage hämtar sidans data på servern och lämnar över dem till klienten redan ifyllda, så att komponenterna startar med sina data i stället för att var och en ger sig iväg för att be om dem. En strategi för cacheinvalidering är dokumenterad per datahämtning, så att data hålls färska utan att appen hämtar om sådant den redan har. **Resultat.** Sidorna som har flyttats till fabriken laddas med en enda rundresa i stället för en storm av dem, och eftersom det är en fabrik och inte ett mönster som folk kopierar för hand ärver nästa sida som flyttas över beteendet utan extra arbete. Resten av den inloggade appen är fortfarande klientrenderad och väntar fortfarande på sin tur efter den — en migrering med en fungerande mekanism och en självklar nästa sida, snarare än en avslutad genomgång. --- - Roll: Full stack‑ingenjör - Kategorier: [Plattformsarkitektur](https://engineer.company/sv/categories/platform-architecture/), [Frontendutveckling](https://engineer.company/sv/categories/frontend/), [Fullstackutveckling](https://engineer.company/sv/categories/full-stack/), [Webbutveckling](https://engineer.company/sv/categories/web-development/), [Prestandaoptimering](https://engineer.company/sv/categories/performance/) - Tjänster: [Frontendutveckling](https://engineer.company/sv/services/frontend-development/), [Fullstackutveckling av produkter](https://engineer.company/sv/services/full-stack-development/), [Webbutveckling och CMS](https://engineer.company/sv/services/web-development/)