resumeAndPrerenderToNodeStream

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

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

Примечание

Этот API специфичен для Node.js. Окружения с Web Streams, такие как Deno и современные граничные среды исполнения, должны использовать prerender.

Описание

resumeAndPrerenderToNodeStream(reactNode, postponedState, options?)

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

import { resumeAndPrerenderToNodeStream } from 'react-dom/static';
import { getPostponedState } from 'storage';

async function handler(request, writable) {
  const postponedState = getPostponedState(request);
  const { prelude } = await resumeAndPrerenderToNodeStream(<App />, JSON.parse(postponedState));
  prelude.pipe(writable);
}

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

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

Параметры

• reactNode: Узел React, с которым вы вызывали prerender (или предыдущий resumeAndPrerenderToNodeStream). Например, 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.

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии