Що таке клієнтські компоненти в Next.js?

Next.jsMiddle~1 хв читання

Клієнтські компоненти (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'`	За замовчуванням
Використовує хуки	Хуки не можна

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

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

Premium

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