styled-components：担心 FOUC

styled-components: worried about FOUC

我已经使用了 styled-components 软件包，我认为它对开发人员的友好性非常好！

但是，我担心一件事：Flash 的无样式内容。

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

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

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

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

如果您不想 UI 闪光灯 - 您需要从服务器发送样式而不是使用 JS 渲染。幸运的是，styled-componnets 库支持服务器渲染 API，尽管目前还没有 public。

您可以在服务器上预呈现您的样式，并注入您从服务器发送的初始 html，因此它将包含 CSS 而 UI 不会快闪.

正如我提到的，API 还不是 public，但您可以使用它。 Github 上对此有多个讨论，请查看：this, this and more issues。我想 public API 应该会在 v2 版本中准备好。

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

SSR 即将推出 v2，您今天就可以开始使用了。这是一个如何操作的示例。