Skip to main content

Що робить директива "use client"?

Next.jsMiddle~1 хв читання
Запропонувати правку

Директива "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.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку