title: Next.JS: Warning Expected server HTML to contain a matching <a> in <div>; How to rehydrate?
body: <p>I am using Semantic-UI React and Next.JS but it appears at breakpoint &lt; 768px, my Home component completely breaks upon a refresh of the browser. I know because its a react/next.js app they are taking care of the routing but I guess I wondered what if a user happen to do that?</p>
  
  <p>It doesn't happen on my /login, /register or /profile routes</p>
  
  <p>So I've checked around to solve my issue — <a href="https://spectrum.chat/next-js/general/warning-expected-server-html-to-contain-a-matching-p-in-div~d2f8f623-11a5-4917-a71d-661904089193" rel="noreferrer">Here</a> and in that post it points to the <a href="https://reactjs.org/docs/react-dom.html#hydrate" rel="noreferrer">React docs</a>; the explanation for why this happens and the prescription to solve it doesn't seem to fit to my case.</p>
  
  <blockquote>
    <p>Same as render(), but is used to hydrate a container whose HTML
    contents were rendered by ReactDOMServer. React will attempt to attach
    event listeners to the existing markup.</p>
    
    <p>React expects that the rendered content is identical between the
    server and the client. It can patch up differences in text content,
    but you should treat mismatches as bugs and fix them. In development
    mode, React warns about mismatches during hydration. There are no
    guarantees that attribute differences will be patched up in case of
    mismatches. This is important for performance reasons because in most
    apps, mismatches are rare, and so validating all markup would be
    prohibitively expensive.</p>
    
    <p>If a single element’s attribute or text content is unavoidably
    different between the server and the client (for example, a
    timestamp), you may silence the warning by adding
    suppressHydrationWarning={true} to the element. It only works one
    level deep, and is intended to be an escape hatch. Don’t overuse it.
    Unless it’s text content, React still won’t attempt to patch it up, so
    it may remain inconsistent until future updates.</p>
    
    <p>If you intentionally need to render something different on the server
    and the client, you can do a two-pass rendering. Components that
    render something different on the client can read a state variable
    like this.state.isClient, which you can set to true in
    componentDidMount(). This way the initial render pass will render the
    same content as the server, avoiding mismatches, but an additional
    pass will happen synchronously right after hydration.</p>
  </blockquote>
  
  <p>This is entry point file: <code>pages/index</code></p>
  
  <pre><code>import React from 'react'
  import Head from '../components/head'
  import HomeLayout from '../components/Home/Home.jsx'
  import 'semantic-ui-css/semantic.min.css'
  import '../styles/styles.scss'
  import { connect } from 'react-redux'
  
  // import {bindActionCreators} from 'redux'
  // import withRedux from 'next-redux-wrapper'
  import { logInUser } from '../store'
  
  
  class Home extends React.Component {
      static async getInitialProps({ isLoggedIn }) {
          return { isLoggedIn }
      }
  
  
      render() {
          const { isLoggedIn } = this.props
          return (
          &lt;div&gt;
          {console.log("isLoggedIn ", isLoggedIn)}
             &lt;Head title = 'Home' /&gt;
             &lt;HomeLayout isLoggedIn = { isLoggedIn }/&gt;
          &lt;/div&gt;
          )
      }
  }
  
  
  
  
  export default connect(state =&gt; state)(Home);
  </code></pre>
  
  <p>And this is my <code>pages/_app</code></p>
  
  <pre><code>import React from 'react'
  import { Provider } from 'react-redux'
  import App from 'next/app'
  import withRedux from 'next-redux-wrapper'
  import { initializeStore } from '../store'
  
  export default withRedux(initializeStore)(
   class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
     return {
      pageProps: Component.getInitialProps
       ? await Component.getInitialProps(ctx)
       : {}
     }
    }
  
    render() {
     const { Component, pageProps, store } = this.props
     return (
      &lt;Provider store={store}&gt;
       &lt;Component {...pageProps} /&gt;
      &lt;/Provider&gt;
     )
    }
   }
  )
  </code></pre>
  
  <p>Any help </p>