CSR у Next.js. Як працює і що у нього під капотом

Зайшов на сторінку, а там — спінери, skeleton і порожнеча?

Це не баг, це — CSR у Next.js. Дивимось, як воно працює під капотом, і чому це може зруйнувати твій LCP.

CSR означає, що HTML генерується безпосередньо браузером за допомогою React-компонентів, а не сервером.

Як це працює під капотом?

Сервер віддає мінімальний HTML — лише контейнер для React + скрипти ➡️ Завантажуються JS-чанки (main, framework, use client‑компоненти) ➡️ Hydration — React поєднує серверно згенерований HTML із клієнтськими компонентами ➡️ Запускається інтерактивність — useState, useEffect, Web APIs ➡️ Фетчинг після рендеру — через useEffect, SWR, React Query тощо.

Отож які основні характеристики CSR?

• App Router за замовчуванням — Server Components. CSR з’являється лише в межах файлів із директивою ‘use client’ або при динамічному імпорті з ssr: false.
• ‘use client’ потрібно ставити на вході дерева, яке має бути клієнтським. Усе нижче по дереву автоматично стає Client (не завжди, насправді).
• next/dynamic(…, { ssr: false }) створює клієнтський «острів» навіть у серверному дереві — корисно для важких віджетів/бібліотек.

Переваги CSR:

• Висока інтерактивність: реактивні UI, миттєвий відгук на події.
• Web APIs доступні одразу: Clipboard, WebSockets, WebRTC, LocalStorage.
• Простий фронтенд-хостинг.
• Менше навантаження на сервер: всі рендери відбуваються на клієнті.

Недоліки та виклики:

• FCP/LCP можуть провалюватися, якщо великі клієнтські острови блокують гідратацію.
• TTI/INP ростуть із розміром бандла (масивні UI‑кіти, графічні бібліотеки, синхронні ініціалізації).
• SEO‑ризики: контент усередині Client‑компонентів не з’являється в первинному HTML (видимий лише після JS). Для SEO‑критичного контенту тримай його в Server Components.

Глобально CSR компонент — звичайний React компонент з ‘use client’ директивою на початку. Він однозначно потребує свідомого підходу. Контролюй розмір бандлів, використовуй серверні компоненти за замовчуванням і додавай клієнтські острівці взаємодії тільки там, де це необхідно.

Цей текст взято з особистого блогу після отримання дозволу автора.