Загрузка пользовательского интерфейса и потоковая передача

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

Мгновенные состояния загрузки

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

Создайте состояние загрузки, добавив файл loading.js в папку.

export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />
}

В той же папке loading.js будет вложен внутри layout.js. Он автоматически обернёт файл page.js и все дочерние элементы в границу <Suspense>.

Важно знать:

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

Рекомендация: Используйте конвенцию loading.js для разделов маршрута (макетов и страниц), так как Next.js оптимизирует эту функциональность.

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

Помимо loading.js, вы также можете вручную создать границы Suspense для собственных компонентов пользовательского интерфейса. Приложение Router поддерживает потоковую передачу с Suspense для обоих Node.js и Edge-времён выполнения.

Важно знать:

• Некоторые браузеры буферизуют ответ потоковой передачи. Вы можете не увидеть ответ потоковой передачи, пока он не превысит 1024 байта. Это обычно влияет только на приложения «привет, мир», но не на реальные приложения.

Что такое потоковая передача?

Чтобы понять, как работает потоковая передача в React и Next.js, полезно понять рендеринг на стороне сервера (SSR) и его ограничения.

При SSR выполняется ряд шагов, прежде чем пользователь сможет увидеть и взаимодействовать со страницей:

1. Сначала все данные для данной страницы извлекаются на сервере.
2. Затем сервер рендерит HTML для страницы.
3. HTML, CSS и JavaScript для страницы отправляются на клиент.
4. Отображается неинтерактивный пользовательский интерфейс с помощью сгенерированного HTML и CSS.
5. Наконец, React гидратирует пользовательский интерфейс, чтобы сделать его интерактивным.

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

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

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

Потоковая передача позволяет разбить HTML страницы на более мелкие фрагменты и постепенно отправлять эти фрагменты с сервера на клиент.

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

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

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

Пример

<Suspense> работает, обертывая компонент, выполняющий асинхронное действие (например, извлечение данных), отображая пользовательский интерфейс по умолчанию (например, скелет, спиннер) во время его выполнения и затем подставляя ваш компонент после завершения действия.

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

Используя Suspense, вы получаете преимущества:

1. Потоковая передача рендеринга на сервере — поэтапное рендеринг HTML с сервера на клиент.
2. Выборочная гидратация — React отдаёт приоритет компонентам, которые нужно сделать интерактивными в первую очередь, основываясь на взаимодействии пользователя.

Дополнительные примеры и варианты использования Suspense см. в документации React.

SEO

• Next.js будет ждать завершения извлечения данных внутри generateMetadata, прежде чем передавать пользовательский интерфейс на клиент. Это гарантирует, что первая часть ответа потоковой передачи включает теги <head>.
• Поскольку потоковая передача рендерится на сервере, это не влияет на SEO. Вы можете использовать инструмент Проверка богатых результатов от Google, чтобы увидеть, как ваша страница отображается веб-червям Google, и просмотреть сериализованный HTML (источник).

Статусные коды

При потоковой передаче будет возвращён код статуса 200, чтобы указать, что запрос был выполнен успешно.

Сервер по-прежнему может передать ошибки или проблемы клиенту в рамках самого содержимого потоковой передачи, например, при использовании redirect или notFound. Поскольку заголовки ответа уже отправлены клиенту, код состояния ответа не может быть обновлён. Это не влияет на SEO.