Precarga de rutas en Next.js
Cómo acelera Next.js la navegación con la precarga de rutas y cómo personalizarla.
¿Que aprenderá? #
En esta publicación, aprenderá 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 sus necesidades.
El componente <Link> #
En Next.js, no es necesario configurar el enrutamiento manualmente. Next.js usa un enrutamiento basado en el sistema de archivos, lo que le permite crear archivos y carpetas dentro del directorio ./pages/:
Para enlazar a diferentes páginas, use el componente <Link>, de manera similar a como usaría el viejo elemento <a>:
<Link href="/margherita">
<a>Margherita</a>
</Link>Cuando usa el elemento <Link> para la navegación, Next.js hace un poco más por usted. Normalmente, una página se descarga cuando usted sigue un enlace a ella, pero Next.js busca automáticamente el JavaScript necesario para renderizar la página.
Cuando carga una página con algunos enlaces, lo más probable es que cuando siga un enlace, el componente detrás de él ya se haya cargado. Esto mejora la capacidad de respuesta de la aplicación al agilizar la navegación a nuevas páginas.
En la aplicación de ejemplo a continuación, la página index.js se enlaza a margherita.js con un <Link>:
Utilice Chrome DevTools para verificar que margherita.js se haya precargado: 1. To preview the site, press View App. Then press Fullscreen 
.
Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
Click the Network tab.
Select the Disable cache checkbox.
Reload the page.
Cuando usted carga index.js, la pestaña Red muestra que margherita.js se descarga también:
Cómo funciona la precarga automática #
Next.js precarga solo los enlaces que aparecen en la ventana gráfica y usa la API observador de intersecciones para detectarlos. También deshabilita la precarga cuando la conexión de red es lenta o cuando los usuarios tienen activada la función Save-Data. Según estas comprobaciones, Next.js inyecta dinámicamente las etiquetas <link rel="preload"> para descargar componentes para navegaciones posteriores.
Next.js solo lee JavaScript; no lo ejecuta. De esa manera, no descargará ningún contenido adicional que la página precargada pueda solicitar hasta que visite el enlace.
Evite la precarga innecesaria #
Para evitar la descarga de contenido innecesario, puede deshabilitar la precarga para las páginas poco visitadas si establece la propiedad prefetch en <Link> como false:
<Link href="/pineapple-pizza" prefetch={false}>
<a>Pineapple pizza</a>
</Link>En esta segunda aplicación de ejemplo, la página index.js tiene un <Link> a pineapple-pizza.js con el parámetro prefetch establecido en false:
Para inspeccionar la actividad de la red, siga los pasos del primer ejemplo. Cuando carga index.js , la pestaña Red de DevTools muestra que se descargó margherita.js, pero no pineapple-pizza.js:
Precarga con enrutamiento personalizado #
El componente <Link> es adecuado para la mayoría de los casos de uso, pero también puede crear su propio componente para realizar el enrutamiento. Next.js se lo facilita con la API de enrutador disponible en next/router. Si desea hacer algo (por ejemplo, enviar un formulario) antes de navegar hacia una nueva ruta, puede definirlo en su código de ruta personalizado.
Cuando utiliza componentes personalizados para el enrutamiento, también puede agregarles la precarga. Para llevar a cabo la precarga en el código de enrutamiento, utilice el método prefetch de useRouter.
Échele un vistazo a components/MyLink.js en esta aplicación de ejemplo:
La precarga se realiza dentro del gancho useEffect. Si la propiedad prefetch en un <MyLink> se establece en true, la ruta especificada en la href se precarga cuando se representa ese <MyLink>:
useEffect(() => {
if (prefetch) router.prefetch(href)
});Cuando hace clic en el enlace, 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 aplicación de ejemplo, la página index.js tiene un <MyLink> para margherita.js y para pineapple-pizza.js. La propiedad prefetch se establece en true para /margherita y en false para /pineapple-pizza.
<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza" title="Pineapple pizza" prefetch={false} />Cuando usted carga index.js, la pestaña Red muestra que margherita.js se descarga y pineapple-pizza.js no:
Al hacer clic en cualquiera de los enlaces, la Consola registra "Divertirse con Next.js." y navega a la nueva ruta:
Conclusión #
Cuando se usa <Link>, Next.js busca automáticamente el JavaScript necesario para representar la página enlazada, lo que agiliza la navegación a nuevas páginas. Si está utilizando el enrutamiento personalizado, puede usar la API del enrutador Next.js para implementar la precarga usted mismo. Evite descargar contenido innecesariamente al desactivar la precarga las páginas poco visitadas.