Компоненты Клиента

Компоненты Клиента позволяют вам создавать интерактивный пользовательский интерфейс, который предварительно отрисовывается на сервере и может использовать JavaScript-клиента для работы в браузере.

Эта страница расскажет о том, как работают компоненты Клиента, как они отрисовываются и когда их следует использовать.

Преимущества клиентской отрисовки

Существует несколько преимуществ выполнения работы по отрисовке на клиенте, включая:

• Интерактивность: Компоненты Клиента могут использовать состояние, эффекты и обработчики событий, что означает, что они могут предоставлять мгновенную обратную связь пользователю и обновлять пользовательский интерфейс.
• API браузера: Компоненты Клиента имеют доступ к API браузера, таким как геолокация или localStorage.

Использование компонентов Клиента в Next.js

Чтобы использовать компоненты Клиента, вы можете добавить директиву 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>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

Диаграмма ниже показывает, что использование onClick и useState в вложенном компоненте (toggle.js) приведет к ошибке, если директива "use client" не определена. Это происходит потому, что по умолчанию все компоненты в маршрутизаторе приложения являются серверными компонентами, где эти API недоступны. Определяя директиву "use client" в toggle.js, вы можете указать React перейти к клиентской границе, где эти API доступны.

Определение нескольких точек входа use client:

Вы можете определить несколько точек входа «use client» в дереве React-компонентов. Это позволяет разделить ваше приложение на несколько клиентских пакетов.

Однако, "use client" не обязательно нужно определять в каждом компоненте, который должен быть отрисован на клиенте. После определения границы все дочерние компоненты и модули, импортированные в него, считаются частью клиентского пакета.

Как отрисовываются компоненты Клиента?

В Next.js компоненты Клиента отрисовываются по-разному в зависимости от того, является ли запрос частью полной загрузки страницы (первый визит на ваш сайт или перезагрузка страницы, вызванная обновлением браузера) или последующей навигацией.

Полная загрузка страницы

Для оптимизации начальной загрузки страницы Next.js будет использовать API React для отрисовки статического HTML-предварительного просмотра на сервере для компонентов Клиента и Сервера. Это означает, что когда пользователь впервые посещает ваш сайт, он сразу увидит содержимое страницы, без ожидания загрузки, обработки и выполнения JavaScript-пакета компонента Клиента.

На сервере:

1. React отрисовывает Серверные компоненты в специальный формат данных, называемый Загрузкой серверного компонента React (RSC Payload), который включает ссылки на компоненты Клиента.
2. Next.js использует RSC Payload и инструкции JavaScript компонента Клиента для отрисовки HTML для маршрута на сервере.

Затем, на клиенте:

1. HTML используется для немедленного отображения быстрого неинтерактивного начального предварительного просмотра маршрута.
2. Загрузка серверного компонента React используется для согласования деревьев компонентов Клиента и Сервера и обновления DOM.
3. Инструкции JavaScript используются для гидратации компонентов Клиента и предоставления их пользовательского интерфейса интерактивности.

Что такое гидратация?

Гидратация — это процесс привязки обработчиков событий к DOM, чтобы сделать статический HTML интерактивным. Под капотом гидратация выполняется с помощью hydrateRoot API React.

Последующие навигации

При последующих навигациях компоненты Клиента отрисовываются полностью на клиенте без предварительно отрисованного сервером HTML.

Это означает, что пакет JavaScript компонента Клиента загружается и обрабатывается. После готовности пакета React использует RSC Payload для согласования деревьев компонентов Клиента и Сервера и обновления DOM.

Возврат к серверной среде

Иногда после объявления границы "use client" вы можете вернуться к серверной среде. Например, вы можете уменьшить размер клиентского пакета, получить данные на сервере или использовать API, доступный только на сервере.

Вы можете сохранить код на сервере, даже если он теоретически вложен внутри компонентов Клиента, путем чередования компонентов Клиента и Сервера и Действий Сервера. Дополнительную информацию см. на странице Шаблоны композиции.