Серверные против клиентских компонентов

Серверные компоненты — это значение по умолчанию: они выполняются на сервере, отправляют ноль JS и могут await-ить данные напрямую. Нет директивы, чтобы их включить; обычный компонент в App Router уже серверный. Он выполняется во время запроса, может быть async и может читать твой слой данных инлайн. Его отрендеренный вывод сериализуется на клиент; его исходный код — никогда.

// app/users/page.tsx — нет директивы = серверный компонент
import { db } from "~/lib/db";

export default async function UsersPage() {
  const users = await db.user.findMany(); // выполняется на сервере, секреты остаются на сервере
  return (
    <ul>
      {users.map((u) => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

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

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

// app/users/SearchBox.tsx
"use client";
import { useState } from "react";

export function SearchBox({ onChange }: { onChange: (q: string) => void }) {
  const [q, setQ] = useState("");           // состояние — нужен клиент
  return (
    <input
      value={q}
      onChange={(e) => { setQ(e.target.value); onChange(e.target.value); }} // обработчик события — нужен клиент
    />
  );
}

Чего он не может: await-ить твою базу данных в теле или импортировать секреты только-для-сервера. Клиентский компонент выполняется в браузере, поэтому он должен загружать данные через API или получать их пропсами от серверного компонента выше.

Граница направленна и заразна: 'use client' помечает точку входа, и всё, импортированное ниже, тоже становится клиентским кодом. 'use client' означает не «этот один компонент интерактивен» — а «клиентский бандл начинается здесь». Каждый модуль, который этот файл импортирует (и который сам не является границей серверного компонента), затягивается в браузерный бандл. Вот почему размещение — это вся игра: положение директивы решает, какая часть твоего дерева уедет в виде JavaScript.

// НЕВЕРНЫЙ инстинкт: пометить страницу, чтобы потомок мог использовать состояние
"use client";              // ⛔ теперь страница И все её потомки — клиентский код
import { Chart } from "./Chart";        // тяжёлый — теперь в бандле
import { Table } from "./Table";        // статичный — без нужды в бандле
export default function Dashboard() { /* ...одной кнопке понадобилось состояние... */ }

Одному компоненту понадобился обработчик клика — и вся панель (библиотека графиков, статичная таблица, всё целиком) стала клиентским бандлом и потеряла доступ к данным на сервере. Лекарство — никогда не двигать границу вверх; нужно опускать её вниз.

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

// Родитель — серверный компонент: данные + композиция остаются на сервере
export default async function Dashboard() {
  const data = await getMetrics();
  return (
    <section>
      <Chart data={data} />                {/* серверный компонент: ноль JS */}
      <Collapsible>                        {/* крошечный клиентский лист для переключателя */}
        <Table rows={data.rows} />         {/* серверный компонент, передан как children */}
      </Collapsible>
    </section>
  );
}

// Collapsible.tsx — ЕДИНСТВЕННЫЙ клиентский код здесь
"use client";
import { useState } from "react";
export function Collapsible({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen((o) => !o)}>{open ? "Hide" : "Show"}</button>
      {open && children}                   {/* отрендеренная на сервере Table, без лишнего JS */}
    </>
  );
}

Теперь JS отправляет только Collapsible. График, таблица и загрузка данных остаются на сервере. Граница — это лист, а не корень.