Built the Next.js 16 frontend with deliberate SSR, SSG and CSR strategies, and a reusable prefetched‑server‑page factory that removes the N+1 fetch cascade from each authenticated page moved onto it.

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. The genuinely interactive parts stay client‑rendered. And where the N+1 cascade actually bites — the authenticated dashboard and the big directory listings — the fix was factored rather than hand‑rolled: createPrefetchedServerPage 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. A cache‑invalidation strategy is documented per query, so data stays fresh without the app re‑fetching things it already has.

Result. The pages moved onto the factory come up in one round‑trip instead of a storm of them, and because it is a factory rather than a pattern people copy by hand, the next page moved over inherits the behaviour for free. The rest of the authenticated app is still client‑rendered and still queued behind it — a migration with a working mechanism and an obvious next page, rather than a finished sweep.