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

Question

I was trying to make Server Side Rendering using Node,Express and React18 feature.我试图使用 Node、Express 和 React18 功能进行服务器端渲染。 The method I used was with renderToPipeableStream and not with renderToString.我使用的方法是使用renderToPipeableStream而不是使用 renderToString。

Link for the CODE -代码链接 -

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

NOTE:笔记：

Please Download the code and run from the local machine.请下载代码并从本地机器运行。 I have provided package.json file to install all the dependencies我提供了 package.json 文件来安装所有依赖项
for now, on any code changes in server side I'm generating a build file (please look package.json under scripts line 25 and 28)现在，对于服务器端的任何代码更改，我都会生成一个构建文件（请查看脚本第 25 行和第 28 行下的 package.json）
after changes on server.js please try running npm run bild followed by npm run ssr (now you will notice app is running on localhost:3001/one)在对 server.js 进行更改后，请尝试运行npm 运行 bild ，然后运行npm 运行 ssr （现在您会注意到应用程序正在 localhost:3001/one 上运行）

ISSUE:问题：

I get message like Hydration failed because the initial UI does not match what was rendered on the server .我收到类似Hydration failed 的消息，因为初始 UI 与服务器上呈现的内容不匹配。
The server generated HTML file is not with whole part that includes (html,head,meta,body tags).服务器生成的 HTML 文件没有包含（html、head、meta、body 标签）的整个部分。
In renderToString method we can use replace method to inject the data but here, I'm streaming html(stream- nodejs part)在 renderToString 方法中，我们可以使用 replace 方法来注入数据，但在这里，我正在流式传输 html（stream- nodejs 部分）
I couldn't inject the chunk of data between the root file (ie ideally <div id="root"> <!-received chunk data should inject here-></div> )我无法在根文件之间注入数据块（即理想情况下<div id="root"> <!-received chunk data should inject here-></div> ）

WHAT I TRIED:我试过什么：

I tried sending hard-coded split method and inject the response (Unfortunately I got [object][Object] error).我尝试发送硬编码的拆分方法并注入响应（不幸的是我收到 [object][Object] 错误）。
Also tried serving whole raw content with response to stream.pipe().还尝试通过响应stream.pipe() 提供完整的原始内容。 It doesn't work.它不起作用。

Please provide me the solution to match the Server generated HTML and Client side HTML so that I can hydrate the UI.请为我提供匹配服务器生成的 HTML 和客户端 HTML 的解决方案，以便我可以滋润 UI。

Answer 1

The thing is, when you're working with react streaming, there's no real way to inject something in it.问题是，当您使用 React Streaming 时，没有真正的方法可以在其中注入一些东西。

The solution would be to provide your own Document component like in Next.js.解决方案是提供您自己的文档组件，如 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>
  );
};

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

问题描述

1 个解决方案

解决方案1
0 2022-12-06 08:40:24

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

问题描述

1 个解决方案

解决方案1 0 2022-12-06 08:40:24

解决方案1
0 2022-12-06 08:40:24