Design & Frontend Developer

Understanding CSR, SSR, SSG, and ISR

When building websites, one of the key decisions is how your pages are rendered. This affects performance, SEO, and user experience.

Client-Side Rendering (CSR)

The browser downloads a minimal HTML page and uses JavaScript to build the content dynamically.

  • Browser loads JS, fetches data, then renders the page
  • Great for highly interactive apps
  • Slower initial load, SEO needs extra work
  • Used in React SPAs

Server-Side Rendering (SSR)

The page is generated on the server for every request. The browser gets a fully rendered HTML page.

  • Server builds HTML on each request
  • Fast initial load, naturally SEO-friendly
  • More server load, can be slower if server is busy
  • Next.js uses this with getServerSideProps

Static Site Generation (SSG)

Pages are built ahead of time at build time and served as static files.

  • HTML generated during build, served instantly
  • Super fast, SEO-friendly, minimal server cost
  • Not ideal for frequently changing data
  • Next.js uses this with getStaticProps

Incremental Static Regeneration (ISR)

A hybrid approach that lets static pages update after deployment without rebuilding the entire site.

  • Pages pre-built, then regenerated in the background
  • Combines speed of static with flexibility of dynamic
  • Best for content that updates occasionally
  • Next.js uses this with revalidate option

Quick Summary

  • CSR: Dynamic, JS-heavy apps
  • SSR: Dynamic pages with SEO
  • SSG: Static pages, blazing fast
  • ISR: Static with periodic updates