loading.js

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

export default function Loading() {
  // Или кастомный компонент скелетона загрузки
  return <p>Загрузка...</p>
}

export default function Loading() {
  // Или кастомный компонент скелетона загрузки
  return <p>Загрузка...</p>
}

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

По умолчанию этот файл является Серверным Компонентом, но также может использоваться как Клиентский Компонент с директивой "use client".

Справочник

Параметры

Компоненты интерфейса загрузки не принимают параметров.

Поведение

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

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

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

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

export default function Loading() {
  // Внутрь Loading можно добавить любой UI, включая Skeleton.
  return <LoadingSkeleton />
}

export default function Loading() {
  // Внутрь Loading можно добавить любой UI, включая Skeleton.
  return <LoadingSkeleton />
}

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

SEO

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

Коды состояния

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

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

Ограничения браузеров

Некоторые браузеры буферизуют потоковый ответ. Вы можете не увидеть потоковый ответ, пока он не превысит 1024 байта. Обычно это влияет только на "hello world" приложения, но не на реальные проекты.

Поддержка платформ

Вариант развертывания	Поддержка
Сервер Node.js	Да
Docker контейнер	Да
Статический экспорт	Нет
Адаптеры	Зависит от платформы

Узнайте, как настроить потоковую передачу при самостоятельном хостинге Next.js.

Примеры

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

Помимо loading.js, вы также можете вручную создавать границы Suspense для своих UI компонентов. App Router поддерживает потоковую передачу с Suspense.

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

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Загрузка ленты...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Загрузка погоды...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Загрузка ленты...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Загрузка погоды...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

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

Потоковый серверный рендеринг — прогрессивный рендеринг HTML с сервера на клиент.
Селективная гидрация — React приоритизирует, какие компоненты сделать интерактивными первыми, основываясь на действиях пользователя.

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

История версий

Версия	Изменения
`v13.0.0`	Добавлен `loading`.

On this page