Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке CSR у Next.js?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**CSR (Client-Side Rendering)** у **Next.js** - це підхід, при якому **рендеринг і завантаження даних відбуваються в браузері**, вже після завантаження JavaScript. Сервер віддає мінімальний HTML-каркас, а все «оживає» на клієнті.

## Як працює CSR

1. Сервер віддає **мінімальний HTML**
2. Браузер завантажує JS-бандл
3. React монтує компоненти
4. Дані запитуються **з браузера**
5. UI рендериться і стає інтерактивним

```
HTML shell → JS → fetch → render
```

---

## Як увімкнути CSR у Next.js (App Router)

Будь-який компонент з директивою:

```tsx
"use client";
```

Приклад:

```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} />;
}
```

---

## Коли CSR - найкращий вибір

Використовуй CSR, якщо:

- потрібна **інтерактивність**
- є **часті оновлення**
- SEO не критичне
- логіка залежить від браузера

Типові кейси:

- чати (AI-чат)
- форми
- редактори
- дашборди
- фільтри / сортування
- drag-and-drop

---

## Плюси CSR

максимальна інтерактивність
менше навантаження на сервер
SPA-досвід
відмінно для real-time UI

---

## Мінуси CSR

гірше SEO (перший HTML порожній)
довший TTI (потрібно завантажити JS)
контент з'являється пізніше
більше JS у браузері

---

## CSR vs SSR / SSG

|  | CSR | SSR | SSG |
|---|---|---|---|
| Де рендер | браузер | сервер | білд |
| SEO | Ні | Так | Так |
| Інтерактивність | Висока | Середня | Низька |
| Швидкість першого контенту | Низька | Середня | Висока |

---

## Важливий момент в App Router

CSR - **не режим сторінки**, а **властивість компонента**.
Ти можеш спокійно змішувати:

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

Це **нормальний і рекомендований патерн**.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати297 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.