我喜欢使用react SSR代替'next.js'的'getInitialProps',但我不知道如何使用'ReactDOMServer.renderToNodeStream'

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

为了改善TTFB(至第一个字节的时间),'PageSpeed Insights'建议使用ReactDOMServer.renderToNodeStream(),但我不知道如何实现。我读了rendertonodestream文章但是我不知道怎么用另外,我阅读了dev.to article,但在我的next.js应用程序中,没有webpack.config.js文件。如果我无法在Next.js中使用react renderToNodeStream,如何覆盖Next.js中的renderToNodeStream效果?

reactjs webpack next.js react-dom react-dom-server
1个回答
1
投票

renderToNodeStrem()此函数返回可读流。使用此功能,我们仍然从浏览器获取请求,发出初始api请求,然后构建React应用程序的一小段代码,以便尝试呈现应用程序。但是我们只是像HTML的第一个组件那样渲染它的最小部分。当我们准备好HTML的第一个小片段时,我们便将该片段发送到浏览器。然后,在服务器上,我们整理了HTML的下一个小片段。然后,我们使用该小片段,将其发送到浏览器,然后重复相同的过程多次。因此,借助此功能,我们可以组装html文档的小片段,并将其发送到用户的浏览器。

TTFB:第一次咬牙的时间这是我们在搜索引擎优化方面真正关心的数字。这是我们的服务器将HTML的一些初始位置放在一起并将响应发送回浏览器所花费的时间。谷歌和其他搜索引擎广泛使用它来评估我们页面的性能。 renderToNodeStream()的持续时间非常短,因为我们正在构建一小段HTML并将其发送。

如果您开始使用nodeStream呈现应用程序,然后遇到需要重定向的组件,则无法进行重定向。因为一旦开始将所有内容从nodeStream管道传递到res对象,则立即启动响应并将其发送回用户。想象一下,用户伴随着需要授权的页面,但是没有经过授权,您必须使用状态码更改来重定向用户,但是您不能更改状态码。

[如果要使用renderToNodeStream,则必须更改应用程序的整个体系结构。而不是下一个路由,您必须使用react-router dom。对于反应服务器端,您必须使用StaticRouter,它将上下文属性传递给所有组件。它类似于getInitialProps的“上下文”对象。如果要使用react router dom,则必须查找所有组件,并确定在发送响应对象之前必须完成哪些异步操作。您必须手动执行此操作。

从技术上讲,您不能对next.js使用react renderToNodeStream。相反,您必须配置Webpack,构建自己的服务器,最有可能的Express服务器并自行实现所有功能。

Next.js之所以流行是因为有很多工作可以完成服务器端渲染。但是,到目前为止,next.js不支持renderToNodeStream。但它正在路上。

© www.soinside.com 2019 - 2024. All rights reserved.