Rendering Strategies in Next.js: CSR, SSR, SSG, ISR Explained

Next.js gives us the flexibility to decide how each page should be rendered.
That flexibility is powerful — but also confusing if you don’t know the tradeoffs.

In this post, let’s break down the 4 main rendering strategies in Next.js with examples and use cases.

1. Client-Side Rendering (CSR)

How it works:

• Page loads with minimal HTML.
• Data is fetched in the browser using useEffect or similar hooks.

import { useEffect, useState } from "react"; export default function Profile() { const [user, setUser] = useState(null); useEffect(() => { fetch("/api/user") .then(res => res.json()) .then(setUser); }, []); if (!user) return <p>Loading...</p>; return <h1>Hello {user.name}</h1>; } 

✅ Good for: dashboards, private user pages.
❌ Bad for: SEO and initial load performance.

2. Server-Side Rendering (SSR)

How it works:

• Page HTML is generated on each request.
• Always up-to-date but increases server load.

export async function getServerSideProps() { const res = await fetch("https://api.example.com/products"); const products = await res.json(); return { props: { products } }; } export default function Products({ products }) { return products.map(p => <p key={p.id}>{p.name}</p>); } 

✅ Good for: user-specific dashboards, search pages.
❌ Bad for: pages with high traffic but static data.

3. Static Site Generation (SSG)

How it works:

• Pages are built into static HTML at build time.
• Served instantly via CDN.

export async function getStaticProps() { const res = await fetch("https://api.example.com/blog"); const posts = await res.json(); return { props: { posts } }; } 

✅ Good for: marketing pages, blogs, docs.
❌ Bad for: content that changes often (stock prices, news).

4. Incremental Static Regeneration (ISR)

How it works:

• Pages are pre-rendered statically, then revalidated on a schedule.
• Combines the speed of SSG with freshness of SSR.

export async function getStaticProps() { const res = await fetch("https://api.example.com/products"); const products = await res.json(); return { props: { products }, revalidate: 60 }; // revalidate every 60s } 

✅ Good for: product catalogs, dashboards, news feeds.
❌ Requires caching strategy & CDN setup to be effective.

Choosing the Right Strategy

Closing Thoughts

The beauty of Next.js is that you don’t need a one-size-fits-all solution.
You can mix rendering strategies across routes to balance speed, freshness, and scalability.

👉 Pro tip: Start with SSG/ISR for performance, and use SSR/CSR only where absolutely necessary.

💬 Which rendering strategy has worked best in your projects — and where did it fail?