Carga previa de la ruta en Next.js

Cómo Next.js acelera la navegación con la recuperación previa de rutas y cómo personalizarla

Milica Mihajlija

En esta publicación, aprenderás cómo funciona el enrutamiento en Next.js, cómo se optimiza para la velocidad y cómo personalizarlo para que se adapte mejor a tus necesidades.

El componente <Link>

En Next.js, no es necesario configurar el enrutamiento de forma manual. Next.js usa el enrutamiento basado en el sistema de archivos, lo que te permite crear archivos y carpetas dentro del directorio ./pages/:

Para vincular diferentes páginas, usa el componente <Link>, de manera similar a como usarías el clásico elemento <a>:

<Link href="/margherita">
  <a>Margherita</a>
</Link>

Cuando usas el componente <Link> para la navegación, Next.js hace un poco más por ti. Por lo general, una página se descarga cuando sigues un vínculo hacia ella, pero Next.js automáticamente realiza una recuperación previa del código JavaScript necesario para renderizar la página.

Cuando cargas una página con algunos vínculos, es probable que, para cuando sigas un vínculo, ya se haya recuperado el componente que se encuentra detrás de él. Esto mejora la capacidad de respuesta de la aplicación, ya que acelera la navegación a páginas nuevas.

En la app de ejemplo, la página index.js se vincula a margherita.js con un <Link>:

Usa las Herramientas para desarrolladores de Chrome para verificar que margherita.js se haya realizado la recuperación previa: 1. Para obtener una vista previa del sitio, presiona Ver app y, luego, Pantalla completa .

1. Abre las Herramientas para desarrolladores de Chrome.
2. Haga clic en la pestaña Red.
3. Selecciona la casilla de verificación Inhabilitar la memoria caché.
4. Vuelve a cargar la página.

Cuando cargas index.js, la pestaña Red muestra que también se descarga margherita.js:

Cómo funciona la recuperación previa automática

Next.js solo realiza una recuperación previa de los vínculos que aparecen en la ventana gráfica y usa la API de Intersection Observer para detectarlos. También inhabilita la recuperación previa cuando la conexión de red es lenta o cuando los usuarios activaron Save-Data. Según estas verificaciones, Next.js inserta de forma dinámica etiquetas <link rel="preload"> para descargar componentes para navegaciones posteriores.

Next.js solo recupera el código JavaScript, no lo ejecuta. De esa manera, no se descarga ningún contenido adicional que la página prefetch pueda solicitar hasta que visites el vínculo.

Evita la recuperación previa innecesaria

Para evitar la descarga de contenido innecesario, puedes inhabilitar la recuperación previa de páginas que se visitan con poca frecuencia. Para ello, configura la propiedad prefetch en <Link> como false:

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

En esta segunda app de ejemplo, la página index.js tiene un <Link> a pineapple-pizza.js con prefetch establecido en false:

Para inspeccionar la actividad de la red, sigue los pasos del primer ejemplo. Cuando cargas index.js, la pestaña Red de Herramientas para desarrolladores muestra que se descargó margherita.js, pero no pineapple-pizza.js:

Realiza una recuperación previa con un enrutamiento personalizado

El componente <Link> es adecuado para la mayoría de los casos de uso, pero también puedes compilar tu propio componente para realizar el enrutamiento. Next.js te facilita esta tarea con la API del enrutador disponible en next/router. Si quieres hacer algo (por ejemplo, enviar un formulario) antes de navegar a una nueva ruta, puedes definirlo en tu código de enrutamiento personalizado.

Cuando usas componentes personalizados para el enrutamiento, también puedes agregar la recuperación previa. Para implementar la recuperación previa en tu código de enrutamiento, usa el método prefetch de useRouter.

Echa un vistazo a components/MyLink.js en esta app de ejemplo:

La recuperación previa se realiza dentro del hook useEffect. Si la propiedad prefetch de un <MyLink> se establece en true, la ruta especificada en la propiedad href se recupera previamente cuando se renderiza ese <MyLink>:

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

Cuando haces clic en el vínculo, el enrutamiento se realiza en handleClick. Se registra un mensaje en la consola y el método push navega a la nueva ruta especificada en href:

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

En esta app de ejemplo, la página index.js tiene un <MyLink> para margherita.js y pineapple-pizza.js. La propiedad prefetch se establece en true en /margherita y en false en /pineapple-pizza.

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

Cuando cargas index.js, la pestaña Red muestra que se descargó margherita.js y no pineapple-pizza.js:

Cuando hagas clic en cualquiera de los vínculos, la consola registrará el mensaje "Having fun with Next.js" y navegará a la nueva ruta:

Conclusión

Cuando usas <Link>, Next.js precarga automáticamente el código JavaScript necesario para renderizar la página vinculada, lo que hace que la navegación a páginas nuevas sea más rápida. Si usas un enrutamiento personalizado, puedes usar la API del enrutador de Next.js para implementar la recuperación previa por tu cuenta. Inhabilita la recuperación previa de páginas que se visitan con poca frecuencia para evitar descargar contenido innecesariamente.