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

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


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


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.