58. React Server Components

React Server Components (RSC): Новая эра React

React Server Components — это новый тип компонентов, которые исполняются исключительно на сервере. Они позволяют уменьшить размер JavaScript-бандла, улучшить производительность и упростить работу с данными.

1. Client vs Server Components

В современных версиях React (особенно в Next.js App Router) все компоненты по умолчанию являются Server Components.

Характеристика	Server Components	Client Components
Где исполняется?	Только на сервере	Сервер (пре-рендер) + Клиент
Доступ к БД/ФС?	Да (напрямую)	Нет
Hooks (useState)?	Нет	Да
Интерактивность?	Нет	Да
Размер бандла?	0 байт на клиенте	Включаются в JS-бандл

2. Зачем нужны RSC?

1. Zero Bundle Size: Код серверных компонентов не отправляется в браузер. Это критично для тяжелых библиотек (например, для парсинга Markdown или форматирования дат).
2. Прямой доступ к ресурсам: Можно делать fetch к базе данных или читать файлы прямо внутри компонента.
3. Безопасность: Секретные ключи API и токены остаются на сервере.
4. Улучшенный Data Fetching: Решение проблемы “водопадов” (waterfalls), когда запросы данных идут последовательно.

---

3. Как использовать Client Components?

Чтобы сделать компонент клиентским, нужно добавить директиву "use client" в самый верх файла:

"use client";

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

4. Композиция компонентов

Важное правило: Серверные компоненты могут рендерить клиентские, но клиентские не могут импортировать серверные.

Однако, клиентский компонент может принимать серверный как children:

ServerComponent.tsx

import { ClientWrapper } from './ClientWrapper';
import { DataComponent } from './DataComponent';

export default function Page() {
  return (
    <ClientWrapper>
      <DataComponent /> {/* Это серверный компонент, переданный как child */}
    </ClientWrapper>
  );
}

---

5. Когда что использовать?

• Server Components: Для получения данных, рендеринга статического контента, тяжелых вычислений.
• Client Components: Для кнопок, форм, стейта, эффектов, использования браузерных API (window, localStorage).

Резюме

RSC — это не замена клиентским компонентам, а мощное дополнение. Они позволяют перенести часть логики на сервер, делая приложение быстрее и легче для пользователя.

Практика

Попробуйте примеры в интерактивном редакторе: