reactjs - styled-components：担心 FOUC

Question

我一直在使用styled-components包，我认为对开发人员的友好性很棒！

但是，我担心一件事：Flash Of Unstyled Content。

由于在生产和开发中，样式与 javascript 块一起打包；加载组件时，会生成样式并附加到<head>.
这本质上与 CSS 模块的工作方式相同。

参考survivalJS 的一篇文章，我学会了在生产构建步骤中使用ExtractTextPlugin创建单独的样式表（css 文件）。

然而，在styled-componentsCSS 中只是 JS，所以我们不能使用这种技术（至少，我无法让它工作）。

因此，在我开始使用 styled-components 构建下一个项目之前，有人可以打消我的顾虑吗？

score 1 · Accepted Answer

如果你不想让你的 UI 闪烁 - 你需要从服务器发送你的样式而不是使用 JS 渲染。幸运的是，styled-componnets库支持服务器渲染 API，即使它目前不公开。

您可以在服务器上预渲染您的样式，并注入您从服务器发送的初始 html，这样它将包含 CSS 并且 UI 不会闪烁。

正如我所提到的，API 尚未公开，但您可以使用它。Github 上有很多关于此的讨论，请检查：this、this和更多问题。我猜公共 API 应该在 v2 版本中准备就绪。

styled-components所以基本上使用防止闪烁应该没有问题。

score 0 · Accepted Answer

SSR 即将推出 v2，您可以立即开始使用。这是一个如何做到这一点的例子。

2 回答 2