陷阱

renderToString 不支援串流或等待資料。 請參閱替代方案。

renderToString 將 React 樹狀結構渲染為 HTML 字串。

const html = renderToString(reactNode, options?)

參考

renderToString(reactNode, options?)

在伺服器上，呼叫 renderToString 將應用程式渲染為 HTML。

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

const html = renderToString(<App />);

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

請參閱以下更多範例。

參數

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

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

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

回傳值

一個 HTML 字串。

注意事項

  • renderToString 對 Suspense 的支援有限。如果一個元件暫停，renderToString 會立即將其後備內容以 HTML 形式發送。

  • renderToString 可在瀏覽器中運作，但不建議在客戶端程式碼中使用它。。

用法

將 React 樹狀結構渲染為 HTML 字串

呼叫 renderToString 將您的應用程式渲染為 HTML 字串，您可以將其與伺服器回應一起發送

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

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
  const html = renderToString(<App />);
  response.send(html);
});

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

陷阱

renderToString 不支援串流或等待資料。 請參閱替代方案。

替代方案

從伺服器上的 renderToString 遷移到串流渲染

renderToString 會立即返回一個字串，因此它不支援在載入時串流內容。

建議盡可能使用以下功能齊全的替代方案

如果您的伺服器環境不支援串流，您可以繼續使用 renderToString。

從伺服器上的 renderToString 遷移到靜態預渲染

renderToString 會立即返回一個字串，因此它不支援等待資料載入以產生靜態 HTML。

建議使用以下功能齊全的替代方案

如果您的靜態網站產生環境不支援串流，您可以繼續使用 renderToString。

從客戶端程式碼中移除 renderToString

有時，在客戶端會使用 renderToString 將某些組件轉換為 HTML。

// 🚩 Unnecessary: using renderToString on the client
import { renderToString } from 'react-dom/server';

const html = renderToString(<MyIcon />);
console.log(html); // For example, "<svg>...</svg>"

在客戶端導入 react-dom/server 會不必要地增加您的套件大小，應避免這種情況。如果您需要在瀏覽器中將某些組件渲染為 HTML，請使用 createRoot 並從 DOM 讀取 HTML。

import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';

const div = document.createElement('div');
const root = createRoot(div);
flushSync(() => {
  root.render(<MyIcon />);
});
console.log(div.innerHTML); // For example, "<svg>...</svg>"

需要呼叫 flushSync，以便在讀取其 innerHTML 屬性之前更新 DOM。

疑難排解

當組件暫停時，HTML 總是包含一個後備內容

renderToString 不完全支援 Suspense。

如果某些組件暫停（例如，因為它是用 lazy 定義的或擷取資料），renderToString 不會等待其內容解析。相反，renderToString 會找到它上方最近的 <Suspense> 邊界，並在 HTML 中渲染其 fallback 屬性。內容在客戶端程式碼載入之前不會出現。

要解決此問題，請使用其中一種 建議的串流解決方案。對於伺服器端渲染，它們可以在伺服器上解析內容時以區塊的形式串流內容，以便使用者在客戶端程式碼載入之前看到頁面逐漸填滿。對於靜態網站產生，它們可以等待所有內容解析後再產生靜態 HTML。

上一頁：renderToStaticMarkup下一頁：靜態 API