为什么我们需要在安装 styled-components 后安装 gatsby-plugin-styled-components答案

【问题标题】：why do we need to install gatsby-plugin-styled-components after installed styled-components为什么我们需要在安装 styled-components 后安装 gatsby-plugin-styled-components
【发布时间】：2018-10-13 19:42:12
【问题描述】：

我正在学习 Gatsbyjs，看到了一件奇怪的事情。

例如，如果我想使用 styled-components，我需要安装： gatsby-plugin-styled-components 和样式化组件

然而，我尝试只安装 styled-components 并且它可以工作。

我的问题是：

在这种情况下为什么需要安装相关的 Gatsbyjs 插件？

【问题讨论】：

许多反应包在没有 gatsby-plugins 的情况下在 gatsby 中“工作”，但并非全部以最佳方式。 Gatsby 插件主要负责 gatsby 开发/构建环境配置（例如 gatsby/webpack/babel 配置）。样式化的组件 gatsby 插件通过修改 gatsby-ssr.js 和 gatsby-node.js source 来做到这一点。
谢谢@AndreasT 能否请您分享一些详细文档的链接？
另外，由于 Gatsbyjs 是一个静态网站生成器，为什么我需要对 styled-components 库的 ssr 支持？？？
不幸的是，没有关于 styled-components gatsby-plugin（和许多其他插件）的详细文档，但您可以查看我链接的 github repo(source)。 Gatsby 使用 SSR 将 react 应用程序（JS）“转换”为静态页面（HTML）。这发生在gatsby build 命令上。这种情况下的“服务器”位于您的/public 目录中。 Gatsby SSR 与典型的 SSR 并不完全相同，但它的工作方式相同 - 开发（反应）JS，提供 HTML - 并且是它的核心功能之一。
酷，谢谢。现在开始有意义了。

标签： reactjs styled-components gatsby

【解决方案1】：

答案是只使用styled-components 将导致styled-components 被应用到客户端JavaScript 运行时。所以有时候，当你加载你的 Gatsby 网站时，你不会立即在你的网站上看到你用styled-components-components 编写的样式，但它们会在一些延迟后应用，这可能会导致一些奇怪的视觉效果（元素跳跃，或改变颜色/大小/其他属性）。

gatsby-plugin-styled-components 确保样式将直接从 HTML 传递给客户端。

【讨论】：

为了清楚起见，为了让 Gatsby 知道要生成哪些静态资产（以及将在页面加载时显示什么），需要有一些东西告诉它如何处理 styled-components 以及要显示什么因为他们。否则，如前所述，这会在页面加载后发生。
所以基本上我们ssr需要它？