React18 中的 SSR 使用 renderToPipableStream - 服务器生成的 HTML 和客户端 HTML 文件 UI 不匹配答案

【问题标题】：SSR in React18 using renderToPipableStream - Server Generated HTML and Client Side HTML file UI are not matchingReact18 中的 SSR 使用 renderToPipableStream - 服务器生成的 HTML 和客户端 HTML 文件 UI 不匹配
【发布时间】：2022-12-06 18:40:53
【问题描述】：

我试图使用 Node、Express 和 React18 功能进行服务器端渲染。我使用的方法是renderToPipeableStream而不是 renderToString。

代码链接 -

GITHUB : https://github.com/ranjanrnj44/react-ssr/tree/master
CODESANDBX：https://codesandbox.io/s/react-ssr-9x9ohn
笔记：
1. 请下载代码并从本地机器运行。我提供了 package.json 文件来安装所有依赖项
2. 现在，对于服务器端的任何代码更改，我正在生成一个构建文件（请查看脚本第 25 行和第 28 行下的 package.json）
3. server.js 更改后请尝试运行npm 运行构建其次是npm 运行 ssr（现在您会注意到应用程序正在 localhost:3001/one 上运行）
  问题：
  - 我收到这样的消息Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配.
  - 服务器生成的 HTML 文件没有包含（html、head、meta、body 标签）的整个部分。
  - 在 renderToString 方法中我们可以使用 replace 方法来注入数据但在这里，我正在流式传输 html（stream- nodejs 部分）
  - 我无法在根文件之间注入数据块（即理想情况下<div id="root"> <!-received chunk data should inject here-></div>）
  我试过什么：
  1. 我尝试发送硬编码拆分方法并注入响应（不幸的是我收到 [object][Object] 错误）。
  2. 还尝试使用回复到 stream.pipe()。它不起作用。
    请为我提供匹配服务器生成的 HTML 和客户端 HTML 的解决方案，以便我可以滋润 UI。

【问题讨论】：

当您深入浏览器中的错误堆栈时，您可以找到原因。第一个问题是 const UserListFetch = lazy(() => import("./components/UserListFetch")); 的导入您的示例中只存在一个 UserFetch 文件。第二个问题是，在 UserListSSR 中，未填充 fetchedData 并且您映射了未定义的对象。我希望你能继续下去。总而言之，水合作用不匹配似乎是一个必然的错误。 PS：你调用下载代码到本地系统好像有点像垃圾邮件；）
谢谢 Marcel，我试过了，还使用了连接方法来绑定结构。它奏效了，不幸的是水合作用没有发生。

标签： javascript node.js reactjs react-18 react-ssr

【解决方案1】：

问题是，当您使用 React Streaming 时，没有真正的方法可以在其中注入一些东西。

解决方案是像 Next.js 一样提供您自己的文档组件。

const Document = ({ title, js, css, children }) => {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <title>{title}</title>
        {js.map((src, i) => (
          <script key={i} src={src} defer />
        ))}
        {css.map((src, i) => (
          <link key={i} href={src} rel="stylesheet" />
        ))}
      </head>
      <body>
        <div id="root">{children}</div>
      </body>
    </html>
  );
};

【讨论】：