renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

• 參考
  • renderToStaticMarkup(reactNode, options?)
• 用法
  • 將非互動式的 React 樹狀結構渲染成 HTML 字串

參考

renderToStaticMarkup(reactNode, options?)

在伺服器上，呼叫 renderToStaticMarkup 將您的應用程式渲染成 HTML。

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

const html = renderToStaticMarkup(<Page />);

它會產生 React 元件的非互動式 HTML 輸出。

請參閱下面的更多範例。

參數

• reactNode：您想要渲染成 HTML 的 React 節點。例如，像 <Page /> 這樣的 JSX 節點。
• 選用 options：伺服器渲染的物件。
  • 選用 identifierPrefix：React 用於 useId 產生的 ID 的字串前綴。有助於避免在同一個頁面上使用多個根目錄時發生衝突。

回傳值

一個 HTML 字串。

注意事項

• renderToStaticMarkup 的輸出無法進行 hydration。

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

• renderToStaticMarkup 可在瀏覽器中運作，但不建議在客戶端程式碼中使用它。如果您需要在瀏覽器中將元件渲染成 HTML，請透過將其渲染到 DOM 節點來取得 HTML。

用法

將非互動式的 React 樹狀結構渲染成 HTML 字串

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

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

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

這將產生 React 組件的初始非互動式 HTML 輸出。