陷阱

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 来 *hydrate* 该服务器生成的 HTML 并使其具有交互性。

    陷阱

    renderToString 不支持流式传输或等待数据。 查看替代方案。

    替代方案

    从服务器上的 renderToString 迁移到流式方法

    renderToString 立即返回一个字符串，因此它不支持流式传输或等待数据。

    如果可能，我们建议使用以下功能齐全的替代方案

    如果您的服务器环境不支持流，则可以继续使用 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 属性。在客户端代码加载之前，内容不会出现。

    要解决此问题，请使用 推荐的流式解决方案 之一。它们可以在服务器上解析内容时以块的形式流式传输内容，以便用户在客户端代码加载之前看到页面逐渐填充。

上一篇renderToStaticNodeStream