reactjs - 反应 SSR 而不是 'next.js' 的 'getInitialProps'

Question

为了改进 TTFB（到第一个字节的时间），“PageSpeed Insights”建议使用ReactDOMServer.renderToNodeStream()，但我不知道如何实现它。我阅读了rendertonodestream文章，但我不知道如何使用它。另外，我阅读了dev.to 文章，但在我的 next.js 应用程序中，没有 webpack.config.js 文件。如果我不能renderToNodeStream与 Next.js 一起使用 react，如何覆盖renderToNodeStreamNext.js 中的效果？

标签： reactjswebpacknext.jsreact-domreact-dom-server

Answer 1

renderToNodeStrem() 这个函数返回一个可读流。使用这个函数，我们仍然可以从浏览器获取请求，我们发出初始的 api 请求，然后我们构建我们的 react 应用程序的一小部分，因此我们尝试渲染应用程序。但是我们只渲染它的最小部分，就像第一个组件，HTML 的第一个位。在我们准备好第一个 HTML 的那一刻，我们将该片段发送到浏览器。然后在服务器上，我们将 HTML 的下一个小片段放在一起。然后我们把那个小片段发送到浏览器，然后我们重复同样的过程很多次。因此，通过这个函数，我们组装了我们的 html 文档的一小部分，并将它们发送到用户的浏览器。

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

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

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

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

Next.js 很受欢迎，因为要完成服务器端渲染需要做很多工作。但是到目前为止，next.js 不支持 renderToNodeStream。但它正在路上。