使用 Rendertron 渲染时样式组件的产品版本问题

Posted 2023-03-16

【中文标题】使用 Rendertron 渲染时样式组件的产品版本问题

【英文标题】：Issue on Product version of Styled-Components when render with Rendertron

【发布时间】：2019-10-17 01:25:27

【问题描述】：

有一个非常简单的示例应用程序，它构建了 Create React App + Styled-Components 来证明这个问题。但是我有真正的大应用程序，我正面临这个问题，我将在下面解释它。

我想使用 Rendertron 为 SEO/GoogleBots 等预渲染这个应用程序。但问题是当我构建使用 Styled-Components 的 React 应用程序的生产版本时。 Rendertron 生成的静态版本中将缺少所有样式，但从另一方面来看，如果我尝试与 app 的 dev-server 相同的工作流程，一切看起来都很好。

到目前为止，我知道当我使用 Rendertron 渲染我的应用程序的 PROD 版本和 DEV 版本时，它是不同的。但我不确定是什么导致了这个问题以及如何解决这个问题。

我正在寻找可以帮助我解决此问题的解决方案或想法。

这是我为 test 编写的示例代码。

https://github.com/AJ-7885/test-styled-component-with-rendertron

这里是 Rendertron 基于同一应用程序的 PROD 或 DEV 版本的不同版本的渲染版本的屏幕截图。

enter image description here

【问题讨论】：

我使用 NPM Rendertron 在本地测试它：npmjs.com/package/rendertron

【参考方案1】：

找了好久，终于找到原因了。 Styled Components 库使用称为“快速模式”的东西在生产中注入样式。这使得样式绕过 DOM 并直接注入到 CSSOM 中，因此，出现在检查器中，但在 DOM 上完全不可见。

幸运的是，Styled Components 4.1.0 修复了这个问题！现在，您可以将名为 SC_DISABLE_SPEEDY 的全局变量设置为 true 以禁用 Speedy 模式并使样式也出现在 Production 中。

参考：https://www.styled-components.com/releases#v4.1.0

但我不确定的唯一部分是，如何在 Create-React-App 中设置禁用此快速模式而不弹出，任何人都有任何想法？

【讨论】：

使用REACT_APP_SC_DISABLE_SPEEDYgithub.com/styled-components/styled-components/pull/2501/…

【参考方案2】：

您需要在服务器端渲染您的样式并将这些样式注入您的预渲染 React 应用程序。 Styled-components 在这里解释了如何做到这一点：https://www.styled-components.com/docs/advanced#server-side-rendering

另外，我建议使用 react-snap 进行预渲染，因为 Create React App 文档建议这样做。 react-snap 似乎更像是一种特定于 React 的解决方案，可能更容易实现，尤其是使用样式组件。