CSR vs SSR in Next.js

CSR and SSR are two different ways of rendering web content — either in the browser or on the server.

What is Client-Side Rendering (CSR)?

CSR renders the page in the browser after JavaScript loads. Data is fetched client-side and the UI updates dynamically.

"use client";

useEffect(() => {
  fetch("/api/data").then(res => res.json());
}, []);

What is Server-Side Rendering (SSR)?

SSR renders the page on the server first. The browser receives ready HTML with data already included.

export default async function Page() {
  const data = await fetch("/api/data").then(r => r.json());
  return <div>{data.title}</div>;
}

Key Differences

• CSR: Browser renders after loading JS
• SSR: Server renders before sending page
• CSR: Slower first load
• SSR: Faster initial content
• CSR: Less SEO friendly
• SSR: SEO optimized

Real-World Example

CSR is great for dashboards and logged-in apps. SSR is ideal for blogs and e-commerce pages where SEO matters.

Interview Tip

CSR renders content in the browser, while SSR renders content on the server before sending it to the client, improving SEO and load speed.