resumeAndPrerender

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

• Справочник
  • resumeAndPrerender(reactNode, postponedState, options?)
• Использование
  • Дополнительная информация

Справочник

resumeAndPrerender(reactNode, postponedState, options?)

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

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: сигнал прерывания, позволяющий прервать серверную отрисовку и отрисовать оставшуюся часть на клиенте.
  • необязательный onError: функция обратного вызова, которая вызывается при каждой ошибке на сервере — как восстановимой, так и невосстановимой. По умолчанию она вызывает только console.error. Если вы переопределите её, чтобы записывать отчёты о сбоях в журнал, обязательно продолжайте вызывать console.error.

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

prerender возвращает Promise:

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

Ограничения

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

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

Дополнительная информация

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