参考 {/reference/}

renderToStaticMarkup(reactNode, options?) {/rendertostaticmarkup/}

在服务器上，调用 renderToStaticMarkup 将你的应用渲染为 HTML。

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

const html = renderToStaticMarkup(<Page />);

它将 React 组件转化为非交互式 HTML。

请参考下方更多示例。

参数 {/parameters/}

• reactNode：你想要渲染为 HTML 的 React 节点。例如，像 <Page /> 这样的 JSX 元素。
• 可选的 options：一个用于服务器渲染的对象。
  • 可选的 identifierPrefix：一个字符串前缀，React 使用 useId 生成的 ID 会使用此前缀，以避免在同一页面上使用多个根时发生冲突。

返回值 {/returns/}

一个 HTML 字符串。

注意事项 {/caveats/}

• renderToStaticMarkup 的输出无法进行二次渲染。

• renderToStaticMarkup 对 Suspense 的支持有限。如果某个组件触发了 Suspense，renderToStaticMarkup 会立即将其 fallback 作为 HTML 输出。

• renderToStaticMarkup 可以在浏览器中运行，但不建议在客户端代码中使用。如果你需要在浏览器中将组件渲染为 HTML，请将其渲染到 DOM 节点中以获取 HTML。

用法 {/usage/}

将非交互式 React 树渲染为 HTML 字符串 {/rendering-a-non-interactive-react-tree-as-html-to-a-string/}

调用 renderToStaticMarkup 将你的应用渲染为 HTML 字符串，并将其与服务器响应一起发送：

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

// 路由处理程序的语法取决于你的后端框架
app.use('/', (request, response) => {
  const html = renderToStaticMarkup(<Page />);
  response.send(html);
});

这将生成你的 React 组件的非交互式 HTML 输出。