title: Expected server HTML to contain a matching <tag> in <tag>
body: <p>We are using nextjs and getting this error at page refresh (or first load)</p>
  
  <p>My error is:</p>
  
  <pre><code>react-dom.development.js:88 Warning: Expected server HTML to contain a matching &lt;tag&gt; in &lt;tag&gt;.
  </code></pre>
  
  <p>The code of our functional component looks like this:</p>
  
  <pre><code>export default MyComponent () {
  
    if(! props.something){  // ← this is causing the problem.
      return null;
    }
  
    return (
      &lt;&gt;
       HTML here ...
      &lt;/&gt;
    )
  }
  </code></pre>
  
  <p>From my understanding, SSR is different from client side rendering and this is why react is complaining. </p>
  
  <p>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.</p>
  
  <hr>
  
  <h3>Solution:</h3>
  
  <p>The solution is to use dynamic imports and and wrap the component call into:</p>
  
  <pre><code>const MyDynamicComponent = dynamic(() =&gt; import('./myComponent'), {ssr: false});
  
  //use it:
  &lt;MyDynamicComponent /&gt;
  
  //OR :
  
  const MyDynamicComponent = dynamic(() =&gt; import('./myComponent'))
  
  //use it:
  {typeof window !== 'undefined' &amp;&amp; (
    &lt;MyDynamicComponent /&gt;
  )}
  </code></pre>