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

Question

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

Answer 1

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

TTFB：第一口时间 这是我们在搜索引擎优化方面真正关心的数字。它是我们的服务器将一些初始 HTML 放在一起并将响应发送回浏览器所需的时间。Google 和其他搜索引擎广泛使用它来评估我们页面的性能。这对于 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。但它正在路上。