title: Next.JS - Error when Checking if window == undefined : Hydration failed because the initial UI does not match what was rendered on the server
body: <p>I am getting the following error:</p>
  <blockquote>
  <p>Hydration failed because the initial UI does not match what was rendered on the server.</p>
  </blockquote>
  <p>I am using <code>getServerSideProps</code> and in my page, I check whether we are in the browser (<code>window=='undefined'</code>), and then return things accordingly:</p>
  <pre><code>export default function Page() {
    const { data: session } = useSession()
  
    if (typeof window == 'undefined') return null
  
    if (session) {
      return (
        &lt;div&gt;
          &lt;h1&gt;Protected Page&lt;/h1&gt;
          &lt;p&gt;You can view this page because you are signed in.&lt;/p&gt;
        &lt;/div&gt;
      )
    }
    return &lt;p&gt;Access Denied&lt;/p&gt;
  }
  </code></pre>
  <p>But this line here</p>
  <pre><code>if (typeof window == 'undefined') return null
  </code></pre>
  <p>seems to be the problem. When this line is commented out, everything works.</p>
  <p>It's also true that what's returned on the server side will be different to whats' returned on the client side - but I don't fully understand how I should solve this problem and why this is a problem?</p>
  <p>I am doing this check <em>precisely because I only want to render this page on the client side</em> -side &amp; when I do have a session. Am I misunderstanding this?</p>