DEV Community

Sachin Maurya
Sachin Maurya

Posted on

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

#nextjs #javascript #react #webdev

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>;
}
Enter fullscreen mode Exit fullscreen mode

✅ 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>);
}
Enter fullscreen mode Exit fullscreen mode

✅ 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 } };
}
Enter fullscreen mode Exit fullscreen mode

✅ 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
}
Enter fullscreen mode Exit fullscreen mode

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

Choosing the Right Strategy

Strategy Speed Freshness SEO Best Use Case
CSR Slow Fresh Poor Private dashboards
SSR Medium Fresh Good User-specific pages
SSG Fast Stale Great Blogs, docs
ISR Fast Semi-fresh Great Product listings

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?

Top comments (0)