renderToStaticNodeStream

const stream = renderToStaticNodeStream(reactNode, options?)

• Ссылка
  • renderToStaticNodeStream(reactNode, options?)
• Использование
  • Отображение дерева React в виде статического HTML в поток Node.js Readable Stream

Ссылка

renderToStaticNodeStream(reactNode, options?)

На сервере вызовите renderToStaticNodeStream для получения потока Node.js Readable Stream.

import { renderToStaticNodeStream } from 'react-dom/server';

const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);

См. дополнительные примеры ниже.

Поток будет генерировать неинтерактивный HTML-вывод ваших React-компонентов.

Параметры

• reactNode: Узел React, который вы хотите отобразить в HTML. Например, JSX-элемент, такой как <Page />.

• необязательно options: Объект для рендеринга на сервере.

  • необязательно identifierPrefix: Строковый префикс, который React использует для идентификаторов, генерируемых useId. Полезно для предотвращения конфликтов при использовании нескольких корневых элементов на одной странице.

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

Поток Node.js Readable Stream, который выводит строку HTML. Полученный HTML не может быть гидратирован на клиенте.

Примечания

• renderToStaticNodeStream вывод не может быть гидратирован.

• Этот метод будет ожидать завершения всех границ ожидания перед возвратом любого вывода.

• Начиная с React 18, этот метод буферизует весь свой вывод, поэтому он фактически не предоставляет никаких преимуществ потоковой передачи.

• Возвращаемый поток является байтовым потоком, закодированным в utf-8. Если вам нужен поток в другом кодировании, обратите внимание на проект, такой как iconv-lite, который предоставляет потоки преобразования для транскодирования текста.

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

Отображение дерева React в виде статического HTML в поток Node.js Readable Stream

Вызовите renderToStaticNodeStream для получения потока Node.js Readable Stream, который можно передать в ответ сервера:

import { renderToStaticNodeStream } from 'react-dom/server';

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
  const stream = renderToStaticNodeStream(<Page />);
  stream.pipe(response);
});

Поток будет генерировать начальный неинтерактивный HTML-вывод ваших React-компонентов.