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

Answer 2

If suppressHydrationWarning doesn't work (e.g. you want to supress the hydration warning a level deeper) you could try to manually remove the DOM content before you hydrate.

const rootId = 'app'
const root = document.getElementById(vueRootId)
root.innerHTML = ''
// Your hydration code
// ...

See Remove all child elements of a DOM node in JavaScript for alternative ways to remove the childs of a DOM element.