title: React SSR blinks when starting client
body: <h2>simplifying my post:</h2>
  <blockquote>
  <p>my ssr webpage blinks when starting client which means page renders server side rendered html then goes blank and then it starts loading everything all over again.</p>
  </blockquote>
  <h2>going through the details:</h2>
  <p>i'm working on a react project which we decided to change it from being rendered in <strong>client</strong> to render in <strong>server</strong>. the project includes <code>react-router-dom</code> ,<code>redux</code> and <code>react-redux</code> ,<code>material-ui</code> which comes with <code>react-jss</code> ,<code>loadable/component</code> ,also handling the head elements by <code>react-helmet-async</code> ,and in ssr it's using <code>express.js</code> which seems to be a must.</p>
  <ul>
  <li>for <code>react-router-dom</code> i did everything that is on the docs. using <code>BrowserRouter</code> in client and <code>StaticRouter</code> in ssr and passing a <code>context</code> object to it.</li>
  <li>for <code>redux</code> and <code>react-redux</code> i saved <code>preloaded_state</code> in a variable in window and fetched it client side then pass it to store.also fetched some external data to get the content on the source of the page.so i have some requests and data fetching in ssr.</li>
  <li>for <code>material-ui</code> i created a <code>new serverSideStyleSheet</code> and collected all the styles from all over the project.</li>
  <li>for <code>react-helmet-async</code> i've got different <code>Helmet</code> tags for each page that collects different title ,description and ... individualy.there is also a <code>helmetProvider</code> wrapper for csr and ssr.</li>
  <li>at first i used <code>react-helmet</code> but it wasn't compatible with <code>renderToNodeStream</code>.i didn't change react-helmet-async although i'm not using renderToNodeStream but kept it to migrate to <code>renderToNodeStream</code> one day hopefully.</li>
  <li>about <code>express.js</code> i'm using it as the docs say but after i added <code>loadable/component</code> i wasn't able to get a successful server side rendering by just adding <code> app.get('*' , ServerSideRender)</code> .so i had to add every url i wanted to render in server in <code>app.get(url ,ServerSideRender)</code>.</li>
  <li>the other thing about the project is that i didn't eject and created it with create-react-app and there is no webpack config or babelrc but instead i'm using craco.config.js</li>
  <li>the last thing is that i've excluded index.html from ssr and instead i've made the tags myself in SSR.js file so index.html gets rendered just in client. and i was so careful about writing tags in ssr exactlly like they are in index.html</li>
  </ul>
  <h2>solution but not the solution:</h2>
  <p>this problem is occuring because i use loadable component in my <code>Router.js</code>. so when i import components the normal way there is no blink and everything is fine but unused js decreases my page's perfomance score. i need loadable component stop making the page blink.</p>
  <h2>diving into the code:</h2>
  <h3>just the client</h3>
  <p>index.html : rendered just in client</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;fa&quot; dir=&quot;rtl&quot;&gt;
  &lt;head&gt;
      &lt;meta name=&quot;robots&quot; content=&quot;noindex, nofollow&quot; /&gt;
      &lt;meta data-rh=&quot;true&quot; name=&quot;viewport&quot;
          content=&quot;width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no&quot; /&gt;
      &lt;link href=&quot;%PUBLIC_URL%/fonts.css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
      &lt;script src=&quot;%PUBLIC_URL%/main.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>index.js : rendered just in client</p>
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import {loadableReady} from '@loadable/component'
  import App from './App'
  import {BrowserRouter} from 'react-router-dom'
  import {HelmetProvider} from 'react-helmet-async'
  import { Provider } from 'react-redux'
  
  loadableReady(() =&gt; {
      const preloadedState = window.__PRELOADED_STATE__
      delete window.__PRELOADED_STATE__
  
      ReactDOM.hydrate(
        &lt;BrowserRouter&gt;
          &lt;HelmetProvider&gt;
            &lt;Provider store={store(preloadedState)}&gt;
              &lt;App /&gt;
            &lt;/Provider&gt;{&quot; &quot;}
          &lt;/HelmetProvider&gt;
        &lt;/BrowserRouter&gt;,
        document.getElementById(&quot;root&quot;)
      );
  })
  </code></pre>
  <h3>just the server</h3>
  <p>ssrIndex.js</p>
  <pre><code>require('ignore-styles')
  
  require('@babel/register')({
      ignore: [/(node_modules)/],
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
          '@babel/plugin-transform-runtime',
          '@babel/plugin-proposal-class-properties',
          'babel-plugin-dynamic-import-node',
          '@babel/plugin-transform-modules-commonjs',
          '@loadable/babel-plugin',
      ],
  })
  
  // Import the rest of our application.
  require('./SSR.js')
  </code></pre>
  <p>SSR.js</p>
  <pre><code>import React from 'react'
  import express from 'express'
  import ReactDOMServer from 'react-dom/server'
  import {StaticRouter} from 'react-router-dom'
  import {Provider} from 'react-redux'
  import ServerStyleSheets from '@material-ui/styles/ServerStyleSheets'
  import {HelmetProvider} from 'react-helmet-async'
  import {ChunkExtractor, ChunkExtractorManager} from '@loadable/server'
  import path from 'path'
  import App from './App'
  import store from './redux/store'
  import template from './utils/template'
  
  const PORT = 8080
  const app = express()
  
  const renderPage = (req, res, preload) =&gt; {
      const staticRouterContext = {}
      const helmetContext = {}
  
      const statsFile = path.resolve(__dirname, '../build', 'loadable-component.json')
      const extractor = new ChunkExtractor({statsFile})
      const sheets = new ServerStyleSheets()
  
      const html = ReactDOMServer.renderToString(
          sheets.collect(
              &lt;ChunkExtractorManager extractor={extractor}&gt;
                  &lt;HelmetProvider context={helmetContext}&gt;
                      &lt;StaticRouter location={req.url} context={staticRouterContext}&gt;
                          &lt;Provider store={store(preload)}&gt;
                              &lt;App /&gt;
                          &lt;/Provider&gt;
                      &lt;/StaticRouter&gt;
                  &lt;/HelmetProvider&gt;
              &lt;/ChunkExtractorManager&gt;,
          ),
      )
      const {helmet} = helmetContext
  
      const wholeData = template('scripts', {
          chunks: html,
          helmet,
          extractor,
          sheets,
          preload,
      })
  
      res.send(wholeData)
  }
  
  const serverRenderer = (req, res, next) =&gt; {
      fetchSomeExternalData()
          .then(response =&gt; {
              // response.data is used as preloaded data and passed to the store of redux
              // also stored in a variable called __PRELOADED_STATE__ in window to use in client side
              // to populate store of redux
              renderPage(req, response, response.data)
          })
          .catch(err =&gt; {
              // start server side rendering without preloaded data
              renderPage(req, res)
          })
  }
  
  // each url that i want to render on the server side i should add here individually
  // which is not so convenient
  app.get('/', serverRenderer)
  app.get('/my-url-1/', serverRenderer)
  app.get('/my-url-2/', serverRenderer)
  
  app.use(express.static(path.join(__dirname, '/../build/')))
  
  // the * doesnt seem to work
  app.get('*', serverRenderer)
  
  app.listen(PORT, () =&gt; {
      if (process.send) {
          process.send('ready')
      }
  })
  </code></pre>
  <h3>for both client and server</h3>
  <p>App.js</p>
  <pre><code>&lt;div&gt;
      &lt;Header/&gt;
      &lt;Router/&gt;
      &lt;Footer/&gt;
  &lt;/div&gt;
  </code></pre>
  <p>i'd be happy to hear any suggestions or solutions. thank you for your time.</p>