resumeToPipeableStream

resumeToPipeableStream передаёт предварительно отрендеренное дерево React в передаваемый Node.js Stream.

const {pipe, abort} = await resumeToPipeableStream(reactNode, postponedState, options?)

Примечание

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

Описание

resumeToPipeableStream(node, postponed, options?)

Вызовите resumeToPipeableStream, чтобы возобновить рендеринг предварительно отрендеренного дерева React в HTML в Node.js Stream.

import { resumeToPipeableStream } from 'react-dom/server';
import {getPostponedState} from './storage';

async function handler(request, response) {
  const postponed = await getPostponedState(request);
  const {pipe} = resumeToPipeableStream(<App />, postponed, {
    onShellReady: () => {
      pipe(response);
    }
  });
}

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

Параметры

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

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

resumeToPipeableStream возвращает объект с двумя методами:

• pipe выводит HTML в переданный записываемый поток Node.js. Вызовите pipe в onShellReady, если хотите включить потоковую передачу, или в onAllReady для краулеров и статической генерации.
• abort позволяет прервать серверный рендеринг и дорендерить остальное на клиенте.

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

• resumeToPipeableStream не принимает опции bootstrapScripts, bootstrapScriptContent и bootstrapModules. Эти опции нужно передать в вызов prerender, который создаёт postponedState. Содержимое бутстрапа также можно вручную вставить в записываемый поток.
• resumeToPipeableStream не принимает identifierPrefix, потому что префикс должен совпадать в prerender и resumeToPipeableStream.
• Поскольку nonce нельзя передать в пререндер, передавайте nonce в resumeToPipeableStream, только если вы не передаёте скрипты в пререндер.
• resumeToPipeableStream заново рендерит дерево от корня, пока не найдёт компонент, который не был полностью предварительно отрендерен. Полностью пререндеренные компоненты (сам компонент и его дочерние элементы закончили пререндер) пропускаются целиком.

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

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

Возобновление ведёт себя как renderToReadableStream. Больше примеров — в разделе использования renderToReadableStream. Раздел использования prerender содержит примеры того, как использовать именно prerenderToNodeStream.

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

Комментарии