Estoy teniendo el siguiente error:
La hidratación falló porque la interfaz de usuario inicial no coincide con lo que se representó en el servidor.
Estoy usando getServerSideProps y en mi página, compruebo si estamos en el navegador ( window=='undefined' ) y luego devuelvo las cosas en consecuencia:
export default function Page() { const { data: session } = useSession() if (typeof window == 'undefined') return null if (session) { return ( <div> <h1>Protected Page</h1> <p>You can view this page because you are signed in.</p> </div> ) } return <p>Access Denied</p> }Pero esta línea aquí
if (typeof window == 'undefined') return nullparece ser el problema. Cuando esta línea está comentada, todo funciona.
También es cierto que lo que se devuelve en el lado del servidor será diferente a lo que se devuelve en el lado del cliente, pero no entiendo completamente cómo debo resolver este problema y por qué es un problema.
Estoy haciendo esta verificación precisamente porque solo quiero mostrar esta página en el lado del cliente y cuando tengo una sesión. ¿Estoy malinterpretando esto?
El objetivo de SSR es renderizar previamente la página en el servidor. Si en el servidor su página siempre se vuelve null , no hay necesidad de usar SSR.
Si desea renderizar previamente la página solo si existe una sesión, debe verificar la sesión en el servidor, dentro de getServerSideProps .
Si verifica la sesión dentro del componente de la página, la verificación se realiza en el cliente y nuevamente no sería necesario usar getServerSideProps .
Aquí hay un ejemplo tomado de uno de mis proyectos, en el que usé NextAuth para administrar la autenticación:
import { getSession } from 'next-auth/client'; // ...your page component here... export async function getServerSideProps(context) { const session = await getSession({ req: context.req }); if (session) { return { props: { session } }; } else { return { redirect: { destination: '/auth', permanent: false, } }; } } En este fragmento, la sesión se verifica en el servidor.
Si existe una sesión, se podrá acceder a ella en el componente de la página a través de sus props .
Si la sesión no existe, se redirige al usuario a la página de autenticación.
PD: acabo de revisar los documentos y parece que la importación ha cambiado a 'next-auth/react' (que, por cierto, tiene más sentido ya que usar /client en el servidor es engañoso).