renderToNodeStream

const stream = renderToNodeStream(reactNode, options?)

• 參考文件
  • renderToNodeStream(reactNode, options?)
• 用法
  • 將 React 樹狀結構渲染為 HTML 到 Node.js 可讀取串流

參考

renderToNodeStream(reactNode, options?)

在伺服器上，呼叫 renderToNodeStream 以取得 Node.js 可讀取串流，您可以將其傳輸至回應中。

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

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

在客戶端上，呼叫 hydrateRoot 讓伺服器產生的 HTML 具有互動性。

請參閱下面的更多範例。

參數

• reactNode：您想要渲染成 HTML 的 React 節點。例如，像 <App /> 這樣的 JSX 元素。

• 選用 options：伺服器端渲染的選項物件。

  • 選用 identifierPrefix：React 用於 useId 產生的 ID 的字串前綴。用於避免在同一頁面上使用多個根節點時發生衝突。必須與傳遞給 hydrateRoot 的前綴相同。

回傳值

一個輸出 HTML 字串的 Node.js 可讀取串流。

注意事項

• 這個方法會等待所有 Suspense 邊界 完成後才會返回任何輸出。

• 從 React 18 開始，這個方法會緩衝所有輸出，因此實際上沒有提供任何串流的好處。這就是為什麼建議您改用 renderToPipeableStream。

• 返回的串流是以 utf-8 編碼的位元組串流。如果您需要其他編碼的串流，可以參考 iconv-lite 這樣的專案，它提供了用於轉碼文字的轉換串流。

用法

將 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);
});

該串流將產生 React 元件的初始非互動式 HTML 輸出。在客戶端上，您需要呼叫 hydrateRoot 來將伺服器產生的 HTML _注水_ 並使其具有互動性。