'use client' и сериализуемые пропсы

'use client' помечает модуль — и всё, что он импортирует, — как границу клиента, а не один компонент. Директива стоит в начале файла. С этого файла вниз по его графу импортов код выполняется (и грузится) на клиенте. Server-компонент, который рендерит 'use client'-компонент, — родитель границы; задача директивы — сказать бандлеру «отсюда вниз это поддерево клиентское». Так что единица, которую ты помечаешь, — никогда не «этот один компонент», а «этот модуль и всё, до чего из него можно дотянуться».

// likes-button.tsx
'use client';
import { useState } from 'react';
import { formatCount } from './format';   // <- этот модуль теперь тоже КЛИЕНТСКИЙ

export function LikesButton({ initial }: { initial: number }) {
  const [n, setN] = useState(initial);
  return <button onClick={() => setN(n + 1)}>{formatCount(n)} likes</button>;
}

У formatCount не было собственной директивы, но импорт из клиентского модуля утаскивает его через границу. Практическое senior-следствие: 'use client'-файл на вершине глубокого дерева импортов затягивает всё это дерево в клиентский бандл. Ставь директиву на лист, которому реально нужна интерактивность, а не на layout, импортирующий половину приложения.

Пропсы, передаваемые из Server-компонента в Client-компонент, должны быть сериализуемыми. Граница — это настоящий провод: сервер рендерит, и пропсы для каждого клиентского островка сериализуются в payload, из которого браузер гидратируется. Сериализуемое — это то, что RSC умеет закодировать: примитивы, простые объекты и массивы сериализуемых значений, Date, Map, Set, ссылки на server-actions, JSX (ReactNode) и Promises сериализуемых значений. Несериализуемое: произвольные функции, экземпляры классов и любой объект, который ты передаёшь ради его поведения, а не данных.

// page.tsx  (Server-компонент — без директивы)
import { LikesButton } from './likes-button';

export default async function Page() {
  const post = await db.post.find();        // экземпляр класса? -> отобрази в простые данные
  return (
    <LikesButton
      initial={post.likes}                   // число — нормально
      // onLiked={() => track('like')}       // функция — НЕ может пересечь; бросит ошибку
    />
  );
}

Почему «никаких функций»? Функция — это непрозрачное поведение; сервер не может переслать замыкание в браузер так, чтобы оно значило то же самое. Благословенное исключение — server action ('use server'), который передаётся как ссылка, которую клиент может вызвать, а не как живое замыкание. Так что коллбэки пересекают границу как server actions, а не как простые функции.

Серверный контент ты составляешь внутрь Client-компонента через children (или любой ReactNode-слот) — ты не import-ируешь Server-компонент в 'use client'-файл. Вот этот ход и сбивает людей с толку. Client-компонент не может импортировать Server-компонент (правило графа импортов из шага 1 превратило бы Server-компонент в клиентский код, лишив его серверных способностей вроде прямого доступа к БД). Но он может рендерить серверно-отрендеренный контент, переданный ему как проп. Server-компонент остаётся на сервере; его уже отрендеренный вывод передаётся вниз как children, а клиентская оболочка просто вставляет его в слот.

// клиентская оболочка — владеет интерактивностью (открыть/закрыть), ничего не знает о своём контенте
'use client';
import { useState } from 'react';

export function Collapsible({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <section>
      <button onClick={() => setOpen(o => !o)}>{open ? 'Hide' : 'Show'}</button>
      {open && children}
    </section>
  );
}

// серверная страница — составляет SERVER-компонент в клиентскую оболочку как children
import { Collapsible } from './collapsible';
import { ServerReport } from './server-report';   // Server-компонент (доступ к БД и т.п.)

export default function Page() {
  return (
    <Collapsible>
      <ServerReport />     {/* отрендерен на сервере; передан внутрь как children */}
    </Collapsible>
  );
}

Collapsible никогда не импортирует ServerReport. Родитель (Server-компонент) импортирует оба и связывает их вместе. Это и есть правило «составляй, а не импортируй через границу»: серверный контент течёт внутрь клиентских компонентов как children, а не через границу импортом.

Два режима отказа, названные так, чтобы ты замечал их с первого взгляда. Отказ A: передача несериализуемого пропа через границу — функции, экземпляра класса, живого объекта, переданного ради поведения. Ты увидишь Functions are not valid as a child of Client Components или Only plain objects ... can be passed. Лечение — передавать данные (сериализовать экземпляр в простой объект) и передавать коллбэки как server actions. Отказ B: импорт Server-компонента в 'use client'-модуль — по правилу из шага 1 это перетегирует Server-компонент в клиентский, так что его серверный код (клиенты БД, секреты, fs) либо ломает сборку, либо, хуже, утекает в сторону браузера. Лечение — инвертировать: не импортируй его, а получи как children от серверного родителя.

// ❌ Отказ B: Server-компонент импортирован в клиентский файл
'use client';
import { ServerReport } from './server-report';   // теперь клиентский; доступ к БД ломается
export function Panel() { return <div><ServerReport /></div>; }

// ✅ Лечение: прими его как children, пусть серверный родитель его подаст
'use client';
export function Panel({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
}

Когда границу не стоит проводить вообще: если у поддерева нет интерактивности, оставь его как Server-компоненты — без директивы, без налога на сериализацию, без клиентских байтов. 'use client' — это цена (сериализация + бандл), так что ставь её на наименьший лист, которому действительно нужны браузерные API или состояние.