Expected server HTML to contain a matching <tag> in <tag>

Question

We are using nextjs and getting this error at page refresh (or first load)

My error is:

react-dom.development.js:88 Warning: Expected server HTML to contain a matching <tag> in <tag>.

The code of our functional component looks like this:

export default MyComponent () {

  if(! props.something){  // ← this is causing the problem.
    return null;
  }

  return (
    <>
     HTML here ...
    </>
  )
}

From my understanding, SSR is different from client side rendering and this is why react is complaining.

The app is working fine but this error is showing in the console and we don't want to have many errors being thrown there as this may prevent us from seeing the real errors when they happens.

---

Solution:

The solution is to use dynamic imports and and wrap the component call into:

const MyDynamicComponent = dynamic(() => import('./myComponent'), {ssr: false});

//use it:
<MyDynamicComponent />

//OR :

const MyDynamicComponent = dynamic(() => import('./myComponent'))

//use it:
{typeof window !== 'undefined' && (
  <MyDynamicComponent />
)}

Answer 1

May be importing your component dynamically should solve this. Below is the link you can refer; https://nextjs.org/docs/advanced-features/dynamic-import

Answer 2

I've been looking for solution of a similar problem, but I was using react-window lib and the problem appeared to be in it. I passed different height to it, depends on whether it's loading on server or client, so it gave me back different elements.

My solution was to pass the same height at the beginning, but to change it to window.innerHeight on useEffect ( = on client load).

Answer 3

the code is executed first on the server after in the browser in my case this is why i get this error and other error with style component like : Warning: Prop className did not match. Server: "CardUserInfo....

so this link help : https://github.com/vercel/next.js/discussions/17443 enter link description here and the solution for me like montienned in this disscussion implement useState useEffect

const [mount, setMount] = useState(false)
   useEffect(() => {
     setMount(true)
      
   }, [ ])
  return mount&&(
    <InfoUserCard/>)

Answer 4

In my case the console error displaying Warning: Expected server HTML to contain a matching <sup> in <span>. using Safari Web Browser in development ONLY, i.e. localhost:3000 . Just get rid of this boring error by using Chrome Web Browser.

This boring error will not be exist in production with Safari Web Browser.