reactjs - 带有样式组件的 SSR - 当 app.js 加载网站时缺少一些样式

Question

我使用 styled-components 实现了 SSR。

当使用 SSR 加载页面时，一切看起来都很好。但是，当 app.js 与 SSR 版本一起加载和混合时，页面会丢失一些样式，并且很少有元素会损坏。

更重要的是 - 当我使用 npm start 在本地打开应用程序或基本上只是删除我的 SSR 时，一切正常并且样式被正确应用。

重要:当我进入页面并且 app.js 加载和样式被破坏时，如果我更改路线 - 新路线正确应用样式和问题离开了。

• SSR 加载 - 样式很好
• 几秒钟后 app.js 加载(水合过程)- 样式被破坏

---

在本地运行应用 - 样式没问题

在没有 SSR 的情况下运行应用 - 样式没有问题

---

所以简而言之 - 如果我使用 SSR，我会丢失一些样式，SSR 本身会返回正确的样式，但在与 app.js 混合后，很少有组件被破坏。

我打赌这可能是 styled-components 的问题。 SSR 工作正常，其他一切都很好，除了一个缺少样式的组件。

---

我知道这是关于我的案例的相当不完整的信息，但为了显示可能导致此错误的每个部分，我应该发布整个项目，但是也许你遇到过类似的案例并且你会以某种方式帮助我。谢谢。

编辑:我的babel-styled-component-plugin 配置:

['babel-plugin-styled-components', {
    ssr: true,
    displayName: false,
    fileName: false,
    transpileTemplateLiterals: false,
    minify: false,
}],

Answer 1

两件事...

1) 确保您使用的是 babel plugin ;没有它，就不能保证生成的类名在服务器和客户端之间是相同的。

2) 在您的捆绑设置中，确保您对客户端和服务器使用的 babel 配置基本相同。如果存在重大差异并且文件以非常不同的方式转换，则可能会影响生成的类名输出。