Серверные компоненты (Server Components)

React Server Components позволяют создавать интерфейсы, которые могут рендериться и опционально кэшироваться на сервере. В Next.js работа по рендерингу дополнительно разделяется по сегментам маршрутов для поддержки потоковой передачи и частичного рендеринга, и доступны три стратегии серверного рендеринга:

• Статический рендеринг
• Динамический рендеринг
• Потоковая передача

На этой странице объясняется, как работают Server Components, когда их стоит использовать, и различные стратегии серверного рендеринга.

Преимущества серверного рендеринга

Рендеринг на сервере имеет несколько преимуществ:

• Загрузка данных: Server Components позволяют перенести загрузку данных на сервер, ближе к источнику данных. Это может улучшить производительность, сократив время загрузки данных, необходимых для рендеринга, и количество запросов, которые должен делать клиент.
• Безопасность: Server Components позволяют хранить конфиденциальные данные и логику на сервере, такие как токены и API-ключи, без риска их раскрытия клиенту.
• Кэширование: Результат рендеринга на сервере может быть закэширован и повторно использован при последующих запросах и между разными пользователями. Это улучшает производительность и снижает затраты, уменьшая объем рендеринга и загрузки данных для каждого запроса.
• Производительность: Server Components предоставляют дополнительные инструменты для оптимизации производительности. Например, если начать с приложения, полностью состоящего из клиентских компонентов (Client Components), перенос неинтерактивных частей интерфейса в Server Components может уменьшить объем клиентского JavaScript. Это полезно для пользователей с медленным интернетом или менее мощными устройствами, так как браузеру нужно загружать, парсить и выполнять меньше JavaScript.
• Первоначальная загрузка страницы и First Contentful Paint (FCP): На сервере можно сгенерировать HTML, позволяя пользователям сразу видеть страницу, не дожидаясь загрузки, парсинга и выполнения JavaScript на клиенте.
• Поисковая оптимизация и расшаривание в соцсетях: Сгенерированный HTML может использоваться поисковыми ботами для индексации страниц и ботами соцсетей для создания превью карточек.
• Потоковая передача: Server Components позволяют разделить работу по рендерингу на части и передавать их клиенту по мере готовности. Это позволяет пользователю видеть части страницы раньше, не дожидаясь полного рендеринга всей страницы на сервере.

Использование Server Components в Next.js

По умолчанию Next.js использует Server Components. Это позволяет автоматически реализовать серверный рендеринг без дополнительной настройки, а при необходимости можно использовать Client Components.

Как рендерятся Server Components?

На сервере Next.js использует API React для организации рендеринга. Работа по рендерингу разделяется на части: по отдельным сегментам маршрутов и границам Suspense.

Каждая часть рендерится в два этапа:

1. React рендерит Server Components в специальный формат данных под названием React Server Component Payload (RSC Payload).
2. Next.js использует RSC Payload и инструкции JavaScript для клиентских компонентов, чтобы отрендерить HTML на сервере.

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

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

Что такое React Server Component Payload (RSC)?

RSC Payload — это компактное бинарное представление отрендеренного дерева React Server Components. Оно используется React на клиенте для обновления DOM браузера. RSC Payload содержит:

• Результат рендеринга Server Components
• Заполнители для мест, где должны рендериться Client Components, и ссылки на их JavaScript-файлы
• Любые пропсы, переданные из Server Component в Client Component

Стратегии серверного рендеринга

Существует три подхода к серверному рендерингу: статический, динамический и потоковая передача.

Статический рендеринг (по умолчанию)

При статическом рендеринге маршруты рендерятся во время сборки или в фоновом режиме после ревалидации данных. Результат кэшируется и может быть размещен в Content Delivery Network (CDN). Эта оптимизация позволяет использовать результат рендеринга для разных пользователей и запросов.

Статический рендеринг полезен, когда данные маршрута не персонализированы для пользователя и могут быть известны во время сборки, например, статическая статья блога или страница товара.

Динамический рендеринг

При динамическом рендеринге маршруты рендерятся для каждого пользователя во время запроса.

Динамический рендеринг полезен, когда данные маршрута персонализированы для пользователя или содержат информацию, которая становится известна только во время запроса, например, куки или параметры URL.

Динамические маршруты с кэшированными данными

В большинстве сайтов маршруты не являются полностью статическими или полностью динамическими — это спектр. Например, у вас может быть страница интернет-магазина с кэшированными данными товаров, которые ревалидируются через интервалы, но также с некэшированными персональными данными клиента.

В Next.js можно иметь динамически рендерящиеся маршруты с кэшированными и некэшированными данными, потому что RSC Payload и данные кэшируются отдельно. Это позволяет использовать динамический рендеринг без опасений за производительность из-за загрузки всех данных во время запроса.

Подробнее о кэше полного маршрута и кэше данных.

Переключение на динамический рендеринг

Во время рендеринга, если обнаруживается динамическая функция или некэшированный запрос данных, Next.js переключается на динамический рендеринг всего маршрута. В таблице ниже показано, как динамические функции и кэширование данных влияют на тип рендеринга маршрута:

В таблице выше для полностью статического маршрута все данные должны быть кэшированы. Однако можно иметь динамически рендерящийся маршрут, использующий как кэшированные, так и некэшированные запросы данных.

Как разработчику, вам не нужно выбирать между статическим и динамическим рендерингом — Next.js автоматически выберет лучшую стратегию для каждого маршрута на основе используемых функций и API. Вместо этого вы выбираете, когда кэшировать или ревалидировать определенные данные, и можете выбрать потоковую передачу частей вашего интерфейса.

Динамические функции

Динамические функции зависят от информации, которая становится известна только во время запроса, такой как куки пользователя, заголовки текущего запроса или параметры URL. В Next.js к таким функциям относятся:

• cookies() и headers(): Их использование в Server Component переводит весь маршрут в динамический рендеринг во время запроса.
• searchParams: Использование пропса searchParams на странице переводит её в динамический рендеринг во время запроса.

Использование любой из этих функций переводит весь маршрут в динамический рендеринг во время запроса.

Потоковая передача

Потоковая передача позволяет постепенно рендерить интерфейс с сервера. Работа разделяется на части и передается клиенту по мере готовности. Это позволяет пользователю видеть части страницы сразу, до завершения рендеринга всего содержимого.

Потоковая передача встроена в App Router Next.js по умолчанию. Это улучшает как первоначальную загрузку страницы, так и отображение интерфейса, зависящего от медленной загрузки данных, которая могла бы блокировать рендеринг всего маршрута. Например, отзывы на странице товара.

Вы можете начать потоковую передачу сегментов маршрута с помощью loading.js и компонентов интерфейса с React Suspense. Подробнее см. в разделе Интерфейс загрузки и потоковая передача.