Considere una página simple de next.js como esta

 const Index: NextPage = () => { const {data: session} = useSession(); const [data, setData] = useState(null); const [isLoading, setLoading] = useState(false); useEffect(() => { setLoading(true) fetch('/api/myEndpoint') .then((res) => res.json()) .then((data) => { setData(data); setLoading(false); }); }, []); if(isLoading) { return <Spinner/>; } if(session) { return <p>here is my protected content</p> } else { return <p>you cant see this page</p> } }

Cuando no estoy conectado, veo "no puedes ver esta página", luego la flecha giratoria, luego otra vez "no puedes ver esta página". Y eso está bien.

Pero cuando inicio sesión, veo "no puede ver esta página", luego la rueda giratoria y luego el contenido protegido.

Lo mismo incluso si lo intento

 if(session && data) {

¿Cómo puedo deshacerme por completo del "no puedes ver esta página" hasta que la página esté completamente cargada?