Saltearse al contenido

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

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.

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.

Terminal window
# 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.

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:

Terminal window
npm install @astrojs/prefetch

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

astro.config.mjs
import { defineConfig } from 'astro/config';
import prefetch from '@astrojs/prefetch';
export default defineConfig({
// ...
integrations: [prefetch()],
// ^^^^^^^^^^
});

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.

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.

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.

astro.config.mjs
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']",
}),
],
});

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.

astro.config.mjs
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']"
}),
],
});

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.

astro.config.mjs
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,
}),
],
});
  • 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.

Este paquete es mantenido por el equipo central de Astro. ¡Estás invitado a enviar un problema o PR!

Consulta el CHANGELOG.md para un historial de cambios en esta integración.

Otros

Frameworks UI

Adaptadores SSR

Otros