3

have very simple sample app which build Create React App + Styled-Components to prove this issue. But I have real big application which I am facing this issue which I am going to explain it below.

I would like to pre-render this app with Rendertron for SEO/GoogleBots and etc. But the problem is when I build PRODUCTION version of React App which use Styled-Components . all the style will be missing on static version which Rendertron produced, but from other side if I try the same workflow with dev-server of app , everything looks fine .

So far I know there is different on PROD version and DEV version of my application when I render it with Rendertron . But I am not sure what cause this issue and how I can fix this issue .

I am looking for solution or idea which can help me to solve this issue .

Here is my sample code which I peppered for test .

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

Here is screen shot from different version of Rendered version by Rendertron base on PROD or DEV version of the same application .

enter image description here

enter image description here

enter image description here

AJ-
  • 1,027
  • 2
  • 13
  • 24
  • I use NPM Rendertron to test it locally : https://www.npmjs.com/package/rendertron – AJ- May 31 '19 at 12:27

2 Answers2

3

After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.

Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well.

Reference: https://www.styled-components.com/releases#v4.1.0

But the only part I am not sure , how to set disable this Speedy Mode in Create-React-App without Ejecting , Dose any body has any idea ?

AJ-
  • 1,027
  • 2
  • 13
  • 24
  • 1
    Use `REACT_APP_SC_DISABLE_SPEEDY` https://github.com/styled-components/styled-components/pull/2501/files#diff-05e79f504e22bb6a9d2e60529803b637 – Timo Oct 09 '20 at 07:53
0

You need to render your styles on the server side and inject those styles in your pre-rendered react app. Styled-components explains how to do that here: https://www.styled-components.com/docs/advanced#server-side-rendering

Also, I'd recommend using react-snap for pre-rendering since that is recommended by the Create React App docs. react-snap seems to be more of a React-specific solution that may be easier to implement, especially with styled-components.

Robert Cooper
  • 2,160
  • 1
  • 9
  • 22