title: Next JS + Next Auth Protected page loads for seconds after redirection
body: <p>I am trying to redirect to a protected page in the following way:</p>
  <pre><code>&lt;button
    onClick={() =&gt; {
      router.push(&quot;/welcome&quot;);
    }}
  &gt;
  </code></pre>
  <p>The welcome page is protected in the following way:</p>
  <pre><code>import { useSession, signOut } from &quot;next-auth/client&quot;;
  import { useRouter } from &quot;next/router&quot;;
  import { useEffect } from &quot;react&quot;;
  
  export default function Welcome() {
    const [session, loading] = useSession();
    const router = useRouter();
  
    useEffect(() =&gt; {
      if (!loading &amp;&amp; !session?.accessToken) {
        router.push(&quot;/auth/login&quot;);
      }
    }, [loading, session]);
  
    if (!session) {
      return &lt;div&gt;&lt;/div&gt;;
    }
    return (
      &lt;div&gt;
        &lt;h1&gt;Welcome Page&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>The welcome page works fine if I try to access it directly.
  But if I use router.push(), it takes seconds to load. It mostly happens after going back from the welcome page with the browser's back button and then pressing the button again. Though it sometimes happens anyways.</p>
  <p>What am I doing wrong? I was told it's normal behaviour for a dev environment, but it happens in production build too.</p>
  <p>Here is a reproduction:</p>
  <p><a href="https://codesandbox.io/s/distracted-browser-fyjek" rel="nofollow noreferrer">https://codesandbox.io/s/distracted-browser-fyjek</a></p>