Перейти к содержанию

resumeAndPrerender

resumeAndPrerender продолжает предварительно отрендеренное дерево React в строку статического HTML с помощью Web Stream.

1
const {prelude, postponed} = await resumeAndPrerender(reactNode, postponedState, options?)

Примечание

Этот API зависит от Web Streams. Для Node.js используйте resumeAndPrerenderToNodeStream.

Описание

resumeAndPrerender(reactNode, postponedState, options?)

Вызовите resumeAndPrerender, чтобы продолжить предварительно отрендеренное дерево React в строку статического HTML.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { resumeAndPrerender } from 'react-dom/static';
import { getPostponedState } from 'storage';

async function handler(request, response) {
  const postponedState = getPostponedState(request);
  const { prelude } = await resumeAndPrerender(<App />, postponedState, {
    bootstrapScripts: ['/main.js']
  });
  return new Response(prelude, {
    headers: { 'content-type': 'text/html' },
  });
}

На клиенте вызовите hydrateRoot, чтобы сделать сгенерированный сервером HTML интерактивным.

Больше примеров ниже.

Параметры

  • reactNode: Узел React, с которым вы вызывали prerender (или предыдущий resumeAndPrerender). Например, JSX-элемент <App />. Ожидается, что он представляет весь документ, поэтому компонент App должен вывести тег <html>.
  • postponedState: Непрозрачный объект postpone, возвращённый API пререндера и загруженный оттуда, где вы его сохранили (например, redis, файл или S3).
  • опционально options: Объект с опциями потоковой передачи.
    • опционально signal: Сигнал прерывания, который позволяет прервать серверный рендеринг и дорендерить остальное на клиенте.
    • опционально onBrowserBailout: Обратный вызов, который React вызывает, когда восстанавливается после browser(), оставляя фолбэк Suspense, который браузер заменит. Он получает Error, описывающий рендеринг только в браузере, и объект errorInfo, содержащий componentStack. Если в browser была передана причина, она доступна как error.cause. По умолчанию React ничего не делает. Как сообщать о рендеринге только в браузере.
    • опционально onError: Обратный вызов, который срабатывает при любой серверной ошибке, восстановимой или нет. По умолчанию он только вызывает console.error. Если вы переопределяете его, чтобы записывать отчёты о сбоях, всё равно вызывайте console.error.

Возвращаемое значение

prerender возвращает промис:

  • Если рендеринг прошёл успешно, промис разрешится в объект, содержащий:
    • prelude: веб-поток HTML. Этот поток можно использовать, чтобы отправлять ответ частями, или прочитать весь поток в строку.
    • postponed: непрозрачный объект, сериализуемый в JSON, который можно передать в resume или resumeAndPrerender, если prerender прерван.
  • Если рендеринг не удался, промис будет отклонён. Используйте это, чтобы вывести резервную оболочку.

Предупреждения

nonce недоступен при пререндере. Nonce должен быть уникальным для каждого запроса, и если вы защищаете приложение с помощью CSP, включать значение nonce в сам пререндер было бы неуместно и небезопасно.

Когда использовать resumeAndPrerender?

Статический API resumeAndPrerender используется для статической генерации на сервере (SSG). В отличие от renderToString, resumeAndPrerender ждёт загрузки всех данных, прежде чем разрешиться. Поэтому он подходит для генерации статического HTML целой страницы, включая данные, которые нужно получить с помощью Suspense. Чтобы передавать содержимое потоком по мере загрузки, используйте потоковый API серверного рендеринга (SSR), например renderToReadableStream.

resumeAndPrerender можно прервать и позже либо продолжить ещё одним resumeAndPrerender, либо возобновить с помощью resume, чтобы поддержать частичный пререндер.

Использование

Дополнительно

resumeAndPrerender ведёт себя похоже на prerender, но им можно продолжить ранее начатый и прерванный пререндер. Подробнее о возобновлении предварительно отрендеренного дерева см. документацию resume.

Источник — https://react.dev/reference/react-dom/static/resumeAndPrerender

Комментарии