title: Is there any way to avoid "Text content did not match" warning in SSR with React?
body: <p>I have set up a SSR environment with webpack and HMR. There is a statically rendered markup, that server passes to the client and a <code>client.js</code> bundle with <code>ReactDOM.hydrate()</code> method. If I change my source code, HMR works fine, but issues a warning in console, saying that there's a mismatch between client code and static markup.</p>
  
  <p>I am using an express server with <code>webpack-dev-middleware</code> and <code>webpack-hot-middleware</code></p>
  
  <p>My webpack config looks like this:</p>
  
  <pre><code>module.exports = {
    mode: 'development',
    entry: ['webpack-hot-middleware/client', './src/client.js'],
    devServer: {
      hot: true,
      publicPath: '/'
    },
    plugins: [new HotModuleReplacementPlugin()],
    module: {
      rules: [{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }]
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    output: {
      filename: 'client.js',
      path: path.resolve(__dirname)
    }
  };
  </code></pre>
  
  <p>I'm wondering if there is any way to solve this problem, since I can't come up with any ideas of how to make my markup to match the changes that I made, or should I just suppress these warnings? </p>