尽管具有 defer 属性,但 NextJS 页面仅在执行脚本后在浏览器中显示页面

我正在努力解决这个问题。 NextJS 的优势之一,即 SSR,是将服务器中 React 已经呈现的 HTML 页面提供给浏览器。 CSS 也是内联的,因此也不应该有阻塞的 CSS 资产请求。

js 脚本(main.js,页面特定脚本)通过“defer”属性注入头部,这(如果我错了,请纠正我)应该意味着获取不会阻止 HTML 解析,并且执行脚本应该只在 HTML 解析完成后发生。

但是,当我制作了一个示例项目来测试这个(使用网络节流)时,页面仅在获取并执行 main.js 脚本后才会显示(正如您在 chrome devtools 中的性能记录中看到的那样)下图,我将页面背景设为红色,以便清楚地看到它何时首次显示)。

Performance screenshot

我错过了什么吗?我尝试从头开始测试一个简单的 React SSR 策略,当使用该脚本的 defer 属性时,在 JS 甚至完成加载之前,HTML 会正确显示,这就是为什么我无法弄清楚为什么在使用 NextJS 时会发生这种情况.使用 npm start 而不是 dev 构建和运行似乎具有相同的效果(在增加节流以考虑较小的有效负载之后)。

jyws8 回答:尽管具有 defer 属性,但 NextJS 页面仅在执行脚本后在浏览器中显示页面

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/7015.html

大家都在问