Next.js Rendering Strategies: SSR, SSG, ISR, and CSR

Unlike React, where everything is client-side, Next.js allows you to choose whether it’s server-rendered, statically generated, incrementally regenerated, or client-side. Choosing the right strategy can dramatically affect performance, SEO, and developer experience.

1. SSR (Server-Side Rendering)

On each request, Next.js uses server components to fetch data, renders React components on the server, then sends HTML and hydration JS to the client.

Pros: fresh data always, SEO friendly, good for dynamic data

Cons: Higher latency (for each request), more server load, and fewer caching opportunities at the CDN.

Example:

async function getUser(id) {
  // Using 'no-store' forces dynamic rendering (SSR) on every request
  const res = await fetch(`https://api.example.com/user/${id}`, { cache: 'no-store' });
  if (!res.ok) {
    throw new Error('Failed to fetch user data');
  }
  return res.json();
}

export default async function UserPage({ params }) {
  const user = await getUser(params.id);
  return <h1>Welcome, {user.name}</h1>;
}

2. SSG (Static Site Generation)

Next.js runs the component’s data fetching (fetch) logic at build time, producing static HTML files that are served from a CDN.

Pros: very fast at runtime, low server cost, good for mostly static content (blogs, marketing pages).

Cons: data is “stale” until rebuild and not suited for high-frequency updates or per-user data.

Example

async function getPosts() {
  // Data is fetched and cached (SSG) at build time
  const res = await fetch('https://api.example.com/posts'); 
  if (!res.ok) {
    throw new Error('Failed to fetch posts');
  }
  return res.json();
}

export default async function BlogIndex() {
  const posts = await getPosts();
  return (
    <div>
      {posts.map(post => <p key={post.id}>{post.title}</p>)}
    </div>
  );
}

3. ISR (Incremental Static Regeneration)

It’s a powerful hybrid. Next.js build static pages (SSG), but after deployment, they can re-generate pages in the background after a set time interval has passed since the last successful generation.

Pros: Keeps benefits of SSG (speed, low cost), but supports periodic updates without a full rebuild.

Cons: Slight complexity and need to manage the period the old content is served.

Example

// app/news/[slug]/page.js
async function getArticle(slug) {
  // Revalidates (ISR) the data cache at most every 60 seconds
  const res = await fetch(`https://api.example.com/news/${slug}`, { next: { revalidate: 60 } }); 
  if (!res.ok) {
    throw new Error('Failed to fetch article');
  }
  return res.json();
}

export default async function ArticlePage({ params }) {
  const article = await getArticle(params.slug);
  return <article>{article.content}</article>;
}

4. CSR (Client-Side Rendering)

It’s approach for traditional single page application. In Next.js, the initial page load a single HTML file is generally served with little to no content until you fetch the js and the browser compiles everything.

Pros: Very responsive UX for user-interactive parts, decouples client logic, and allows fast “transitions” within the component.

Cons: no support SEO and bad user experience when seeing blank/loading page at initial render.

Example

'use client'; 
import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function UsageMetrics() {
  const { data, error, isLoading } = useSWR('/api/user/metrics', fetcher);

  if (error) return <div>Failed to load metrics.</div>;
  if (isLoading) return <div>Loading...</div>;

  // Data is fetched and rendered entirely on the client after initial load
  return <h1>Your Monthly Usage: {data.usage}</h1>;
}

5. When to use

Strategy	Best use cases	Need to consider
SSR	Real-time stock prices, dynamic product details.	Higher performance cost, increased server load.
SSG	Blogs, documentation, static marketing pages.	Data staleness, requires a build for initial content.
ISR	News content, product listings that update periodically.	Stale window during revalidation, slightly more complex to manage.
CSR	Highly interactive components, user-specific data after initial content loads (e.g., a chart).	Initial load cost, no support SEO.

Reference links

• https://dev.to/maurya-sachin/rendering-strategies-in-nextjs-csr-ssr-ssg-isr-explained-417n
• https://nextjs.org/learn/seo/rendering-strategies
• https://nextjs.org/docs/app/getting-started/server-and-client-components
• https://nextjs.org/docs/14/app/building-your-application/data-fetching/fetching-caching-and-revalidating