renderToStaticNodeStream

const stream = renderToStaticNodeStream(reactNode, options?)

• 參考
  • renderToStaticNodeStream(reactNode, options?)
• 用法
  • 將 React 樹作為靜態 HTML 渲染到 Node.js 可讀流

參考

renderToStaticNodeStream(reactNode, options?)

在伺服器上，呼叫 renderToStaticNodeStream 獲取 Node.js 可讀流。

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

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

請參閱下面的更多示例。

該流將生成 React 元件的非互動式 HTML 輸出。

引數

• reactNode：要渲染為 HTML 的 React 節點。例如，JSX 元素，如 <Page />。

• 可選 options：用於伺服器渲染的物件。

  • 可選 identifierPrefix：React 用於 useId 生成的 ID 的字串字首。在同一頁面上使用多個根目錄時，這有助於避免衝突。

返回值

輸出 HTML 字串的 Node.js 可讀流。生成的 HTML 無法在客戶端上進行水合。

注意事項

• renderToStaticNodeStream 輸出無法水合。

• 此方法將等待所有 Suspense 邊界 完成後再返回任何輸出。

• 從 React 18 開始，此方法會緩衝所有輸出，因此實際上不會提供任何流式傳輸優勢。

• 返回的流是採用 utf-8 編碼的位元組流。如果需要使用其他編碼的流，請檢視 iconv-lite 等專案，該專案提供了用於文字轉碼的轉換流。

用法

呼叫 renderToStaticNodeStream 以獲取 Node.js 可讀流，您可以將其透過管道傳輸到伺服器響應

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

該流將生成 React 元件的初始非互動式 HTML 輸出。