Компоненты сервера

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

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

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

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

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

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

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

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

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

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

Каждый фрагмент отрисовывается в два этапа:

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

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

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

Что такое Нагрузка компонента сервера React (RSC)?

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

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

Стратегии серверной отрисовки

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

Статическая отрисовка (по умолчанию)

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

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

Динамическая отрисовка

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

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

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

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

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

Узнайте больше о полном кэше маршрутов и кэше данных.

Переключение на динамическую отрисовку

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

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

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

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

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

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

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

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

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

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

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