样式组件再水化成本高吗？

Question

我正在为 SSR 使用 nextjs。我正在使用这个技术在服务器端渲染样式。因此，当 DOM 被下载时，它不仅会获取 HTML，还会获取它需要在样式标签中绘制的所有 CSS。

一旦 HTML 被解析，它就会开始绘制 - 到目前为止很好，一旦 JS 被下载和解析，问题就开始了。特别是_app.js，styled-components删除现有样式，参考。

这如何影响性能？

我的共识：

• FCP和LCP将因重绘而延迟
• 由于浏览器忙于绘制和重绘，主线程被阻塞，可能无法处理用户交互，最终导致帧率下降。

路由更改时是否会发生同样的事情，因为它会拉取新的 JS 文件并编译和设置样式。这是样式组件的成本吗？

Answer 1

使用样式组件是有成本的，它非常适合静态生成的网站/应用程序，但服务器端渲染绝对不是它的强项。每次更新他们都会尝试将 SSR 性能提高几个百分点。这绝对是一个已知问题，Atlassian 等公司正在努力克服这个瓶颈。这是他们开发CompiledCSS-in-JS 的唯一原因，该 CSS-in-JS 致力于通过在编译时巧妙地访问代码来消除此问题。查看官方文档

还可以查看 Nathan 在LogRocket dev上撰写的关于编译及其起源的精彩文章