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 节点。例如，一个 JSX 节点，例如 <Page />。
• 可选 options: 用于服务器端渲染的对象。
  • 可选 identifierPrefix: React 用于由 useId 生成的 ID 的字符串前缀。在同一页面上使用多个根时，这有助于避免冲突。

返回值

一个 HTML 字符串。

注意事项

• renderToStaticMarkup 的输出不能进行 hydration（水合）。

• renderToStaticMarkup 对 Suspense 的支持有限。如果组件挂起，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输出。