Що таке CSR у Next.js?
CSR (Client-Side Rendering) у Next.js - це підхід, при якому рендеринг і завантаження даних відбуваються в браузері, вже після завантаження JavaScript. Сервер віддає мінімальний HTML-каркас, а все «оживає» на клієнті.
Як працює CSR
- Сервер віддає мінімальний HTML
- Браузер завантажує JS-бандл
- React монтує компоненти
- Дані запитуються з браузера
- 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)Це нормальний і рекомендований патерн.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.