CODEWITHSUNDEEP
reactjswebpackstyled-components
publicJorn
publicJorn

Reputation: 2494

styled-components: worried about FOUC

I've been into the styled-components package and I think the developer-friendliness is awesome!

However, I'm worried about 1 thing: Flash Of Unstyled Content.

Since in production, as well as in development, the styles get packaged with the javascript chunks; When a component is loaded, the styles are generated and appended (at the bottom of) the <head>.
This is inherently the same as how CSS Modules work.

Referring to a post of surviveJS I learned to use ExtractTextPlugin to create separate stylesheets (css files) during the production build step.

However, in styled-components CSS is just JS, so we can't use that technique (at least, I couldn't get it to work).

So before I start building my next project with styled-components, can someone take my worries away?

Upvotes: 2

Views: 2232

Answers (2)

Joe Seifi
Joe Seifi

Reputation: 1705

SSR is coming in v2 which you can start using today. Here is an example of how to do it.

https://github.com/styled-components/styled-components/blob/v2/example/ssr.js

Upvotes: 0

Ross Khanas
Ross Khanas

Reputation: 1501

If you don't want to have your UI flash - you need to send your styles from the server instead of rendering using JS. Fortunately, styled-componnets library supports server rendering API, even though it is not public at this moment.

You can pre-render your styles on a server, and inject into your initial html you send from the server, so it will contain CSS and UI won't flash.

As I mentioned, API is not public yet, but you can use it. There are multiple discussions about this on a Github, please, check: this, this and more issues. I guess public API should be ready in a v2 release.

So basically there are should be no issues with using styled-components to prevent flashing.

Upvotes: 1

Related Questions