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 использует для ID, сгенерированных с помощью useId. Полезно для предотвращения конфликтов при использовании нескольких корней на одной странице. Должен совпадать с префиксом, переданным в hydrateRoot.

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

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

Примечания

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

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

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

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

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

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

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

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

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