title: React SSR blinks page
body: <p>I created a project with React, react-router, @loadable/component.</p>
  
  <p>Now I'm trying to add SSR to this project. 
  I did server side rendering with react-router.</p>
  
  <p>And then I added @loadable/component to import all pages component:</p>
  
  <pre><code>import loadable from '@loadable/component';
  
  const routersConfig = [
    {
      path: '/',
      component: loadable(() =&gt; import('./Home')),
      exact: true,
    },
    {
      path: '/2',
      component: loadable(() =&gt; import('./Home2')),
      exact: true,
    },
  ];
  </code></pre>
  
  <p>Then I added all this parts of code: <a href="https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/" rel="nofollow noreferrer">https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/</a></p>
  
  <p>And now it works. 
  But It works with the problem: a content blinks while loading.</p>
  
  <p>How I understand the page's loading process:</p>
  
  <ol>
  <li>Browser gets a content generated by SSR (the first query in network tab)</li>
  <li>Browser renders a content (with left and top margins )</li>
  <li>Browser downloads two enterpoints and vendors from html (app.js, normalizer.js, vendor.js)</li>
  <li>Browser executes app.js and normalizer.js. Left and top margins are removed. </li>
  <li>App.js starts downloading page's chunk - home.js. <strong>In this moment content disappears</strong>  </li>
  <li>When home.js is downloaded, the content appears again.</li>
  </ol>
  
  <p>I shoot a video to illustrate this process. (I'm sorry for quality, stackoverflow forbides files which size is more then 2MB ). I'm throttling network speed to imagine all page's download process.</p>
  
  <p><a href="https://i.stack.imgur.com/sD4CX.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sD4CX.gif" alt="enter image description here"></a></p>
  
  <p>My question is why the content disappears? How to fix it?</p>
  
  <p><strong>My code</strong></p>
  
  <p>server.js</p>
  
  <pre><code>const sheetStyledComponents = new ServerStyleSheet();
    const sheetsJssRegistry = createSheetsRegistry();
    const statsFile = path.resolve(process.cwd(), './build-ssr/dist/loadable-stats.json');
  
    const extractor = new ChunkExtractor({
      statsFile,
      entrypoints: [
        'app',
        'normalize',
      ],
    });
  
  
    try {
      const client = ApolloSSRClient();
  
      const tree = (
        &lt;ApolloProvider client={client}&gt;
          &lt;ApplyTheme sheetsRegistry={sheetsJssRegistry}&gt;
            &lt;StaticRouter location={req.url}&gt;
              &lt;Home /&gt;
            &lt;/StaticRouter&gt;
          &lt;/ApplyTheme&gt;
        &lt;/ApolloProvider&gt;
      );
  
  // there is combination of Apollo graphql, jss, styledComponent functions
      const body = await getMarkupFromTree({
        renderFunction: flow(
          sheetStyledComponents.collectStyles.bind(sheetStyledComponents),
          extractor.collectChunks.bind(extractor),
          renderToString
        ),
        tree,
      });
  
      const scriptTags = extractor.getScriptTags(); 
      // It isn't used yet
      const linkTags = extractor.getLinkTags(); 
  
      const styleTags = sheetStyledComponents.getStyleTags();
  
      const html = (await rawHtml)
        .replace(
          '&lt;/head&gt;',
          ` 
            ${styleTags}
            &lt;style type="text/css" id='jss-server-side-styles'&gt;
                ${sheetsJssRegistry.toString()}
            &lt;/style&gt;
            &lt;script&gt;
              window.__APOLLO_STATE__ = ${JSON.stringify(client.extract())};
            &lt;/script&gt;
            ${scriptTags}
            &lt;/head&gt;
          `
        )
        .replace('&lt;div id="app"&gt;&lt;/div&gt;', `&lt;div id="app"&gt;${body}&lt;/div&gt;`);
  
  
      res.send(html);
  </code></pre>
  
  <p>index.jsx</p>
  
  <pre><code>const SSRApp = (
    &lt;ApolloProvider client={ApolloClient}&gt;
      &lt;ApplyTheme&gt;
        &lt;BrowserRouter&gt;
          &lt;App /&gt;
        &lt;/BrowserRouter&gt;
      &lt;/ApplyTheme&gt;
    &lt;/ApolloProvider&gt;
  );
  
  loadableReady(() =&gt; (
    ReactDOM.hydrate(
      SSRApp,
      document.getElementById('app'),
    )
  ));
  </code></pre>