Hydration flash using loadable-components - Did not expect server HTML to contain a <div> in <div>

[kirkchris]

Our app is still experiencing white page flashes when rehydrating from the snapshotted HTML. Originally we believe it was due to not using loadable-components since we had code splitting, but after implementing loadable-components, still seeing the issue.

Here is where we load the app:

import React from 'react';
import { hydrate, render } from 'react-dom';
import { Router, Route, Redirect, applyRouterMiddleware, IndexRoute } from 'react-router';
import { getState, loadComponents } from 'loadable-components';

const rootElement = document.getElementById('main-view');
let renderMethod = render;
if (rootElement.hasChildNodes()) {
  renderMethod = (app, doc) => {
    loadComponents().then(() => hydrate(app, doc))
  };
}

renderMethod(
  <ErrorBoundary>
    <Router history={ParabolaBrowserHistory} render={applyRouterMiddleware(useScroll())}>
      <Route
        path="/"
        component={LoadableComponents.MainContainer}
        onEnter={verify}
      >
     ...
    </Router>
  </ErrorBoundary>,
  rootElement,
);

// react snap state
window.snapSaveState = () => getState();

The LoadableComponents.* are defined like this:

export const MainContainer = loadable(() =>
  import(/* webpackChunkName: "MainContainer" */ './components/MainContainer'),
);

Now I've been able to verify that the state is populating correctly into window from loadable-components and it does call the code and say components are loaded prior to running hydrate. When running on dev react throws this warning - and when breakpointing in it appears to throw it on the rootElement, not a nested element:

Did not expect server HTML to contain a <div> in <div>.

I've checked my snapshotted HTML and my fully rendered (via JS) html after the white flash and the contents inside of rootElement match exactly. My concern there was something was causing a mismatch leading react not to hydrate appropriately.

My guess is that even though the components are done loading via loadable-components, for some reason react is still being rendered once with no content, which is causing the mismatch.

Any ideas for what might cause this? We're using react-router v3.2.0 and react 16.2.0.

[kirkchris]

Well I dug into this quite a while before opening the issue and now finally was able to fix it just after.

Anyway, this was due to a change needed in react-router v3 to tell it wait to render until it matched the routes appropriately. Documentation here: https://github.com/ReactTraining/react-router/blob/v3/docs/guides/ServerRendering.md

And the working code snippet is this:

import { Router, applyRouterMiddleware, match } from 'react-router';
import routes from './routes'

const rootElement = document.getElementById('main-view');
const renderApp = (renderMethod, renderProps) => {
  renderMethod(
    <ErrorBoundary>
      <Router {...renderProps} render={applyRouterMiddleware(useScroll())} />
    </ErrorBoundary>,
    rootElement,
  );
};

if (rootElement.hasChildNodes()) {
  loadComponents().then(() => {
    match({ history, routes }, (error, redirectLocation, renderProps) => {
      renderApp(hydrate, renderProps);
    });
  });
}
else {
  renderApp(render, { history, routes });
}

This issue can be closed.

[baptooo]

Hi @kirkchris I am encountering a flash issue with react-router-dom in version 4.2.2,
could you tell me if your fix is still necessary for this new version please ?

Thank you !

[kirkchris]

Hi @baptooo I'm not actually sure if this would still be required in v4. v4 is a pretty big update from v3 and we haven't made that upgrade yet. I would check to see if the react-router-dom v4 documentation mentions anything about server rendering like they did for v3!

[baptooo]

Thank you for your answer @kirkchris yes I figured out that it because I didn't save my Redux store in the window.snapSaveState function.

No more flash ! 💪

Thank you very much

[maierson]

Very very nice! Thank you. And yes - still needed with React router 4+.

[stereobooster]

And yes - still needed with React router 4+.

I'm not sure you need it. It can happen that we use it different way, but I don't need any workarounds for router only some boilerplate code for loadable-components

[maierson]

We're not using react-snap nor loadable-components. Just direct import() statements. But it does make sense that the code must be loaded locally on the client before you hydrate in order to prevent flashing. I feel it's more of a subtlety on how React hydrates than anything else. In any case - preloading solved the problem here.

[stereobooster]

If you're not using react-snap, than use case is different. For those who use it this is my boilerplate

window.snapSaveState = () => getState();

loadComponents()
  .then(() => hydrate(App))
  .catch(() => render(App));

and don't forget to provide { modules: [] } param if you do not use babel-plugin. See gregberge/loadable-components#114

[yyynnn]

Could somebody provide a gist with a full index.js (entry) example?

[stereobooster]

Old version https://github.com/stereobooster/an-almost-static-stack/blob/react-snap/src/index.js

[yyynnn]

Cool, thanks, so fast, yeah!
It's still not clear where should user add { modules: [] }

it fails with loadable-components state not found. You have a problem server-side. Please verify that you have called ''loadableState.getScriptTag()'' server-side.

[stereobooster]

Can you open separate issue, with description of problem. And specify versions of all libraries