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.
El componente <Link>
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/:
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
- Presiona `Control + Mayúsculas + J` (o `Command + Option + 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 está
descargado también:
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:
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 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:
Cuando hagas clic en cualquiera de los vínculos, la consola registrará “Diviértete con Next.js”. y navega a la nueva ruta:
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.