Next.js Rendering Techniques: CSR, SSR, SSG, ISR, and PPR

Next.js provides multiple rendering techniques to balance performance, SEO, scalability, and user experience. Understanding when and how each rendering strategy works is critical for building production-ready applications.

This guide explains CSR, SSR, SSG, ISR, and PPR with clear explanations, examples, use cases, and interview questions.

What Is Rendering in Next.js?

Rendering is the process of converting React components into HTML that the browser can display. Next.js supports multiple rendering strategies instead of forcing a single approach.

1. Client-Side Rendering (CSR)

What Is CSR?

In Client-Side Rendering, the browser downloads a minimal HTML page and then renders content using JavaScript on the client.

How CSR Works

1. Browser loads HTML shell
2. JavaScript bundle downloads
3. React renders UI in the browser
4. Data fetching happens on the client

Example (CSR)

"use client";
import { useEffect, useState } from "react";
export default function Page() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch("/api/posts")
      .then(res => res.json())
      .then(setData);
  }, []);
  return <div>{data ? data.title : "Loading…"}</div>;
}

Advantages

• Fast navigation after load
• Rich interactivity
• Simple data fetching

Disadvantages

• Poor SEO (initially empty HTML)
• Slower first load
• Depends heavily on JavaScript

Use Cases

• Dashboards
• Authenticated apps
• Admin panels

2. Server-Side Rendering (SSR)

What Is SSR?

In Server-Side Rendering, HTML is generated on the server for every request.

How SSR Works

1. Request sent to server
2. Server fetches data
3. HTML generated
4. Sent to browser
5. React hydrates the page

Example (SSR)

export default async function Page() {
  const res = await fetch("https://api.example.com/posts", { cache: "no-store" });
  const data = await res.json();
  return <div>{data.title}</div>;
}

Advantages

• Excellent SEO
• Always fresh data
• Fast First Contentful Paint

Disadvantages

• Slower TTFB
• Higher server load
• Not cached by default

Use Cases

• User-specific pages
• Real-time dashboards
• Dynamic content

3. Static Site Generation (SSG)

What Is SSG?

In Static Site Generation, pages are rendered at build time and served as static HTML.

How SSG Works

1. Build runs
2. Pages generated as HTML
3. Deployed to CDN
4. Served instantly

Example (SSG)

export default async function Page() {
  const res = await fetch("https://api.example.com/posts");
  const data = await res.json();
  return <div>{data.title}</div>;
}

Advantages

• Fastest performance
• Great SEO
• Minimal server cost

Disadvantages

• Data can become stale
• Rebuild required for updates

Use Cases

• Blogs
• Marketing pages
• Documentation sites

4. Incremental Static Regeneration (ISR)

What Is ISR?

ISR allows static pages to be updated after deployment without rebuilding the entire site.

How ISR Works

1. Page served from cache
2. After revalidate time, Next.js regenerates page
3. New page replaces old one

Example (ISR)

export default async function Page() {
  const res = await fetch("https://api.example.com/posts", {
    next: { revalidate: 60 }
  });
  const data = await res.json();
  return <div>{data.title}</div>;
}

Advantages

• Combines SSG + SSR benefits
• Scalable
• SEO friendly

Disadvantages

• Slightly stale data possible
• More complex caching logic

Use Cases

• Product listings
• News websites
• E-commerce catalogs

5. Partial Prerendering (PPR)

What Is PPR?

Partial Prerendering (PPR) allows parts of a page to be static while other parts are dynamic, streamed at runtime.

> Introduced in modern Next.js App Router for optimal performance.

How PPR Works

• Static shell rendered at build time
• Dynamic sections fetched on request
• Page streams progressively

Example (PPR)

import { Suspense } from "react";
function DynamicContent() {
  return <div>Live Data</div>;
}
export default function Page() {
  return (
    <>
      <h1>Static Header</h1>
      <Suspense fallback={<p>Loading…</p>}>
        <DynamicContent />
      </Suspense>
    </>
  );
}

Advantages

• Best performance
• Fine-grained control
• Excellent UX

Use Cases

• Dashboards
• Personalized content
• Mixed static + dynamic pages

Rendering Strategy Comparison

Technique

Render Time

SEO

Performance

Use Case

CSR

Client

Poor

Medium

Dashboards

SSR

Request time

Excellent

Medium

Dynamic pages

SSG

Build time

Excellent

Fastest

Blogs

ISR

Build + runtime

Excellent

Fast

Large sites

PPR

Mixed

Excellent

Best

Hybrid apps

Rendering Flow Diagrams (ASCII)

Client-Side Rendering (CSR)

User Request
     ▼
HTML Shell
     ▼
JS Bundle Download
     ▼
React Renders UI in Browser
     ▼
Content Visible & Interactive

Server-Side Rendering (SSR)

User Request
     ▼
Server Fetches Data
     ▼
HTML Generated on Server
     ▼
Browser Receives HTML
     ▼
Hydration (JS attaches events)

Static Site Generation (SSG)

Build Time
   ▼
HTML Generated
   ▼
Stored on CDN
   ▼
User Request → Instant Response

Incremental Static Regeneration (ISR)

User Request
   ▼
Serve Cached Page
   ▼
Revalidate in Background
   ▼
New Page Generated

Partial Prerendering (PPR)

Build Time
   ▼
Static Shell Rendered
   ▼
User Request
   ▼
Dynamic Parts Streamed

Conclusion

Each rendering technique serves a different purpose, and the right choice depends on the application’s requirements. CSR is suitable for highly interactive applications like dashboards but suffers from poor SEO. SSR improves SEO and initial load time, making it ideal for dynamic, content-driven pages. SSG offers the best performance and SEO by generating pages at build time, making it perfect for blogs and static content. ISR combines the benefits of SSG and SSR by enabling incremental updates, which works well for large-scale websites. PPR provides the most flexibility by mixing static and dynamic rendering, making it an excellent choice for modern hybrid applications.

In practice, modern web applications often use a hybrid approach, selecting different rendering strategies for different pages to balance performance, scalability, and SEO effectively.