Understand Next.js Rendering Methods: CSR, SSR, SSG, ISR (With Flow Explanation)

Modern web development is about balancing performance, SEO, and user interactivity. Next.js offers four rendering strategies: Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR). Here's how each one works, including the data flow behind the scenes.

---

1. Client-Side Rendering (CSR)

Mechanism:

• Browser loads a blank HTML shell
• React hydrates and runs JavaScript
• Fetch data via fetch() or API on the client
• Render content in the browser

Flow: Client → Server (gets JS bundle) → Client → API Server → Client (renders)

Pros: Fast page transitions, full interactivity
Cons: Slow first load, SEO unfriendly
Use Case: Dashboards, authenticated user areas

---

2. Server-Side Rendering (SSR)

Mechanism:

• On every request, the server runs getServerSideProps()
• Server fetches data from database or API
• Generates HTML and sends it to the browser

Flow: Client → Server → Database/API → Server (HTML) → Client (renders)

Pros: SEO friendly, always fresh data
Cons: Slower performance, higher server load
Use Case: News, profile pages, A/B test landing pages

---

3. Static Site Generation (SSG)

Mechanism:

• At build time, Next.js runs getStaticProps()
• Pre-renders the HTML and stores it on the CDN
• On user request, CDN instantly serves prebuilt HTML

Flow: Build Time: Dev Machine → API → HTML
Request Time: Client → CDN (instant response)

Pros: Extremely fast, minimal server cost
Cons: Data becomes outdated unless rebuilt
Use Case: Blogs, marketing sites, documentation

---

4. Incremental Static Regeneration (ISR)

Mechanism:

• Similar to SSG but adds revalidate = x
• Next.js serves existing static HTML instantly
• In the background, if HTML is older than x seconds, a rebuild is triggered
• The next user gets the updated version

Flow: 1st User: Client → CDN (serves cached HTML)
Background: CDN → Server → API → New HTML saved
2nd User: Client → CDN (gets updated page)

Pros: Fast like SSG, fresher data
Cons: Slight delay in freshness update
Use Case: E-commerce product pages, frequently updated but not real-time content

---

Summary Table

---

Final Advice

• Default to SSG or ISR for performance and cost
• Use SSR only when content is dynamic per-user
• Reserve CSR for isolated interactivity or logged-in pages

“Static where possible, dynamic where necessary.”
Let Next.js handle the rendering complexity so you can focus on delivering value.