Client Components

Client Components выполняются в браузере, проходят hydration и поддерживают state, effects, обработчики событий и browser API. `use client` в начале файла — граница для модуля и его non-server импортов.

Держите client trees компактными: оборачивайте интерактивные виджеты, а не целые страницы, если маршрут не client-only.

					'use client';

import { useState } from 'react';

export function QuantityPicker({ max }: { max: number }) {
  const [qty, setQty] = useState(1);
  return <button onClick={() => setQty((q) => Math.min(max, q + 1))}>+</button>;
}
				

На интервью: стоимость hydration, когда поднимать state в client leaves и запрещённые server imports.

Типовые ошибки: client fetch того, что уже было на сервере, огромные client subtrees для static контента, секреты в env с client-префиксом.

Компромисс: интерактивность против bundle и hydration.

Чеклист:

• Минимизируйте scope client subtree.
• Serializable props от server parents.
• Привилегированные записи — server actions или API.
• Тяжёлый client code — dynamic import.