Server Components

React Server Components (RSC) — это новый примитив рендеринга, представленный в React 18 и полностью интегрированный в Next.js App Router, позволяющий компонентам работать исключительно на сервере: получать данные и рендерить HTML без отправки JavaScript на клиент. Server Components имеют прямой доступ к базам данных, файловым системам и серверным секретам без их раскрытия браузеру, что уменьшает размер бандла и улучшает производительность фронтенда. В отличие от традиционного SSR, при котором полное дерево компонентов рендерится при каждом запросе, React Server Components могут избирательно перемежаться с Client Components (помеченными директивой "use client"), образуя гибкую гибридную модель рендеринга. Server Components не поддерживают состояние React (useState), эффекты (useEffect) или браузерные обработчики событий, поэтому интерактивные острова должны быть явно обозначены как Client Components. Архитектура Server Components — в сочетании с Suspense React для стриминга и Next.js App Router — представляет собой современный подход к созданию быстрых, SEO-дружелюбных и управляемых данными React-приложений.

Как это работает

Server Components рендерит React на сервере, отдаёт HTML в браузер, гидратирует JavaScript для интерактивности. Next.js — доминирующий фреймворк; App Router (с 13) вводит React Server Components (RSC), исполняющиеся только на сервере, не отправляющие JS и стримящие HTML. SSG (Static Site Generation) пререндерит страницы на билд-тайме; ISR (Incremental Static Regeneration) ревалидирует через TTL или по запросу. Выбор зависит от свежести данных.

Когда применять

SSR — когда важен SEO (блог, маркетинг, продуктовые страницы) и данные per-request или per-user. SSG — для контента, редко меняющегося (доки, маркетинг). ISR — для блогов/новостей, где страницы строятся раз, потом периодически ревалидируются. Пропустите SSR для чисто-интерактивных приложений (Figma, дашборды), где time-to-interactive важнее first-paint HTML — SPA подходит.

Типичные ошибки

Ловушки Server Components: browser-only API (window, localStorage) в компонентах, рендерящихся на сервере (крах — оборачивайте typeof window !== "undefined" или переносите в useEffect); hydration-mismatch (HTML сервера ≠ render клиента — невидимые баги); огромные getServerSideProps-payload, убивающие выгоду SSR; нет cache-заголовков на динамических маршрутах (бьёт origin). Прочтите Next.js docs про кеширование — defaults поменялись в 13/14.

Связанные понятия

• SSR и Next.js
• Next.js Pages Router
• Next.js App Router
• SSG и ISR