@astrojs/prefetch

NOTA: @astrojs/prefetch es obsoleto. Utiliza la función prefetch en Astro 3.5 en su lugar. Consulta la guía de migración.

¿Por qué Prefetch?

Los tiempos de carga de página juegan un papel importante en la usabilidad y la experiencia general de un sitio. Esta integración brinda los beneficios de las navegaciones de página casi instantáneas a tu aplicación multipágina (MPA) mediante la precarga de los enlaces de página cuando son visibles en la pantalla.

Para mejorar aún más la experiencia, especialmente en páginas similares, las hojas de estilo también se precargan junto con el HTML. Esto es particularmente útil al navegar entre pestañas en un sitio estático, donde la mayoría del contenido y los estilos de la página no cambian.

Instalación

Instalación rápida

La herramienta de línea de comandos astro add automatiza la instalación por ti. Ejecuta uno de los siguientes comandos en una nueva ventana de terminal. (Si no estás seguro de qué administrador de paquetes estás usando, ejecuta el primer comando.) Luego, sigue las indicaciones y escribe “y” en la terminal (que significa “sí”) para cada una.

# Usando NPM
npx astro add prefetch
# Usando Yarn
yarn astro add prefetch
# Usando PNPM
pnpm astro add prefetch

Si tienes algún problema, no dudes en informarnos en GitHub y prueba los pasos de instalación manual a continuación.

Instalación manual

Primero, instala el paquete @astrojs/prefetch usando tu administrador de paquetes. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:

npm install @astrojs/prefetch

Luego, aplica esta integración a tu archivo astro.config.* usando la propiedad integrations:

import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

export default defineConfig({
  // ...
  integrations: [prefetch()],
  //             ^^^^^^^^^^
});

Uso

Cuando se instala la integración, el script de prefetch se agrega automáticamente a todas las páginas del proyecto. Solo agrega rel="prefetch" a cualquier enlace <a /> en tu página ¡y estás listo para comenzar!

Además, puedes agregar rel="prefetch-intent" a cualquier enlace <a /> en tu página para precargarlos solo cuando se les haga hover, se toquen o se enfoquen. Esto es especialmente útil para conservar el uso de datos al ver tu sitio.

Configuración

La integración de Prefetch de Astro maneja qué enlaces del sitio se precargan y tiene sus propias opciones. Puedes cambiarlas en el archivo astro.config.mjs donde se encuentran las configuraciones de integración de tu proyecto.

config.selector

Por defecto, el script de prefetch busca en la página cualquier enlace que incluya el atributo rel="prefetch" attribute, por ejemplo: <a rel="prefetch" /> o <a rel="nofollow prefetch" />. Este comportamiento se puede cambiar en el archivo astro.config.* para usar un selector de consulta personalizado al buscar enlaces de prefetch.

import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

export default defineConfig({
  // ...
  integrations: [
    prefetch({
      // Solo precargan los enlaces que tienen un `href` que comienza con `/productos`.
      selector: "a[href^='/products']",
    }),
  ],
});

config.intentSelector

Por defecto, el script de precarga también busca en la página cualquier enlace que incluya el atributo rel="prefetch-intent", p. ej: <a rel="prefetch-intent" />. Este comportamiento se puede cambiar en tu archivo astro.config.* para utilizar un selector de consulta personalizado al encontrar enlaces de prefetch-intent.

import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

export default defineConfig({
  // ...
  integrations: [
    prefetch({
      // Prefetch solamente los enlaces cuyo atributo `href` comience con `/products` o `/coupons`.
      intentSelector: ["a[href^='/products']", "a[href^='/coupons']"],

      // Utiliza un string para precargar un selector único.
      // intentSelector: "a[href^='/products']"
    }),
  ],
});

config.throttle

Por defecto, el script de prefetch solo precargará un enlace a la vez. Este comportamiento puede ser cambiado en tu archivoastro.config.* para aumentar el límite de descargas simultáneas.

import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';

export default defineConfig({
  // ...
  integrations: [
    prefetch({
      // Permitir que hasta tres enlaces se precargen concurrentemente.
      throttle: 3,
    }),
  ],
});

Solución de problemas

Si tu instalación no parece funcionar, intenta reiniciar el servidor de desarrollo.
Si un enlace no parece estar precargando, asegúrate de que el enlace apunte a una página en el mismo dominio y coincida con la opción selector de la integración.

Para obtener ayuda, consulta el canal de #support en Discord. ¡Nuestros amables miembros del equipo de soporte están aquí para ayudar!

Puedes revisar nuestra Documentación de integración de Astro para obtener más información sobre integraciones.