I've been struggling for the last few days to eliminate page flash. My project started with create-react-app, then I used help to set up SSR and various other options. When I started running into problems, I stripped my code down and ejected. Here is my code. You can build with npm run build and start the SSR with npm run serve. Visit http://localhost:3000/ to see the result.
There are two routes in my app: Home and About.
Going to / (Home) works as desired: react-loadable identifies the home bundle, injects a <script> tag for it, and sends the page out the door. The client loads all the bundles and react takes over with no flash.
Going to /about results in a page flash (make sure the page is loaded from the server to see this). I added an import for moment-timezone into the about component, and webpack smartly moves it into its own bundle, separate from the about bundle. The problem is that react-loadable only sees that it needs the about bundle, not the extra bundle containing moment-timezone. Thus, on the client side, when react takes over it sees that its missing a module, blanks the page, loads the bundle containing the missing module, then re-renders (at least,
I think that's how it works).
What am I missing? I am using the babel and webpack plugins as described in the React-Loadable Readme. It seems like React-Loadable is only smart enough to go one level deep and not see what the imported module's dependencies are, but surely that's not the case, is it?
