样式化组件补液成本高吗？答案

【问题标题】：Is styled-components rehydration costly?样式化组件补液成本高吗？
【发布时间】：2021-08-25 05:35:33
【问题描述】：

我正在使用 nextjs 进行 SSR。我正在使用this 技术在服务器端呈现样式。因此，当 DOM 被下载时，它不仅会获取 HTML，还会获取在样式标签中绘制所需的所有 CSS。

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

这对性能有何影响？

我的共识：

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

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

【问题讨论】：

标签： reactjs performance next.js styled-components

【解决方案1】：

使用样式化组件是有代价的，它非常适合静态生成的网站/应用程序，但服务器端渲染绝对不是它的强项。每次更新他们都试图将他们在 SSR 中的性能提高几个百分点。这绝对是一个已知问题，Atlassian 等公司正在努力克服这一瓶颈。这是他们致力于 Compiled 一个 CSS-in-JS 的唯一原因，它专注于通过在编译时智能地访问你的代码来消除这个问题。 Check out the official Documentation

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

【讨论】：

两个链接都一样，你能再检查一下吗？
现在检查它的更新，感谢您指出。