Директива use client

Директива 'use client' объявляет точку входа для компонентов, которые должны рендериться на стороне клиента, и должна использоваться при создании интерактивных пользовательских интерфейсов (UI), требующих возможностей клиентского JavaScript, таких как управление состоянием, обработка событий и доступ к браузерным API. Это особенность React.

Полезно знать:

Вам не нужно добавлять директиву 'use client' в каждый файл, содержащий клиентские компоненты. Её нужно добавлять только в те файлы, компоненты из которых вы хотите рендерить напрямую внутри серверных компонентов. Директива 'use client' определяет границу между сервером и клиентом, а компоненты, экспортируемые из такого файла, служат точками входа на клиент.

Использование

Чтобы объявить точку входа для клиентских компонентов, добавьте директиву 'use client' в начало файла, перед любыми импортами:

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

При использовании директивы 'use client' пропсы клиентских компонентов должны быть сериализуемыми. Это означает, что пропсы должны быть в формате, который React может сериализовать при передаче данных с сервера на клиент.

'use client'

export default function Counter({
  onClick /* ❌ Функция не сериализуема */,
}) {
  return (
    <div>
      <button onClick={onClick}>Increment</button>
    </div>
  )
}

'use client'

export default function Counter({
  onClick /* ❌ Функция не сериализуема */,
}) {
  return (
    <div>
      <button onClick={onClick}>Increment</button>
    </div>
  )
}

Вложенность клиентских компонентов в серверные

Комбинирование серверных и клиентских компонентов позволяет создавать производительные и интерактивные приложения:

1. Серверные компоненты: Используйте для статического контента, загрузки данных и SEO-оптимизированных элементов.
2. Клиентские компоненты: Используйте для интерактивных элементов, требующих состояния, эффектов или браузерных API.
3. Композиция компонентов: Вкладывайте клиентские компоненты в серверные по мере необходимости для чёткого разделения серверной и клиентской логики.

В следующем примере:

• Header — серверный компонент, обрабатывающий статический контент.
• Counter — клиентский компонент, обеспечивающий интерактивность на странице.

import Header from './header'
import Counter from './counter' // Это клиентский компонент

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

import Header from './header'
import Counter from './counter' // Это клиентский компонент

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

Справочная информация

Подробнее о директиве 'use client' см. в документации React.