Six ways Next.js renders a page.
Each card opens a real route that uses that strategy. Refresh, watch the timestamps, and notice what differs. For the caching demos (SSG, ISR), build for production to see them behave correctly: npm run build && npm start.
CSR, Client-Side Rendering
Server ships a thin HTML shell. The browser then runs JavaScript that fetches data and fills the page in. Familiar to anyone who has used Vite + React (or the legacy Create React App pattern).
Open demoPer-requestSSR, Server-Side Rendering
Every request rebuilds the full HTML on the server. Great for personalized or rapidly-changing data. Slower than static, but always fresh.
Open demoBuild-timeSSG, Static Site Generation
HTML is generated once at build time and served from a CDN. Blazing fast, zero server cost, but the content is frozen until the next build.
Open demoStale-while-revalidateISR, Incremental Static Regeneration
Static, but with a clock. Pages are served from cache until they expire, then regenerated in the background. The best of static and dynamic.
Open demoArchitectureRSC, React Server Components
Server-only React components that compose with client islands. Heavy logic stays on the server; only the interactive bits ship as JS.
Open demoBecoming interactiveHydration & partial interactivity
How static HTML wakes up. React attaches event listeners after the JS bundle arrives, until then, the page is a beautiful, lifeless poster.
Open demo