FOUC on SSR

[ghost]

I'm submitting a ...

• bug report
• feature request

Feature Request:

Bug Report:

Edit: Seems some imported libraries will cause FOUC of auth components.

[Metnew]

in development or in production with SSR?

[ghost]

Heh, SSR. I've found it on shift refresh. Only need to import big libraries and eventually it'll happen. I get the screen below for about 1.4 seconds of loading on shift refresh and first time loading. Sorry for the bad quality, chrome frame inspector. The login component doesn't show up (error in my routes), just the screen below.

SSR. Got it to happen on clone. Importing big packages (just need import statement). Using the performance tool in chrome and screen frames.

[ghost]

At entry point of 2.3MB (of course it's gzipd'), on normal page refresh I'll get about 200MS of the above :( It's the FOUC of the login component (I had it disabled).

[Metnew]

@TheDolo , I found error in SSR, but can't push fix for it right now, would be fixed soon (approximately: one day)

[Metnew]

@TheDolo SSR was rewritten, should be fixed now

[ghost]

If you shift refresh on your demo, you'll find that! Auth FOUC will be there too if not logged in. (Not the end of the world, but more libs pronounces this).

[Metnew]

@TheDolo FOUC caused by Semantic.UI. SUI styles ~540KB - before they are downloaded only styled-components styles are active. I'm trying to follow Shell pattern, but not sure is it so easily possible.
Approximate improvements plan:

1. vendor.css and vendor.js must be separated into smaller files. Separate each file into 2 smaller chunks and download would be faster
2. Critical CSS path must be extracted from SUI.

Proof:

UPD: Probably, I need to say that this behaviour likely to occurs only on a first load = Before the app will be cached by ServiceWorkers.

The main reason of FOUC - server can't render SUI styles.

[ghost]

Wonderful, thank you for the explanation!

[Metnew]

@TheDolo probably problem would be solved after #49 will be solved. There wouldn't be unnecessary re-rendering. But still, FOUC might be because of the huge SUI bundle. Also, I'm currently experimenting with separation of SUI bundle for faster content download with HTTP2.

[Metnew]

@TheDolo do you still get FOUC on page loading?

[ghost]

I'll have to refactor your current updates in, I'm a few days behind your commits. I can't get your demo to show it, so thats good. Will follow up in a day or two. Still having problems with every page refresh going back to auth page since your new refactor only in SSR + using my own endpoints for auth. It worked before your refactor and my endpoints have not changed, so I'm assuming it's something with the auth wrapper. But I don't see any FOUC when shift refresh even if it takes me back to auth!

[Metnew]

Shifting to /auth was caused by invalid configuration provided to OfflinePlugin, so right now it's fixed.
Also, I recommend you to check dev branch due to new features:

1. Webpack_config was rewritten in es6
2. Webpack configuration that is used by both apps for both development and production was extracted to webpack_config/webpack.isomorphic.js
3. CircularDependencyPlugin was added
4. Some documentation about testing, env variables, i18n and semantic-ui-react

Dev will be merged into master soon when I'll finish docs and README.md.

@TheDolo waiting for you to adopt new features. You're the most active user of this starter, probably 👍

[ghost]

Yup, FOUC after deploying to a live server. Will get your new updates in a few days and report back! I've gotten good at swapping out all code except my custom routes, reducers, and containers (and some minor code there). It's actually pretty painless! Could easily see a CLI!

[Metnew]

CLI will be soon, sorry, have a lot of work on docs.
I hope you figure out what the hell is currently in /webpack_config. There were some changes to make code follows DRY principle.

[ghost]

Heh yea docs for sure first. At this point I understand nearly all your code, but that did take a while! I love what you did with webpack_config vs the last refactor! +2000 points for the GA/Sentry integrations. I've still kept the API server separate from the SSR server! But it would be nice to mount/remount the API calls ON server instead of browser.

[Metnew]

docs folder.
Maybe the starter needs more integrations, what do you think about it?
Also, I didn't understand (sorry for bad English). Is last update of webpack_config not so good?

[ghost]

Np! I love what you did with webpack_config this time around versus the single folder! Much better than before! I was actually going to request a GA integration, it's almost always a requirement, and the Sentry was just the topping on the sundae. What other major services are there? Minds blank!

[Metnew]

Hah, thanks :)
Right now only Sentry and GA for the client, but Sentry for the server is very soon.

I'm currently working on the styleguide for the folder structure. I got some problems in a similar project, where my friend and I used a lot of relative imports (e.g. import {lol} from 'almost-a-root-dir' ). And we have had many circular dependencies until today.

So, maybe this doc about avoiding circular dependencies will be added too, I've never faced a similar guide for frontend before. Of course, there are similar guides for other languages/frameworks because it's OOP basics, but not for React/Redux projects for sure.

[ghost]

Style guide is perfect, I was a bit confused on how to use scss in the project properly.

Plugs: Further integration of GA into your route system would be nice! And maybe official 'guest' routes tags (x2 please), and the sidebar only shows certain routes if guest. And maybe.... :D