When should I use SSR vs CSR in Next.js?

[Kartik3oy]

Summary

Hey folks 👋

I’m a bit confused about when to use Server-Side Rendering (SSR) and Client-Side Rendering (CSR) in Next.js.

I understand that SSR pre-renders pages on the server for better SEO and faster first load, while CSR lets the browser handle rendering after fetching data. But in real-world projects, I often struggle to decide which approach to use for which page.

For example:

Should dashboard pages use SSR or CSR?

What about user profile or analytics pages that depend on user-specific data?

How do SSR and CSR affect performance and caching in production?

Can someone explain a practical way to decide between SSR and CSR in Next.js (especially using the App Router)?

Additional information

No response

Example

No response

[Denoroy737]

Hey @Kartik3oy,👋

I was figuring out when to use SSR vs CSR is something everyone bumps into when building production apps with Next.js.

Here’s a simple mental model that’s worked well for me 👇

---

When to go with SSR (Server-Side Rendering)

Use SSR if:

• You care about SEO — think blog posts, product pages, landing pages, etc.
• You need fresh data every time the page loads.
• You want pages to respect auth state immediately (like dashboards that show personalized info).

Example (App Router):

// app/dashboard/page.js
export const dynamic = 'force-dynamic';

export default async function Dashboard() {
  const res = await fetch(`${process.env.API_URL}/data`, { cache: 'no-store' });
  const data = await res.json();

  return <DashboardView data={data} />;
}

This forces the server to fetch fresh data on every request.

---

When to go with CSR (Client-Side Rendering)

CSR is great when:

• SEO doesn’t matter (like after login).
• You want smooth, snappy navigation between views.
• Data updates frequently or in real time (charts, analytics, live feeds).

Example:

'use client'

import { useEffect, useState } from 'react';

export default function Analytics() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('/api/analytics')
      .then(res => res.json())
      .then(setData);
  }, []);

  return <AnalyticsChart data={data} />;
}

---

TL;DR

• SSR → good for SEO and dynamic public pages.
• CSR → best for private, interactive, or real-time sections.
• Most apps use a hybrid — SSR for the page shell, CSR for the data inside.

So basically:

Use SSR for the first impression, and CSR for the ongoing interaction.

That balance usually gives you the best mix of performance and user experience.