Flash of unstyled content (FOUC)

[joenot443]

Thanks again @tim-soft for the very helpful repository.

I'm experiencing a FOUC when cloning the repo directly and building normally. Once the client has loaded, the page looks fine, however from what I can tell the antd styles are not being sent in the SSR HTML, meaning the resulting markup looks like this:

Perhaps I'm misunderstanding what's possible with antd / SSR, but if possible I'd like to be able to send the antd CSS in my SSR copy, to prevent the flash of unstyled content.

[terry-ice]

` { test: reStyle, rules: [ { test: /.css$/, include: [/node_modules/.*antd/], loader: 'style-loader' },

      // Convert CSS into JS module
      {
        issuer: { not: [reStyle] },
        exclude: [/node_modules\/.*antd/],
        use: 'isomorphic-style-loader'
      },

      // Process external/third-party styles
      {
        exclude: path.resolve(__dirname, '../src'),
        loader: 'css-loader',
        options: {
          sourceMap: isDebug,
          minimize: !isDebug,
          discardComments: { removeAll: true }
        }
      },

      // Process internal/project styles (from src folder)
      {
        include: path.resolve(__dirname, '../src'),
        loader: 'css-loader',
        options: {
          // CSS Loader https://github.com/webpack/css-loader
          importLoaders: 1,
          sourceMap: isDebug,
          // CSS Modules https://github.com/css-modules/css-modules
          modules: true,
          localIdentName: isDebug
            ? '[name]-[local]-[hash:base64:5]'
            : '[hash:base64:5]',
          // CSS Nano http://cssnano.co/options/
          minimize: !isDebug,
          discardComments: { removeAll: true }
        }
      },

      // Apply PostCSS plugins including autoprefixer
      {
        loader: 'postcss-loader',
        options: {
          config: {
            path: './tools/postcss.config.js'
          }
        }
      }

      // Compile Less to CSS
      // https://github.com/webpack-contrib/less-loader
      // Install dependencies before uncommenting: yarn add --dev less-loader less
      // {
      //   test: /\.less$/,
      //   loader: 'less-loader',
      // },

      // Compile Sass to CSS
      // https://github.com/webpack-contrib/sass-loader
      // Install dependencies before uncommenting: yarn add --dev sass-loader node-sass
      // {
      //   test: /\.scss$/,
      //   loader: 'sass-loader',
      // },
    ]
  },`

[terry-ice]

clientConfig.module.rules[0].options.plugins = [ ...clientConfig.module.rules[0].options.plugins, ['import', { libraryName: 'antd', style: 'css' }] ]

[terry-ice]

I encountered this problem and solved it@joenot443

[terry-ice]

@joenot443 you can see my config https://github.com/terry-ice/react-starter-kit-antd/blob/master/tools/webpack.config.js

[joenot443]

@terry-ice thanks so much for making that repository to help me out. Unfortunately, I'm still finding the ant styles are not sent along with SSR, and so I still get the FOUC. Note, as soon as the ant styles loads, it looks fine. However there is still a brief flash where the page looks like this:

[joenot443]

Note that that screenshot is while using the exact repository you linked.

[terry-ice]

I will try to configure tomorrow to see if I can solve it，good night. @joenot443

[talentedandrew]

@joenot443 were you able to solve the FOUC issue?

[joenot443]

@talentedandrew I wasn't unfortunately.