React SSR 而不是 'next.js' 的 'getInitialProps'

React SSR instead of 'getInitialProps' of 'next.js'

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

renderToNodeStrem() 此函数 returns 一个可读流。有了这个功能,我们仍然从浏览器收到请求,我们发出初始 api 请求,然后我们构建我们的 React 应用程序的一个小片段,以便我们尝试呈现应用程序。但是我们只渲染它的最低限度,就像第一个组件,HTML 的第一位。一旦我们准备好 HTML 的第一个小片段,我们就会将该片段发送到浏览器。然后在服务器上,我们将 HTML 的下一个小片段放在一起。然后我们将这个小片段发送到浏览器,然后我们多次重复相同的过程。因此,使用此功能,我们可以组装 html 文档的一小部分并将它们发送到用户的浏览器。

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

如果您开始使用 nodeStream 呈现您的应用程序,然后出现一个需要重定向的组件,您将无法进行重定向。因为一旦您开始将所有内容从 nodeStream 传输到 res 对象,就会立即启动响应并将其发送回用户。想象一下,用户带来了一个需要授权的页面,但事实并非如此,您必须通过更改状态代码来重定向用户,但您无法更改状态代码。

如果您想使用 renderToNodeStream,您必须更改应用程序的整个架构。而不是下一个路由,你必须使用 react-router dom。对于反应服务器端,您必须使用 StaticRouter 将上下文道具传递给所有组件。它类似于getInitialProps "context" 对象。如果你打算使用 react router dom,那么你必须查找所有组件并决定在发送响应对象之前必须完成哪些异步操作。您必须手动执行此操作。

从技术上讲,您不能将 react renderToNodeStream 与 next.js 一起使用。相反,您必须配置 webpack,构建自己的服务器,很可能是 express 服务器并自行实现所有内容。

Next.js之所以受欢迎,是因为要完成服务器端渲染的工作量很大。但是截至目前,next.js 不支持 renderToNodeStream。但它正在路上。