renderToNodeStream
renderToNodeStream
отображает дерево React в Node.js Readable Stream.
const stream = renderToNodeStream(reactNode, options?)
Справка
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 и сделать его интерактивным.