Amit

Design & Frontend Developer

LinkedInX/TwitterGitHubPeerlistResume

Understanding CSR, SSR, SSG, and ISR: A Quick Guide

When building websites, one of the most important decisions is how your pages are rendered. Rendering determines how and when the content is displayed to users, and it can impact performance, SEO, and user experience. Let's break down the four main types:

1. CSR – Client-Side Rendering

In Client-Side Rendering (CSR), the browser downloads a mostly empty HTML page and uses JavaScript to build the content.

  • How it works: Browser loads JS → JS fetches data → renders the page.
  • Pros: Great for highly interactive apps.
  • Cons: Slower initial load, SEO can be tricky.
  • Example: React SPA (Single Page App).

    • 2. SSR – Server-Side Rendering

    Server-Side Rendering (SSR) generates the page on the server for every request. The browser receives a fully rendered HTML page.

  • How it works: Browser requests page → server builds HTML → browser displays content.
  • Pros: Fast initial load, SEO-friendly.
  • Cons: More server load, slower response if server is busy.
  • Example: Next.js getServerSideProps.

    • 3. SSG – Static Site Generation

    With Static Site Generation (SSG), pages are built ahead of time, usually at build time, and served as static files.

  • How it works: Site generates HTML during build → browser loads pre-built HTML.
  • Pros: Super fast, SEO-friendly, low server cost.
  • Cons: Not ideal for frequently changing data.
  • Example: Next.js getStaticProps.

    • 4. ISR – Incremental Static Regeneration

    Incremental Static Regeneration (ISR) is a hybrid approach. It lets static pages update after deployment without rebuilding the entire site.

  • How it works: Pages are pre-built → server regenerates them in the background as needed.
  • Pros: Best of both worlds: speed of static + flexibility of dynamic.
  • Example: Next.js revalidate option with getStaticProps.

    • Quick takeaway:

  • CSR → dynamic, JS-heavy apps.
  • SSR → dynamic pages, SEO-friendly.
  • SSG → static pages, blazing fast.
  • ISR → static + periodic updates, scalable and flexible.