renderToNodeStream

Довідник

renderToNodeStream(reactNode)

На сервері викличте renderToNodeStream, щоб отримати читабельний потік Node.js , який ви можете передати у відповідь.

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

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

На клієнтській стороні викликайте hydrateRoot, щоб зробити згенерований сервером HTML інтерактивним.

Дивіться більше прикладів нижче.

Параметри

• reactNode: Вузол React, який ви хочете відрендерити в HTML. Наприклад, JSX-елемент типу <App />.

.

• опція опції: Об'єкт для серверного рендерингу.

  • optional identifierPrefix: Рядковий префікс, який React використовує для ідентифікаторів, згенерованих useId. Корисно для уникнення конфліктів при використанні декількох коренів на одній сторінці. Має бути той самий префікс, що був переданий до hydrateRoot.

Повернення

Потік читання Node.js, який виводить HTML-рядок.

Застереження

• Цей метод чекатиме на завершення всіх Меж підвішеного стану, перш ніж повертати будь-яке виведення.

• Починаючи з React 18, цей метод буферизує все своє виведення, тому він фактично не надає жодних переваг для потокової обробки. Ось чому рекомендується перейти на renderToPipeableStream замість нього.

• Повернутий потік - це байтовий потік у кодуванні utf-8. Якщо вам потрібен потік в іншому кодуванні, зверніть увагу на проект iconv-lite, який надає потоки transform для перекодування тексту.

Використання

Відображення React-дерева у вигляді HTML до потоку читання Node.js

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

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 і зробити його інтерактивним.