Клиентские компоненты: 'use client'

Учимся добавлять интерактивность там, где она реально нужна, директивой 'use client'.

Директива 'use client' в начале файла помечает компонент (и его импорт-дерево) как клиентский: его код уезжает в браузер, и в нём снова доступны состояние, эффекты и обработчики событий.

Когда нужен клиент

Серверные компоненты не умеют реагировать на клики и хранить состояние. Как только нужны useState, useEffect, обработчики или браузерные API — компонент должен стать клиентским. Делается это одной строкой в самом верху файла:

"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Нажато {count} раз
    </button>
  );
}

Директива должна быть первой строкой файла, до импортов.

Граница «сервер → клиент»

Важно понимать: 'use client' помечает границу. Серверный компонент может рендерить клиентский, но не наоборот в импортах. Типичный приём — оставить страницу серверной (она грузит данные) и вынести интерактивный кусок в отдельный клиентский компонент:

// app/page.tsx — серверный
import Counter from "./Counter"; // клиентский компонент

export default function Page() {
  return (
    <main>
      <h1>Главная</h1>
      <Counter />
    </main>
  );
}

Так интерактивная часть («остров») крошечная, а всё остальное остаётся на сервере без лишнего JavaScript.

Как выбрать

Частая ошибка

Если поставить useState в серверный компонент, получите ошибку сборки вроде «useState is not a function» — это сигнал, что компоненту нужна директива 'use client'. Не делайте клиентским всё подряд «на всякий случай»: каждый клиентский компонент добавляет JavaScript в браузер.

Итог

• 'use client' в первой строке делает компонент клиентским — возвращаются состояние и эффекты.
• Держите клиентские «острова» маленькими, а данные грузите в серверных компонентах.
• Не помечайте клиентским всё подряд — это лишний JavaScript в браузере.