我试图使用 Node、Express 和 React18 功能进行服务器端渲染。 我使用的方法是使用 renderToPipeableStream 而不是使用 renderToString。
代码链接 -
注意:
问题:
<div id="root"> <!-received chunk data should inject here-></div>
)我尝试过的:
请为我提供匹配服务器生成的 HTML 和客户端 HTML 的解决方案,以便我可以完善 UI。
问题是,当你使用 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>
);
};