Правила работы серверных компонентов

Кто где выполняется: шесть фактов

Прошлые доклады показали, как RSC-рендерер превращает серверные компоненты в дерево элементов и шлёт его клиенту. Прежде чем говорить о правилах — зафиксируем границы выполнения.

• Серверные компоненты выполняются на сервере и выводят объекты — элементы React.
• Клиентские компоненты тоже выполняются на сервере — при первом рендере, выводя такие же объекты.
• На сервере живёт один большой объект со всеми элементами — из обоих типов компонентов.
• Этот объект сериализуется в строку и отправляется клиенту.
• С этого момента серверные компоненты никогда не выполняются на клиенте.
• С этого момента клиентские компоненты выполняются только на клиенте.

Главное — сериализуемость

Сервер должен сериализовать пропсы и отправить их клиенту по сети. Поэтому пропсы серверных компонентов не могут быть функциями или другими несериализуемыми значениями.

// Серверный компонент
function ServerComponent() {
  return <ClientComponent onClick={() => alert("hi")} />;
}
// Ошибка: функция не сериализуется

Отсутствие эффективных хуков

Серверная среда принципиально другая: она не интерактивна, у неё нет DOM и нет окна вывода. Поэтому хуки состояния и эффектов в серверных компонентах не поддерживаются.

Состояние — на самом деле не состояние

Серверному компоненту негде хранить состояние: после рендера его инстанс исчезает. Единственное, что переживает рендер, — память процесса. А она одна на всех пользователей — то, что выглядит «состоянием», на деле общие данные.

// SearchPage.jsx — серверный компонент
let lastQuery = ""; // переживает рендер = общая на процесс

export default async function SearchPage({ query }) {
  if (query) lastQuery = query; // «состояние»?
  return <Results q={lastQuery} />;
}

// Запрос Анны:   ?query=моя_зарплата
// Запрос Бориса: без query →
//   Борис видит, что искала Анна

Стейт на сервере сделать можно. Почему не сделали?

Технически ничто не мешает: держи живой инстанс компонента в памяти на каждую вкладку и пуши ре-рендеры по вебсокету. Такие системы существуют — просто это другой продукт с другой ценой.

Клиентский компонент не может импортировать серверный

Клиентские компоненты выполняются и на сервере, и в браузере. А серверный компонент может тянуть за собой то, чего в браузере просто нет.

"use client";
import { ServerComponent } from "./ServerComponent";

function ClientComponent() {
  return (
    <div>
      <h1>Check out my server component!</h1>
      <ServerComponent />
    </div>
  );
}

import { readFile } from "node:fs/promises";

export async function ServerComponent() {
  const content = await readFile("./some-file.txt", "utf-8");
  return <div>{content}</div>;
}

…но может принять его через пропсы

Запрет касается только импорта: компоновщик смотрит на инструкции import, а не на состав пропсов. Композиция через children — легальна и идиоматична.

"use client";

function ClientComponent({ children }) {
  return (
    <div>
      <h1>Check out my server component!</h1>
      {children}
    </div>
  );
}

import { ServerComponent } from "./ServerComponent";

async function TheParentOfBoth() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  );
}

Клиентские компоненты не так уж плохи

RSC появились не ради моды: в типичном SPA бо́льшая часть компонентов не интерактивна — шапки, статьи, списки, — но всё равно едет в пакет, гидрируется и требует отдельного API для данных. Серверные компоненты — дополнение, а не замена: идиоматика проста — всё серверное по умолчанию, «use client» вешаем на листья с интерактивом.

Стоит запомнить только это

• Сериализуемость превыше всего: пропсы серверных компонентов едут по сети — функции и прочее несериализуемое не пройдёт.
• Эффективных хуков нет: useState и useEffect — только на клиенте; useRef и хуки без состояния — можно.
• Состояние сервера — общее для всех клиентов: нужен useState — значит, это клиентский компонент.
• Импортировать серверный компонент из клиентского нельзя, а передать его через children — можно и нужно.
• Клиентские компоненты никуда не уходят: RSC — дополнение к ним, а не замена.