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

Question

我正在为 SSR 使用 nextjs。我正在使用 this在服务器端呈现样式的技术。
因此，当 DOM 被下载时，它不仅会获取 HTML，还会获取它需要在样式标签中绘制的所有 CSS。
一旦 HTML 被解析，它就会开始绘制 - 到目前为止很好，一旦 JS 被下载和解析，问题就开始了。特别_app.js , styled-components删除现有样式，reference .
这如何影响性能？
我的共识:

FCP 和 LCP 将因重绘而延迟

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

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

Answer 1

使用 Styled Components 有其成本，它非常适合静态生成的网站/应用程序，但服务器端渲染绝对不是它的强项。每次更新他们都试图将他们在 SSR 中的表现提高几个百分点。这绝对是一个已知问题，像 Atlassian 这样的公司正在努力克服这个瓶颈。这是他们致力于 Compiled 的唯一原因一个 CSS-in-JS，专注于通过在编译时巧妙地访问您的代码来消除这个问题。 Check out the official Documentation
并在 LogRocket dev 上查看 Nathan 的这篇精彩文章关于编译和它的起源