Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить директива "use client"?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Директива `"use client"` каже Next.js, що **цей файл і весь його вміст повинні виконуватися в браузері**, а не на сервері. **Ключове:** вона перетворює компонент на клієнтський.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняДиректива `"use client"` каже Next.js, що **цей файл і весь його вміст повинні виконуватися в браузері**, а не на сервері. Простіше: вона **перетворює компонент на клієнтський**. --- ## Де і як використовується ```tsx 'use client' export default function Button() { return <button>Click</button> } ``` Важливо: - `"use client"` **має бути першим рядком файлу** - діє **на весь файл цілком** --- ## Що саме робить `"use client"` ### 1. Перемикає компонент у клієнтський режим Після `"use client"` компонент: - рендериться і гідратується в браузері - потрапляє в JavaScript-бандл клієнта Без цієї директиви компонент вважається **серверним за замовчанням**. --- ### 2. Дозволяє інтерактивність З `"use client"` стають доступні: - `useState` - `useEffect` - `useContext` - обробники подій (`onClick`, `onChange`) - робота з `window`, `document`, `localStorage` Без директиви усе це викличе помилку. --- ### 3. Визначає межу Server ↔ Client `"use client"`: - створює **межу між сервером і браузером** - усе, що імпортується в цей файл, теж вважається клієнтським ```tsx // Button.tsx 'use client' import Icon from './Icon' // Icon теж клієнтський ``` Це важливо для розуміння архітектури. --- ### 4. Впливає на розмір клієнтського JavaScript Кожен файл із `"use client"`: - збільшує JS, що надсилається в браузер - вимагає гідрації Тому директиву використовують **точково**, а не «про всяк випадок». --- ## Чого `"use client"` НЕ робить - не робить компонент швидшим автоматично - не вимикає серверний рендеринг HTML - не дозволяє працювати з БД або секретами - не діє на інші файли без імпорту --- ## Типова помилка Позначати всю сторінку як клієнтську: ```tsx 'use client' export default function Page() { return <Layout /> } ``` Правильніше: - залишити сторінку серверною - винести інтерактивні частини в окремі клієнтські компоненти --- ## Коротко `"use client"` **позначає файл як клієнтський компонент, дозволяє інтерактивність і визначає, що код виконуватиметься в браузері та потрапить у клієнтський JavaScript.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.