next.js 16 · app router
Four rendering modes. One side-by-side.
A minimalist demo of ssr, ssg, isr, and csr — live timestamps, request counters, annotated flow.
rendering.matrix4 × 3
| mode | runs | cache |
|---|---|---|
| ssr | per request | none |
| ssg | build time | forever |
| isr | on interval | 10s |
| csr | in browser | — |
SSRServer-Side Rendering
HTML built on every request.
pros
- +fresh data per request
- +seo-friendly
cons
- −slower ttfb
- −higher server load
dashboards · personalized pages · auth routes
SSGStatic Site Generation
HTML generated once at build time.
pros
- +fastest load
- +served via cdn
cons
- −stale until next build
blogs · docs · marketing pages
ISRIncremental Static Regeneration
Cached static, regenerated in the background.
pros
- +static speed
- +dynamic freshness
cons
- −slight staleness window
ecommerce · feeds · landing pages
CSRClient-Side Rendering
Shell delivered, UI painted in the browser.
pros
- +flexible
- +fully interactive
cons
- −slower first paint
- −weaker seo
dashboards · internal tools · rich apps
mit · 2026