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

Покращити цю статтю

Допрацюйте відповідь до «Що таке клієнтські компоненти в Next.js?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Клієнтські компоненти (Client Components)** у Next.js - це React-компоненти, які **виконуються в браузері користувача** і відповідають за **інтерактивність інтерфейсу**.

Простіше:
все, що **реагує на дії користувача**, робиться через клієнтські компоненти.

---

## Коротке визначення (для співбесіди)

**Клієнтський компонент** - це компонент, який:

- рендериться і виконується **в браузері**
- підтримує стан, ефекти й обробники подій
- надсилається користувачу у вигляді JavaScript
- явно позначається директивою `'use client'`

---

## Як оголосити клієнтський компонент

```tsx
'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'` **обов'язковий**
Він має бути **першим рядком файлу**.

---

## Що клієнтські компоненти ВМІЮТЬ

- `useState`, `useEffect`, `useReducer`, `useContext`
- обробники подій (`onClick`, `onSubmit`, `onChange`)
- доступ до `window`, `document`, `localStorage`
- роботу з браузерними API
- динамічне оновлення UI без перезавантаження

---

## Що клієнтські компоненти НЕ ВМІЮТЬ (або не можна)

- напряму працювати з БД
- використовувати серверні секрети
- звертатися до файлової системи
- імпортувати серверні компоненти

Чому?
Тому що їхній код **надсилається в браузер** і має бути безпечним.

---

## Коли потрібно використовувати клієнтські компоненти

Використовуй клієнтський компонент, якщо є хоча б одна з умов:

- кнопки, кліки, форми
- модальні вікна
- дропдауни, таби, акордеони
- керування станом
- анімації
- `useEffect`

Якщо інтерактивності немає - **клієнтський компонент не потрібен**.

---

## Взаємодія із серверними компонентами

### Важливе правило:

> **Клієнтський компонент не може імпортувати серверний**

Так не можна:

```tsx
'use client'
import ServerComponent from './ServerComponent'
```

Так можна:

```tsx
// Server Component
import ClientComponent from './ClientComponent'
```

Чому так зроблено:

- серверний код не повинен потрапляти в браузер
- Next.js жорстко стежить за межею сервер / клієнт

---

## Часта помилка новачків

Робити весь UI клієнтським:

```tsx
'use client'
export default function Page() {
  return <BigStaticLayout />
}
```

Правильно:

- залишити сторінку серверною
- винести інтерактивні шматки в клієнтські компоненти

---

## Коротке порівняння (для закріплення)

| Клієнтський компонент | Серверний компонент |
|---|---|
| Працює в браузері | Працює на сервері |
| Є інтерактивність | Немає інтерактивності |
| JS надсилається | JS не надсилається |
| Потрібен `'use client'` | За замовчуванням |
| Використовує хуки | Хуки не можна |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати378 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.