Граница сериализации: use client режет граф модулей

Директива на модуле, а не флаг на компоненте

'use client' ставится в начале файла и означает: отсюда этот модуль и всё, что он импортирует, транзитивно принадлежат клиентскому бандлу. Это разрез графа, а не свойство компонента. Пометив 40-строчный Tabs.tsx, вы добавили в бандл не 40 строк — вы добавили Tabs.tsx плюс его импорты, плюс их импорты, до самого дна графа. Один неосторожный import { format } from "../lib/format", где format.ts тянет утилиту для графиков, притянет и библиотеку графиков. Поэтому же серверный компонент, импортированный клиентским файлом, молча становится клиентским: на самом компоненте нет маркера, есть только положение его модуля в графе относительно ближайшего разреза 'use client'. Дисциплина отсюда: держите клиентские файлы маленькими листьями и относитесь к каждому добавленному в них импорту как к решению о размере бандла и о секретности.

Защитный инструмент для секретной половины — пакет server-only: импортируйте его в любом модуле, который никогда не должен достичь клиента (db.ts, config.ts, всё, что трогает process.env), и сборка упадёт в момент, когда какой-нибудь рефакторинг утащит модуль через разрез. Цена — одна строка импорта; молчаливая утечка превращается в ошибку компиляции. Зеркальный пакет client-only существует для модулей, которым нельзя выполняться на сервере.

Что может пересекать границу: правила сериализации

Пропсы из серверного компонента в клиентский сериализуются в Flight-пейлоад. Разрешённый список шире JSON, но строг: примитивы (string, number, bigint, boolean, undefined, null, символы только через Symbol.for), простые объекты и массивы, Date, Map, Set, TypedArray и ArrayBuffer, FormData, JSX, произведённый серверными компонентами, Promise (клиент разворачивает их через use() — так через границу едут стримящиеся данные) и ссылки на серверные функции. Список отказов — то, что определяет архитектуру: функции (кроме функций с 'use server'), экземпляры классов (всё, чей прототип не Object.prototype, — сущность ORM, объект Temporal, ваша доменная модель), незарегистрированные символы. Отвергнутое значение бросает ошибку сериализации в момент рендера с именем пропса.

Опасен случай, который не бросает. Большинство ORM возвращают простые объекты — и полная строка базы проплывает сериализацию и ложится, колонка за колонкой, в пейлоад, который может прочитать любой пользователь. Утечка passwordHash из Hook — ровно эта форма. Когда ты видишь в ревью пропс, принимающий объект модели целиком, спроси себя: какие колонки ты готов публиковать всем, у кого есть Ctrl+U? Правило, переживающее аудиты: считайте поверхность пропсов сервер→клиент публичным API. Маппируйте строки в явные DTO (Data Transfer Object — объект передачи данных с ровно теми полями, которые нужны UI) на границе — { id, name, avatarUrl } — так же, как вы никогда не вернули бы SELECT * из публичного эндпоинта.

Переплетение без импорта: паттерн children

Кажется, что разрез графа требует: всё ниже клиентского компонента — тоже клиентское. Это не так, и лазейка — старейший проп в React. Клиентский компонент не может импортировать серверный, но может получить отрендеренный на сервере вывод как children (или любой проп типа JSX), потому что серверный JSX есть в списке сериализуемого:

// Tabs.tsx — 'use client': владеет состоянием activeTab, ~2 кБ
export function Tabs({ children }: { children: React.ReactNode }) {
  const [active, setActive] = useState(0);
  return <div>{/* заголовки вкладок */}{children[active]}</div>;
}

// page.tsx — серверный компонент
<Tabs>
  <ReportPanel data={await db.reports.q3()} />   {/* остаётся серверным */}
  <AuditPanel rows={await db.audit.recent()} />  {/* остаётся серверным */}
</Tabs>

Панели рендерятся на сервере — прямой доступ к базе, ноль веса в бандле — и приезжают внутри пейлоада уже разрешёнными деревьями; Tabs лишь решает, какую показать. Правило композиции одной строкой: среду определяет импортирующий, а не рендерящий. Клиентская оболочка с серверными children — рабочая лошадь каждой серьёзной RSC-кодовой базы, и привычка тянуться к ней — то, что отличает хирургический лист 'use client' от директивы на уровне страницы, утаскивающей весь маршрут в бандл.

Обратный канал: серверные функции

Данные текут сервер→клиент через пропсы; единственный санкционированный путь обратно — серверная функция. Пометьте функцию (или целый модуль) директивой 'use server', и React заменит её в клиентском бандле сериализуемой ссылкой; вызов из браузера выполнит POST под капотом: аргументы сериализуются по тем же правилам Flight, а возвращаемое значение стримится обратно. Отсюда два продакшен-следствия. Первое: каждая серверная функция — публичный, по умолчанию неаутентифицированный эндпоинт — фреймворк сам прокладывает маршрут, и атакующему не нужен ваш UI, чтобы её вызвать; валидируйте и авторизуйте внутри функции, каждый раз, как в любом обработчике. Второе: типы аргументов и возврата подчиняются тем же правилам сериализации, что и пропсы, — ни экземпляров классов на входе, ни на выходе, — так что DTO-дисциплина работает в обе стороны.