Is there any way to avoid "Text content did not match" warning in SSR with React?

Question

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 client.js bundle with ReactDOM.hydrate() 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.

I am using an express server with webpack-dev-middleware and webpack-hot-middleware

My webpack config looks like this:

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)
  }
};

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?

Answer 1

If you set suppressHydrationWarning to true, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch.

<MyComponent suppressHydrationWarning />

More info at https://reactjs.org/docs/dom-elements.html#suppresshydrationwarning