Page Rendering Demo

🔄 Client-Side Rendering (CSR)

JavaScript runs in the browser to build the DOM and render content.

View CSR Demo

🖥️ Server-Side Rendering (SSR)

HTML is generated on the server for each request.

View SSR Demo

📄 Static Site Generation (SSG)

HTML pages are pre-built at build time.

View SSG Demo

Static detail example: /ssg/1

⚡ Incremental Static Regeneration (ISR)

Static pages are regenerated on-demand with caching.

View ISR Demo

🌍 Edge Runtime

SSR executed on the Edge close to the user.

View Edge Demo

About This Demo

This demo showcases different page rendering strategies in Next.js. Each approach has its own performance characteristics and use cases. Navigate through the examples to see how each rendering method works and when to use them.