¿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

July 16, 2023 at 9:30 pm

Una solución a este problema es utilizar el hook useEffect para esperar a que se actualice router.query antes de renderizar el contenido.

Puede modificar el código de la siguiente manera:

export default function Home() {
  const router = useRouter();
  const [isRouterQuery, setIsRouterQuery] = useState(false);

  // Use useEffect to wait for router.query to update before rendering content
  useEffect(() => {
    if (router.query.foo) {
      setIsRouterQuery(true);
    }
  }, [router.query]);

  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>
  );
}

Aquí, utilizamos el hook useState para inicializar el valor de isRouterQuery en false. Luego, utilizamos el hook useEffect para esperar a que se actualice router.query y establecer el valor de isRouterQuery en true si router.query.foo existe.

Al hacer esto, el contenido solo se renderizará una vez que isRouterQuery haya sido actualizado, evitando el parpadeo inicial.

es.davy.ai

¿Tienes una pregunta?

¿Producen renderizado y parpadeo al renderizar contenido basado en Next.js router.query?

Answer

davy.ai