Built the Next.js 16 frontend with SSR, SSG and CSR strategies and a server‑shell prefetch‑and‑hydrate pattern that eliminated N+1 fetches.

Situation. The authenticated dashboard needed to feel quick and stay genuinely interactive, and those two goals pull against each other if you’re naïve about it. Fetch everything on the client and the first load drags, and worse, you get the N+1 pattern where every component wakes up and fires its own request, so a single page turns into a cascade of round‑trips.

Task. Each part of the app needed rendering the way that actually suited it, without giving up the client‑side interactivity where it mattered.

Action. The Next.js 16 frontend uses the right mode per surface instead of one blanket choice. Marketing and public pages are statically generated — they don’t change per user, so there’s no reason to render them on every request. Authenticated pages are server‑rendered, with a server‑shell prefetch‑and‑hydrate pattern — createPrefetchedServerPage — that fetches the page’s data on the server and hands it to the client already populated, so the components come up with their data instead of each going off to ask for it. The genuinely interactive parts stay client‑rendered. And a cache‑invalidation strategy is documented per query, so data stays fresh without the app re‑fetching things it already has.

Result. Pages load fast and stay fully interactive, and the N+1 storm on the dashboard just went away, because the server shell brings back what the page needs in one go. The frontend ended up with the perceived speed of server rendering and the responsiveness of a client app, instead of having to pick one.