Choosing the right rendering strategy is one of the most impactful architectural decisions. Here's when to use each.
Client-Side Rendering (CSR)
The browser downloads a minimal HTML shell, then JavaScript renders everything.
Pros: Rich interactivity, simpler deployment, good for authenticated apps
Cons: Slow initial load, poor SEO (without prerendering), blank screen until JS loads
Server-Side Rendering (SSR)
Server renders full HTML on each request. Client hydrates for interactivity.
Pros: Fast FCP, great SEO, dynamic content
Cons: Server load per request, TTFB depends on data fetching speed, hydration cost
Static Site Generation (SSG)
Pages pre-rendered at build time. Served as static HTML from CDN.
Pros: Fastest possible (CDN-served), cheapest (no server), perfect SEO
Cons: Build time grows with pages, stale data until rebuild
Incremental Static Regeneration (ISR)
SSG + background revalidation. Serves stale page while regenerating in the background.
Pros: SSG performance + fresh data, scales infinitely
Cons: Stale data window, Next.js specific (mostly)
Decision Matrix
| Use Case | Strategy |
|---|---|
| Blog, docs, marketing | SSG |
| E-commerce product pages | ISR |
| Dashboard, admin panel | CSR |
| Social media feed | SSR |
| News site | ISR or SSR |