What is CSR in Next.js?

Next.jsMiddle~1 min read

CSR (Client-Side Rendering) in Next.js is an approach where rendering and data loading happen in the browser, after JavaScript has loaded. The server returns a minimal HTML shell, and everything "comes alive" on the client.

How CSR works

The server returns minimal HTML
The browser loads the JS bundle
React mounts the components
Data is requested from the browser
The UI renders and becomes interactive

HTML shell → JS → fetch → render

How to enable CSR in Next.js (App Router)

Any component with the directive:

tsx

"use client";

Example:

tsx

"use client";

import { useEffect, useState } from "react";

export default function Chat() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    fetch("/api/messages")
      .then(r => r.json())
      .then(setMessages);
  }, []);

  return <ChatUI messages={messages} />;
}

When CSR is the best choice

Use CSR if:

you need interactivity
there are frequent updates
SEO is not critical
the logic depends on the browser

Typical cases:

chats (an AI chat)
forms
editors
dashboards
filters / sorting
drag-and-drop

Pros of CSR

maximum interactivity less load on the server an SPA experience excellent for real-time UI

Cons of CSR

worse SEO (the first HTML is empty) longer TTI (JS needs to load) content appears later more JS in the browser

CSR vs SSR / SSG

	CSR	SSR	SSG
Where it renders	browser	server	build
SEO	No	Yes	Yes
Interactivity	High	Medium	Low
First content speed	Low	Medium	High

Important point in the App Router

CSR is not a page mode, but a property of the component. You can freely mix them:

txt

Page (SSG / SSR)
 ├─ Header (Server)
 ├─ Content (Server)
 └─ Chat (Client → CSR)

This is a normal and recommended pattern.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What is CSR in Next.js?

#How CSR works

#How to enable CSR in Next.js (App Router)

#When CSR is the best choice

#Pros of CSR

#Cons of CSR

#CSR vs SSR / SSG

#Important point in the App Router