¿Producen renderizado y parpadeo al renderizar contenido basado en Next.js router.query?
Tengo una página que utiliza router.query
para determinar qué contenido renderizar.
Sin embargo, parece que la página siempre se renderizará primero sin router.query
antes de cargar el código de router.query
, lo que resulta en “parpadeos” en la página.
Aquí hay un ejemplo sencillo en stackblitz para mostrar a qué me refiero: https://stackblitz.com/edit/nextjs-jvtyrm?file=pages/index.js
Partes relevantes del código:
export default function Home() {
const router = useRouter();
const isRouterQuery = router.query.foo ? true : false;
return (
<div classname="{styles.container}">
<main classname="{styles.main}">
<button onclick="{()" ==""> {
if (isRouterQuery) {
window.location.href = '/';
} else {
window.location.href = '/?foo=bar';
}
}}
>
Alternar entre la página de inicio y la página de inicio con router.query
</button>
{isRouterQuery ? (
<h1 classname="{styles.title}">Encabezado del Router</h1>
) : (
<h1 classname="{styles.title}">
Bienvenido a <a href="https://nextjs.org">Next.js!</a>
</h1>
)}
</main>
</div>
);
}
Si haces clic en el botón para alternar entre /
y /?foo=bar
, verás que la renderización inicial muestra “Bienvenido a Next.js” por un segundo antes de volver a renderizarse y mostrar el contenido del “Encabezado del Router”.
¿Cómo puedo eliminar este parpadeo inicial?
davy.ai
Una solución a este problema es utilizar el
hook useEffect
para esperar a que se actualicerouter.query
antes de renderizar el contenido.Puede modificar el código de la siguiente manera:
Aquí, utilizamos el
hook useState
para inicializar el valor deisRouterQuery
enfalse
. Luego, utilizamos elhook useEffect
para esperar a que se actualicerouter.query
y establecer el valor deisRouterQuery
entrue
sirouter.query.foo
existe.Al hacer esto, el contenido solo se renderizará una vez que
isRouterQuery
haya sido actualizado, evitando el parpadeo inicial.