Cómo acelera Next.js las navegaciones con la carga previa de rutas y cómo personalizarla
¿Qué aprenderás?
En esta publicación, obtendrás información sobre cómo funciona el enrutamiento de Next.js, cómo se optimiza para ofrecer velocidad y cómo personalizarlo para que se adapte mejor a tus necesidades.
El componente <Link>
En Next.js, no necesitas configurar el enrutamiento manualmente.
Next.js usa el enrutamiento basado en el sistema de archivos, que te permite crear archivos y carpetas dentro del directorio ./pages/:
Para vincular a diferentes páginas, usa el componente <Link>, de manera similar a como usarías 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 por ti. Por lo general, una página se descarga cuando sigues un vínculo a ella, pero Next.js realiza una carga previa del código JavaScript necesario para procesar la página de forma automática.
Cuando cargas una página con algunos vínculos, lo más probable es que, cuando sigas un vínculo, el componente detrás de este ya se haya recuperado. Esto mejora la capacidad de respuesta de la aplicación, ya que agiliza la navegación a páginas nuevas.
En la siguiente 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 cargado previamente:
1. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
.
- Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
Haga clic en la pestaña Red.
Selecciona la casilla de verificación Inhabilitar caché.
Vuelve a cargar la página.
Cuando cargas index.js, la pestaña Red muestra que margherita.js también se descargó:
Cómo funciona la carga previa automática
Next.js carga previamente solo los vínculos que aparecen en el viewport y usa la API de Intersection Observaer para detectarlos. También inhabilita la carga previa cuando la conexión de red es lenta o cuando los usuarios tienen activado Save-Data. Según estas verificaciones, Next.js inserta etiquetas <link
rel="preload"> de forma dinámica para descargar componentes para las navegaciones posteriores.
Next.js solo recupera el código JavaScript; no lo ejecuta. De esa manera, no se descargará ningún contenido adicional que la página cargada previamente pueda solicitar hasta que visites el vínculo.
Cómo evitar cargas previas innecesarias
Para evitar descargar contenido innecesario, puedes inhabilitar la carga previa de las páginas que se visitan con poca frecuencia configurando la propiedad prefetch de <Link> en 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> por pineapple-pizza.js con prefetch establecido en false:
Para inspeccionar la actividad de 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 pineapple-pizza.js no:
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 realizar el enrutamiento. Next.js te facilita esta tarea con la API de router disponible en next/router.
Si deseas realizar una acción (por ejemplo, enviar un formulario) antes de navegar a una ruta nueva, puedes definirlo en el código de enrutamiento personalizado.
Cuando usas componentes personalizados para el enrutamiento, también puedes agregarles carga 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 dentro del hook useEffect. Si la propiedad prefetch de una <MyLink> se establece en true, la ruta especificada en la propiedad href realiza una carga previa cuando se renderiza ese <MyLink>:
useEffect(() => {
if (prefetch) router.prefetch(href)
});
Cuando hagas clic en el vínculo, el enrutamiento se realizará en handleClick. Se registra un mensaje en la consola y el método push navega a la ruta nueva 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 una <MyLink> para margherita.js y una pineapple-pizza.js. La propiedad prefetch está configurada como true el /margherita y como 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 se descargó y que pineapple-pizza.js no:
Cuando haces clic en cualquiera de los vínculos, la consola registra "Divertirse con Next.js" y navega a la ruta nueva:
Conclusión
Cuando usas <Link>, Next.js carga automáticamente el código JavaScript necesario para renderizar la página vinculada, lo que agiliza la navegación a páginas nuevas. Si usas el enrutamiento personalizado, puedes usar la API de router de Next.js para implementar la carga previa. Evita descargar contenido innecesariamente. Para ello, inhabilita la carga previa de las páginas que se visitan con poca frecuencia.