App Router Teaching Lab
Next.js Rendering Lab
The same post UI rendered four different ways, with timestamps and flow diagrams that make the runtime behavior visible.
CSR
Client Side Rendering
The server sends a light shell. The browser does the data fetch and paints the real content.
Open lab ->SSR
Server Side Rendering
The server fetches the data first and sends ready-to-read HTML for that request.
Open lab ->SSG
Static Site Generation
Next.js creates the HTML ahead of time, then every visitor gets the same static file.
Open lab ->ISR
Incremental Static Regeneration
Visitors get cached HTML quickly while Next.js refreshes the page after the revalidate window.
Open lab ->