Когда и как использовать Client Components?

Question

Accepted Answer

**Client Component** работает в браузере (и также предварительно отрисовывается на сервере для исходного HTML). Вы активируете его с помощью директивы **`"use client"`** в начале файла. Они вам нужны, когда требуется интерактивность, состояние, эффекты или API браузера. ## Declaring one ```tsx "use client"; // MUST be the first line of the file import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); // ✅ hooks work here return ; // ✅ events } ``` ## When you NEED a Client Component ```text ✓ useState / useReducer / useEffect / useRef / useContext ✓ Event handlers (onClick, onChange, onSubmit) ✓ Browser APIs (window, localStorage, navigator, IntersectionObserver) ✓ Third-party libraries that use any of the above (most UI/animation libs) ``` ## The directive cascades to children Отметка файла как `"use client"` делает его и **все, что он импортирует**, частью пакета клиента. Поэтому вы хотите, чтобы границы клиента были **небольшими и низко в дереве** — "клиентские острова" — а не отмечали макет верхнего уровня как клиент (что протащило бы всё приложение в пакет браузера). ```tsx // ✅ Good: server page, small client island only where needed export default async function Page() { // Server Component const data = await getData(); return <>; // island is "use client" } ``` ## Passing data from server to client ```tsx // Server Component fetches, passes serializable props down to the client island ``` Пропсы, переданные с сервера на Client Component, должны быть **сериализуемыми** (без функций, без экземпляров классов), поскольку они пересекают границу сервер→клиент. ## Почему это важно Client Components — это способ добавить интерактивность в приложение, которое в остальном ориентировано на сервер. Навык состоит в том, чтобы держать их минимальными и на листьях — интерактивность там, где она нужна, Server Components везде — чтобы отправить минимум JavaScript. Размещение `"use client"` высоко в дереве — распространённая ошибка, которая раздувает пакет и отказывает вам от преимуществ Server Components.