我正在努力解决这个问题。 NextJS 的优势之一,即 SSR,是将服务器中 React 已经呈现的 HTML 页面提供给浏览器。 CSS 也是内联的,因此也不应该有阻塞的 CSS 资产请求。
js 脚本(main.js,页面特定脚本)通过“defer”属性注入头部,这(如果我错了,请纠正我)应该意味着获取不会阻止 HTML 解析,并且执行脚本应该只在 HTML 解析完成后发生。
但是,当我制作了一个示例项目来测试这个(使用网络节流)时,页面仅在获取并执行 main.js 脚本后才会显示(正如您在 chrome devtools 中的性能记录中看到的那样)下图,我将页面背景设为红色,以便清楚地看到它何时首次显示)。
我错过了什么吗?我尝试从头开始测试一个简单的 React SSR 策略,当使用该脚本的 defer 属性时,在 JS 甚至完成加载之前,HTML 会正确显示,这就是为什么我无法弄清楚为什么在使用 NextJS 时会发生这种情况.使用 npm start 而不是 dev 构建和运行似乎具有相同的效果(在增加节流以考虑较小的有效负载之后)。