renderToStaticNodeStream¶

renderToStaticNodeStream рендерит неинтерактивное дерево React в Node.js Readable Stream.

1

const stream = renderToStaticNodeStream(reactNode);

Описание¶

renderToStaticNodeStream(reactNode)¶

На сервере вызовите renderToStaticNodeStream, чтобы получить Node.js Readable Stream.

1
2
3
4

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

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

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

Параметры

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

Возвращает

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

Предостережения

• Вывод renderToStaticNodeStream не может быть гидратирован.
• Этот метод будет ждать завершения всех Suspense boundaries, прежде чем вернуть любой вывод.
• Начиная с React 18, этот метод буферизирует весь свой вывод, поэтому он не предоставляет никаких преимуществ потоковой передачи.
• Возвращаемый поток - это поток байтов, закодированный в utf-8. Если вам нужен поток в другой кодировке, обратите внимание на проект типа iconv-lite, который предоставляет потоки преобразования для перекодировки текста.

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

Рендеринг дерева React как статического HTML в поток Node.js для чтения¶

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

1
2
3
4
5
6
7

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.

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

Комментарии