Reactgo: Flash Of Unstyled Content (FOUC) in Dev?

Created on 26 Jun 2016  路  8Comments  路  Source: reactGo/reactGo

First off, thanks so much for creating this starter kit, it looks awesome!

I booted it up in dev and noticed every page refresh shows about 500ms of unstyled HTML. Is anyone else experiencing this? Any tips to prevent this?

question
Source
picture kenjim83
👍2

All 8 comments

I also experience this but until now I dont take it serious because it only happens in dev mod.

I think it's because of inline styles that rendered on client. Server cannot handle css unless you use webpack-isomorphic-tools package. This package is used in react-redux-isomorphic-app by erikras.

ZeroCho picture ZeroCho on 26 Jun 2016

Yup, only happens in DEV as @ZeroCho explained. Even with a massive background-image, zero hiccups w/ rendering on Heroku. Really smooth w/ <ReactCSSTransitionGroup> too, was thinking of creating a PR for that, and also to add react-router-scroll (so pages don't load 1/2 way scrolled down).

This is more on the rookie side-of-things, but also beware of default State, sometimes you'll see a flicker of text and realize you just need to tweak your display logic a little bit to keep it clean until a fetch completes, or whatever..

_EDIT:_ There is a re-render that does take place initially on a refresh in PROD. Not entirely sure what causes this... I think it might have to do with <ReactCSSTransitionGroup transitionAppear={true}> - Somehow the payload finishes loading (Chrome DevTools 禄 Network tab), and then the transition-animation fires again (like it loaded a second time)... Can anyone else confirm?

_EDIT 2:_ Alas, this was happening because I was wrapping nested <ReactCSSTransitionGroup> blocks. Carry on...

jrodl3r picture jrodl3r on 27 Jun 2016

This is happening to me in production. Any reason why?

stanleycyang picture stanleycyang on 21 Oct 2016
👍1

This happens to me in production mode as well. When main.css only gets added to <head> after JS runs...

rclmenezes picture rclmenezes on 10 Dec 2016

Ah, I've identified my issue. If you run npm run start after running npm run dev, your files in public/assets will be still be in dev mode. This will cause FOUC.

Other webpack noobies like me might have similar problems in the future. Perhaps we can make webpack build in different folders within public depending on the stage? So webpack.config.prod.js will build in public/prod/assets and webpack.config.dev.js build in public/dev/assets? Alternatively, could we make npm run start build prior to actually starting?

rclmenezes picture rclmenezes on 12 Dec 2016
👍1

@rclmenezes This makes sense.
@choonkending This can be solved by adding npm prestart script

ZeroCho picture ZeroCho on 12 Dec 2016

Alternatively, could we make npm run start build prior to actually starting?

I like this idea! Sorry for the lack of clearer documentation - we're working towards a better + cleaner repository so hopefully a lot of the configuration will become simpler over time.

This can be solved by adding npm prestart script

Did not know this even existed lol. Sure I think we should add that in!

choonkending picture choonkending on 12 Dec 2016

We're cleaning up issues on the project and since this is an old issue we're closing it. Moreover, the code has changed quite a lot since this issue was opened.
If you still experience this or have an issue, please comment here or open a new one

slavab89 picture slavab89 on 17 Oct 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

choonkending picture choonkending  路  8Comments
gsccheng picture gsccheng  路  6Comments
psimyn picture psimyn  路  6Comments
choonkending picture choonkending  路  4Comments
jrodl3r picture jrodl3r  路  9Comments