Rendering Modes — Senior Interview Prep
The “where does HTML come from” question — client-rendered, server-rendered, statically generated, incrementally regenerated, streamed, edge-rendered. The senior position: there is no one best mode — pick per route based on data freshness, SEO, personalization, and performance budget. Most real apps use a hybrid mix.
Files
The hybrid baseline
A real fullstack app rarely picks one mode. A common shape:
| Route | Mode | Why |
|---|---|---|
Marketing landing (/) |
SSG or ISR | static, SEO-critical, change infrequently |
Blog post (/blog/:slug) |
ISR (revalidate hourly) | mostly static, sometimes updated, SEO matters |
Search results (/search?q=...) |
SSR | dynamic per query, can’t pre-build |
User dashboard (/dashboard) |
RSC + client islands | per-user, behind auth, SEO doesn’t matter |
Admin panel (/admin/*) |
SPA / CSR | heavy interactivity, behind login, no SEO |
API routes (/api/*) |
server functions | mutations + data fetching |
Next.js App Router and Nuxt make this per-route choice declarative. Older SPA-only stacks (CRA-style) force one mode.
Cross-references
- React Server Components: Server Components (RSC) — What Runs Where, Serialization, the "use client" Boundary
- Hydration: Hydration — Selective, Progressive, Mismatches
- Next.js App Router layout: Next.js App Router Layout — Segments, Parallel Routes, Intercepts
- Nuxt rendering modes: Nuxt — SSR, SSG, ISR, Server Routes
- Core Web Vitals (rendering mode affects LCP/INP/CLS): Core Web Vitals — LCP, INP, CLS