Next.js Rendering: Quick Notes

Understanding how SSG, SSR, and CSR work in Next.js

SSG

Static Site Generation

  • • Pre-built at build time
  • • Fast • SEO-friendly
  • • Best for static content

💡 cache: "force-cache"

SSR

Server-Side Rendering

  • • Generated on every request
  • • Always fresh data
  • • Great for dynamic pages

💡 cache: "no-store"

CSR

Client-Side Rendering

  • • Rendered in browser
  • • Interactive • Flexible
  • • Requires JavaScript

💡 "use client" directive

Facts

  • • Demonstrates SSG, SSR, and CSR differences
  • • Each page fetches same data
  • • Different rendering strategies
  • • SSG: Same data every time
  • • SSR & CSR: Different data each time

Notes

📝 Click each page and see how they differ! Check HTML source, Network tab, and notice when data loads.

💡 Refresh SSR page to see new data each time. Inspect DevTools to see the difference!