用于改善TTFB（时间到第一个字节），“PageSpeed Insights”建议使用ReactDOMServer.renderToNodeStream()，但我不知道如何实现它。我阅读了rendertonodestream文章，但我不知道如何使用它。另外，我阅读了dev.to article，但在我的next.js应用程序中，没有webpack.config.js文件。如果我不能在Next.js中使用react renderToNodeStream，如何在Next.js中覆盖renderToNodeStream的影响？
1条答案
按热度按时间cngwdvgl1#
渲染到节点流（）这个函数返回一个可读的流。通过这个函数，我们仍然可以从浏览器获得请求，我们发出初始的api请求，然后我们构建一个react应用程序的小片段，这样我们就可以尝试渲染应用程序。但是我们只渲染了最小的部分，就像第一个组件，HTML的第一部分。当我们准备好HTML的第一个小片段时，我们把这个片段发送到浏览器。然后在服务器上我们把下一个HTML片段组合在一起。然后我们把这个小片段发送到浏览器，然后我们重复同样的过程很多次。所以通过这个功能，我们组装了我们的HTML文档的小片段，并把它们发送到用户的浏览器。
TTFB：第一次浏览的时间这是我们在搜索引擎优化时真正关心的数字。它是我们的服务器将HTML初始化并将响应发送回浏览器所花费的时间。Google和其他搜索引擎广泛使用它来评估我们的页面性能。这在持续时间上比renderToNodeStream要短得多（），因为我们正在构建一小段HTML并发送它。
如果你开始用nodeStream呈现你的应用程序，然后你沿着了一个需要重定向的组件，你就不能进行重定向了，因为一旦你开始把所有的内容从nodeStream传输到res对象中，就会立即启动响应并把它发送回用户，想象一下，用户遇到了一个需要授权的页面，但是它没有，必须使用状态代码更改重定向用户，但不能更改状态代码。
如果你想使用renderToNodeStream，你必须改变整个应用的架构。而不是next routing，你必须使用react-router dom。对于react服务器端，你必须使用StaticRouter，它将上下文属性传递给所有组件。它类似于getInitialProps的“上下文”对象。如果你打算使用react router dom，那么你必须寻找所有的组件，并决定在发送响应对象之前必须完成哪些异步操作。2你必须手动完成这些操作。
从技术上讲，您不能将react renderToNodeStream与next.js一起使用，而是必须配置webpack，构建自己的服务器，最有可能的是express服务器，并自行实现所有内容。
js之所以流行，是因为要完成服务器端的渲染需要做很多工作。然而，到目前为止，js还不支持
renderToNodeStream。但它正在开发中。Next.js 13渲染到节点流
renderToNodeStream现在可用于next.js 13-react 18https://nextjs.org/docs/advanced-features/react-18/streaming