renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

• 参考
  • renderToStaticMarkup(reactNode, options?)
• 用法
  • 将非交互式 React 树作为 HTML 渲染为字符串

参考

¥Reference

renderToStaticMarkup(reactNode, options?)

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

¥On the server, call renderToStaticMarkup to render your app to HTML.

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

const html = renderToStaticMarkup(<Page />);

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

¥It will produce non-interactive HTML output of your React components.

请参阅下面的更多示例。

¥See more examples below.

参数

¥Parameters

• reactNode：要渲染为 HTML 的 React 节点。例如，像 <Page /> 这样的 JSX 节点。

  ¥reactNode: A React node you want to render to HTML. For example, a JSX node like <Page />.

• 可选 options：用于服务器渲染的对象。

  ¥optional options: An object for server render.

  • 可选 identifierPrefix：React 用于 useId。 生成的 ID 的字符串前缀 有助于避免在同一页面上使用多个根时发生冲突。

    ¥optional identifierPrefix: A string prefix React uses for IDs generated by useId. Useful to avoid conflicts when using multiple roots on the same page.

返回

¥Returns

一个 HTML 字符串。

¥An HTML string.

注意事项

¥Caveats

• renderToStaticMarkup 输出不能水合。

  ¥renderToStaticMarkup output cannot be hydrated.

• renderToStaticMarkup 对 Suspense 的支持有限。如果组件挂起，renderToStaticMarkup 会立即以 HTML 格式发送其回退。

  ¥renderToStaticMarkup has limited Suspense support. If a component suspends, renderToStaticMarkup immediately sends its fallback as HTML.

• renderToStaticMarkup 在浏览器中有效，但不建议在客户端代码中使用它。如果你需要在浏览器中将组件渲染为 HTML，通过将 HTML 渲染到 DOM 节点中来获取 HTML。

  ¥renderToStaticMarkup works in the browser, but using it in the client code is not recommended. If you need to render a component to HTML in the browser, get the HTML by rendering it into a DOM node.

用法

¥Usage

将非交互式 React 树作为 HTML 渲染为字符串

¥Rendering a non-interactive React tree as HTML to a string

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

¥Call renderToStaticMarkup to render your app to an HTML string which you can send with your server response:

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 输出。

¥This will produce the initial non-interactive HTML output of your React components.