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)

“`tsx

“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)

“`tsx

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)

“`tsx

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)

“`tsx

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)

“`

tsx

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

 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.