react server components

React Server Components (RSC) — архитектура компонентов React, при которой часть компонентов выполняется исключительно на сервере и никогда не попадает в JavaScript-бандл клиента. Анонсированные в 2020 году и ставшие стабильными в React 18 (в рамках Next.js App Router с версии 13), RSC кардинально меняют модель разделения ответственности между сервером и браузером.

Проблемы, которые решают React Server Components

Традиционные React-приложения страдают от двух проблем. Первая — waterfalls при загрузке данных: компонент рендерится, видит, что данные нужны, запрашивает их, ждёт, рендерится снова. При вложенных компонентах это приводит к каскадным запросам. Вторая — размер бандла: весь код, включая тяжёлые библиотеки для парсинга Markdown, форматирования дат, кодирования, отправляется клиенту, даже если он нужен только для генерации HTML.

RSC решают обе проблемы: серверные компоненты запрашивают данные напрямую (без промежуточного API), а весь их код остаётся на сервере — в бандл не попадает ничего.

Server Components vs Client Components

В модели RSC все компоненты по умолчанию являются серверными. Чтобы сделать компонент клиентским, нужно явно добавить директиву "use client" в начало файла.

• Server Components — выполняются только на сервере. Могут: напрямую читать базу данных, файловую систему, вызывать внутренние сервисы без HTTP. Не могут: использовать хуки (useState, useEffect), обработчики событий браузера, браузерные API (window, document).
• Client Components — выполняются в браузере (и при SSR на сервере). Могут использовать все хуки React и браузерные API. Помечаются директивой "use client".

Важно: серверный компонент может рендерить клиентский, но не наоборот. Клиентский компонент может принять серверный компонент как prop (children), но не может его импортировать напрямую.

Как работают RSC технически

React сериализует дерево серверных компонентов в специальный формат (React Flight protocol) — не HTML, а JSON-подобное описание UI с данными. Этот поток передаётся клиенту, где React десериализует его и встраивает в дерево рендеринга. Клиентские компоненты гидратируются обычным образом. Серверные компоненты не гидратируются — они просто присутствуют в DOM как статический HTML.

При навигации (client-side routing) Next.js запрашивает с сервера только RSC Payload для новой страницы — не HTML целиком. Это ускоряет навигацию и уменьшает объём данных.

Data Fetching в Server Components

Серверные компоненты могут быть асинхронными функциями:

async function UserProfile({ id }) { const user = await db.users.findUnique({ where: { id } }); return <div>{user.name}</div>; }

Нет необходимости в useEffect, useState или внешнем API-маршруте. Данные запрашиваются прямо в компоненте, что устраняет клиентские waterfalls. Несколько асинхронных компонентов на одной странице выполняются параллельно. React и Next.js дедуплицируют одинаковые запросы на одной странице через встроенный кэш.

Кэширование и ревалидация в Next.js

Next.js расширяет fetch() в Server Components кэшированием по умолчанию и тегами ревалидации:

• fetch(url) — кэшируется indefinitely (как SSG).
• fetch(url, { next: { revalidate: 60 } }) — ISR-подобное кэширование на 60 секунд.
• fetch(url, { cache: 'no-store' }) — никогда не кэшировать (как SSR).
• revalidateTag('posts') — инвалидация кэша по тегу из серверного действия.

Server Actions: форма отправки без API

Server Actions — функции, помеченные "use server", вызываемые с клиента как обычные функции, но выполняемые на сервере. Они устраняют необходимость создавать API-роут для каждой формы или мутации: <form action={createPost}> — и функция createPost запишет данные в базу на сервере без промежуточного HTTP-запроса.

Влияние на размер бандла

Одно из главных преимуществ RSC — уменьшение JavaScript-бандла. Тяжёлые библиотеки, используемые только для серверного рендеринга (парсеры Markdown, PDF-генераторы, ORM, криптография), остаются на сервере. В реальных проектах это даёт сокращение бандла на 30–80%. Меньше JavaScript = быстрее загрузка, парсинг и выполнение на клиенте.

Текущая поддержка и ограничения

На 2024 год RSC доступны только через Next.js App Router (и экспериментально в Remix). Прямое использование вне метафреймворка требует самостоятельной настройки bundler. Сообщество активно разрабатывает поддержку в других фреймворках (Expo для React Native, TanStack Start). Главное ограничение — ментальная модель: разработчики должны чётко понимать, какой код выполняется где, и правильно расставлять границы "use client".