An interactive tour
How a web page actually shows up.
From the moment you press Enter in the address bar to the click that finally works, every layer in between is a story. Step through the browser's rendering pipeline, then see how Next.js bends that pipeline with six different rendering modes.
Two journeys.
Pick a starting point. Each module is self-contained, but together they tell the full story.
The browser rendering lifecycle
Twelve animated phases, from URL bar to interactive page: DNS lookup, TCP/TLS, HTTP, HTML & CSS parsing, the DOM and CSSOM, render tree, layout, paint, compositing, and hydration.
Start the tourModule 2Next.js rendering modes
Six live demos, CSR, SSR, SSG, ISR, RSC, and Hydration. Each route actually uses the technique it explains, so you can watch timestamps freeze, refresh, or trickle in on every reload.
Compare the modesStep through, don’t scroll past
Every phase has its own animated diagram. Use the stepper, hit play, or deep-link to a single phase.
See the modes behave
The SSR demo really runs per request. The SSG demo really freezes at build time. Refresh and watch.
Built on Next.js 16 + React 19
Uses the new use cache directive, cacheLife, connection(), and async params, the way the framework actually works today.