Suggest an edit

Improve this article

Refine the answer for “What is CSR in Next.js?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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

1. The server returns **minimal HTML**
2. The browser loads the JS bundle
3. React mounts the components
4. Data is requested **from the browser**
5. 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**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts338 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.