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

问题描述 投票：0回答：1

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

代码链接 -

  1. GITHUB：https://github.com/ranjanrnj44/react-ssr/tree/master
  2. CODESANDBX：https://codesandbox.io/s/react-ssr-9x9ohn

注意：

  1. 请下载代码并在本地机器上运行。我已经提供了 package.json 文件来安装所有依赖项
  2. 目前，在服务器端发生任何代码更改时，我都会生成一个构建文件（请查看脚本第 25 行和第 28 行下的 package.json）
  3. 对 server.js 进行更改后，请尝试运行 npm run bild，然后运行 npm run 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. 我尝试发送硬编码的 split 方法并注入响应（不幸的是我得到了 [object][Object] 错误）。
  2. 还尝试通过 response 来提供整个原始内容到stream.pipe()。没用。

请为我提供匹配服务器生成的 HTML 和客户端 HTML 的解决方案，以便我可以完善 UI。

javascript reactjs node.js react-ssr
1个回答
0
投票

问题是，当你使用 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>
  );
};
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.