Carga previa de la ruta en Next.js

Cómo Next.js acelera las navegaciones con la carga previa de rutas y cómo personalizarlo

¿Qué aprenderás?

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

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

Captura de pantalla del directorio páginas que contiene tres archivos: index.js, margherita.js y piña-pizza.js.

Para vincular diferentes páginas, utiliza la <Link>, de manera similar a como lo harías usa el elemento <a> anterior:

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

Cuando usas el componente <Link> para la navegación, Next.js hace un poco más para ti. Normalmente, una página se descarga cuando haces clic en un vínculo a ella, pero Next.js carga previamente el código JavaScript necesario para procesar la página.

Cuando cargas una página con algunos vínculos, es probable que cuando los sigas un vínculo, el componente que contiene ya se recuperó. Esto mejora la capacidad de respuesta de las aplicaciones, ya que permite navegar a páginas nuevas con mayor rapidez.

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

Usa las Herramientas para desarrolladores de Chrome para verificar que margherita.js se haya cargado previamente: 1) Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa

  1. Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
  2. Haga clic en la pestaña Red.

  3. Selecciona la casilla de verificación Inhabilitar caché.

  4. Vuelve a cargar la página.

Cuando cargas index.js, la pestaña Red muestra que margherita.js está descargado también:

Pestaña Network de Herramientas para desarrolladores con el archivo margherita.js destacado.

Cómo funciona la carga previa automática

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

Next.js solo recupera el código JavaScript. no lo ejecuta. De esa manera, no descargar cualquier contenido adicional que la página cargada previamente pueda solicitar hasta que visites el vínculo.

Evita las cargas previas innecesarias

Para evitar descargar contenido innecesario, puedes inhabilitar la carga previa para las páginas visitadas estableciendo 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> para pineapple-pizza.js con prefetch establecido en false:

Para inspeccionar la actividad de la red, sigue los pasos del primer ejemplo. Cuándo cargas index.js, en la pestaña Red de Herramientas para desarrolladores se muestra que margherita.js está descargado, pero pineapple-pizza.js no es:

Pestaña Network de Herramientas para desarrolladores con el archivo margherita.js destacado.

Carga previa con 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 hacer el enrutamiento. Next.js lo facilita con la API de router disponible en next/router. Si quieres hacer algo (por ejemplo, enviar un formulario) antes de navegar a una nueva puedes definirla en tu código de enrutamiento personalizado.

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

Observa components/MyLink.js en esta app de ejemplo:

La carga previa se realiza hook useEffect. Si el botón La propiedad prefetch en un <MyLink> se establece en true, la ruta especificada en el La propiedad href se carga previamente cuando se renderiza ese <MyLink>:

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

Si haces clic en el vínculo, el enrutamiento se completará en handleClick. Un mensaje obtiene registrado en la consola, y el método push navega a la ruta nueva especificadas 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> a margherita.js y pineapple-pizza.js La propiedad prefetch se configuró como true en /margherita y a false el /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 margherita.js está descargado y pineapple-pizza.js no es:

Pestaña Network de Herramientas para desarrolladores con el archivo margherita.js destacado.

Cuando hagas clic en cualquiera de los vínculos, la consola registrará “Diviértete con Next.js”. y navega a la nueva ruta:

La consola de Herramientas para desarrolladores, en la que se muestra el mensaje “Divertirse con Next.js”.

Conclusión

Cuando usas <Link>, Next.js carga previamente el código JavaScript necesario para renderizar la página vinculada, lo que agiliza la navegación a páginas nuevas. Si eres con enrutamiento personalizado, puedes usar la API del router de Next.js para implementar carga previa. Evita descargar contenido innecesariamente. Para ello, inhabilita carga previa de las páginas que se visitan con poca frecuencia.