Skip to content
About Blog Aprender Explorar patronas Case studies
En esta página
  • ¿Que aprenderá?
  • El componente <Link>
  • Cómo funciona la precarga automática
  • Evite la precarga innecesaria
  • Precarga con enrutamiento personalizado
  • Conclusión

Precarga de rutas en Next.js

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

Nov 8, 2019 — Actualizado Aug 12, 2022
Appears in: React
Milica Mihajlija
Milica Mihajlija
TwitterGitHubHomepage
En esta página
  • ¿Que aprenderá?
  • El componente <Link>
  • Cómo funciona la precarga automática
  • Evite la precarga innecesaria
  • Precarga con enrutamiento personalizado
  • Conclusión

¿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/:

Captura de pantalla de un directorio de páginas que contiene tres archivos: index.js, margherita.js y pineapple-pizza.

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 fullscreen.

  1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  2. Click the Network tab.

  3. Select the Disable cache checkbox.

  4. Reload the page.

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

Pestaña DevTools Network con margherita.js resaltado.

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.

Precaución

Los ejemplos de fallas se ejecutan en modo de producción porque la precarga depende de las condiciones de navegación y está habilitada solo en compilaciones de producción optimizadas. Para cambiar al modo de desarrollo, verifique el archivo README.md en los ejemplos de Glitch.
Debido a que <link rel="preload"> solicita recursos con prioridad alta, el navegador espera que se utilicen de inmediato, lo que activa las advertencias de la consola. Las sugerencias de prioridad pronto estarán disponibles en Chrome, lo que permitirá que Next.js indique una prioridad más baja para los recursos que no se necesitan de inmediato con <link rel="preload" fetchpriority="low">.

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:

Pestaña Red de DevTools con margherita.js resaltado.

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:

Pestaña Red de DevTools con margherita.js resaltado.

Al hacer clic en cualquiera de los enlaces, la Consola registra "Divertirse con Next.js." y navega a la nueva ruta:

La consola DevTools muestra el mensaje 'Divertirse con Next.js.'

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.

Última actualización: Aug 12, 2022 — Mejorar el artículo
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Case studies
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos los productos
  • Condiciones y privacidad
  • Principios de la Comunidad

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.