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 節點。例如，類似 <Page /> 這樣的 JSX 元素。

• 選用 options：用於伺服器呈現的物件。

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

傳回

輸出 HTML 字串的 Node.js Readable Stream。產生的 HTML 無法在用戶端進行水化。

注意事項

• renderToStaticNodeStream 輸出無法水化。

• 此方法會等到所有 Suspense 邊界 完成後才會傳回任何輸出。

• 從 React 18 開始，此方法會緩衝其所有輸出，因此實際上並未提供任何串流的好處。

• 傳回的串流是使用 utf-8 編碼的位元組串流。如果您需要使用其他編碼的串流，請查看類似 iconv-lite 的專案，它提供轉碼文字的轉換串流。

用法

將 React 樹狀結構渲染為靜態 HTML 至 Node.js 可讀取串流

呼叫 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 輸出。