styled-components：担心 FOUC答案

【问题标题】：styled-components: worried about FOUCstyled-components：担心 FOUC
【发布时间】：2017-08-02 09:12:02
【问题描述】：

我已经加入了styled-components 包，我认为它对开发者的友好性很棒！

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

在生产和开发中，样式都与 javascript 块打包在一起；加载组件时，会生成样式并将其附加（在底部）<head>。
这本质上与 CSS 模块的工作方式相同。

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：