【问题标题】:React SSR instead of 'getInitialProps' of 'next.js'反应 SSR 而不是 'next.js' 的 'getInitialProps'
【发布时间】:2020-08-01 14:25:19
【问题描述】:

为了改进 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】:

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

    TTFB:第一口的时间 这是我们在搜索引擎优化方面真正关心的数字。这是我们的服务器将一些初始 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。但它正在路上。

    【讨论】:

    • 如何在 Next.js 应用中覆盖 'renderToNodeStrem' 的效果?
    • 到目前为止,您还不能。他们对此感到兴奋,很多人一直在要求它
    • 在这个平台,感谢您喜欢并接受答案:)
    猜你喜欢
    • 2019-10-12
    • 2019-10-04
    • 2019-03-01
    • 2021-12-02
    • 2020-11-28
    • 2019-03-31
    • 2021-07-05
    • 2021-03-14
    • 2020-05-31
    相关资源
    最近更新 更多