Зайшов на сторінку, а там — спінери, 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’ директивою на початку. Він однозначно потребує свідомого підходу. Контролюй розмір бандлів, використовуй серверні компоненти за замовчуванням і додавай клієнтські острівці взаємодії тільки там, де це необхідно.
Цей текст взято з особистого блогу після отримання дозволу автора.
Favbet Tech – це ІТ-компанія зі 100% українською ДНК, що створює досконалі сервіси для iGaming і Betting з використанням передових технологій та надає доступ до них. Favbet Tech розробляє інноваційне програмне забезпечення через складну багатокомпонентну платформу, яка здатна витримувати величезні навантаження та створювати унікальний досвід для гравців.
Цей матеріал – не редакційний, це – особиста думка його автора. Редакція може не поділяти цю думку.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: