renderToNodeStream

const stream = renderToNodeStream(reactNode, options?)

• Справка
  • renderToNodeStream(reactNode, options?)
• Применение
  • Рендеринг дерева React как HTML в Node.js Readable Stream

Справка

renderToNodeStream(reactNode, options?)

На сервере вызовите renderToNodeStream, чтобы получить Node.js Readable Stream, который вы можете передать в ответ.

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

const stream = renderToNodeStream(<App />);
stream.pipe(response);

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

Смотрите ещё примеры ниже.

Параметры

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

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

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

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

Node.js Readable Stream, который выводит строку HTML.

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

• Этот метод будет ждать Suspense boundaries, прежде чем возвращать какие-либо данные.

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

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

Применение

Рендеринг дерева React как HTML в Node.js Readable Stream

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

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

// Синтаксис обработчика маршрута зависит от вашей внутренней структуры
app.use('/', (request, response) => {
  const stream = renderToNodeStream(<App />);
  stream.pipe(response);
});

Поток произведёт начальный неинтерактивный HTML—вывод ваших компонентов React. На клиенте вам нужно будет вызвать hydrateRoot, чтобы гидратировать этот сгенерированный сервером HTML и сделать его интерактивным.