Рендеринг

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

Основы

Для начала полезно ознакомиться с тремя фундаментальными веб-концепциями:

Среды окружения, в которых может выполняться код вашего приложения: сервер и клиент.
Жизненный цикл запрос-ответ, который инициируется, когда пользователь посещает или взаимодействует с вашим приложением.
Граница сети, разделяющая серверный и клиентский код.

Среды рендеринга

Существуют две среды, в которых могут рендериться веб-приложения: клиент и сервер.

Клиент относится к браузеру на устройстве пользователя, который отправляет запрос на сервер для кода вашего приложения. Затем он преобразует ответ от сервера в пользовательский интерфейс.
Сервер относится к компьютеру в дата-центре, который хранит код вашего приложения, получает запросы от клиента и отправляет соответствующий ответ.

Исторически разработчики должны были использовать разные языки (например, JavaScript, PHP) и фреймворки при написании кода для сервера и клиента. С React разработчики могут использовать один и тот же язык (JavaScript) и один и тот же фреймворк (например, Next.js или фреймворк по вашему выбору). Эта гибкость позволяет вам без проблем писать код для обеих сред без переключения контекста.

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

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

Жизненный цикл запрос-ответ

В общих чертах, все веб-сайты следуют одному и тому же жизненному циклу запрос-ответ:

Действие пользователя: Пользователь взаимодействует с веб-приложением. Это может быть щелчок по ссылке, отправка формы или ввод URL-адреса напрямую в адресную строку браузера.
HTTP-запрос: Клиент отправляет HTTP-запрос на сервер, который содержит необходимую информацию о запрашиваемых ресурсах, используемом методе (например, GET, POST) и дополнительных данных при необходимости.
Сервер: Сервер обрабатывает запрос и отвечает соответствующими ресурсами. Этот процесс может включать несколько этапов, таких как маршрутизация, извлечение данных и т. д.
HTTP-ответ: После обработки запроса сервер отправляет HTTP-ответ обратно клиенту. Этот ответ содержит код состояния (который сообщает клиенту, был ли запрос успешным или нет) и запрашиваемые ресурсы (например, HTML, CSS, JavaScript, статические ресурсы и т. д).
Клиент: Клиент анализирует ресурсы для рендеринга пользовательского интерфейса.
Действие пользователя: После рендеринга пользовательского интерфейса пользователь может взаимодействовать с ним, и весь процесс начинается заново.

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

Граница сети

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

В React вы выбираете, где разместить границу сети клиент-сервер, где это имеет больше смысла.

За кулисами работа разделяется на две части: график модулей клиента и график модулей сервера. График модулей сервера содержит все компоненты, которые рендерятся на сервере, а график модулей клиента содержит все компоненты, которые рендерятся на клиенте.

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

Вы можете использовать соглашение React "use client" для определения границы. Также существует соглашение "use server", которое сообщает React выполнить некоторые вычисления на сервере.

Создание гибридных приложений

При работе в этих средах полезно рассматривать поток кода в вашем приложении как однонаправленный. Другими словами, во время ответа код вашего приложения течет в одном направлении: от сервера к клиенту.

Если вам нужно получить доступ к серверу с клиента, вы отправляете новый запрос на сервер, а не используете тот же запрос. Это упрощает понимание, где рендерить компоненты и где разместить границу сети.

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

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