prefetchAll y defaultStrategy: precarga por defecto

Marcar enlace por enlace con data-astro-prefetch es preciso, pero no siempre es lo que quieres: en una documentación densa, en un blog muy enlazado o en un sitio pequeño donde casi cualquier destino es plausible, anotar cada ancla a mano es tedioso y frágil. Para esos casos Astro ofrece la palanca global: prefetchAll convierte todos los enlaces internos en candidatos a precarga sin tocar el marcado, y defaultStrategy decide con qué apetito lo hace. Son dos perillas pequeñas con consecuencias grandes, porque mueven la apuesta de la escala del enlace a la escala del sitio entero.

prefetchAll: todos los enlaces son candidatos

Cuando el objeto de configuración prefetch recibe prefetchAll: true, Astro invierte la política por defecto: en vez de precargar solo lo que marcas, precarga todo enlace interno, lo hayas anotado o no.

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: {
    prefetchAll: true,
  },
});

El atributo data-astro-prefetch deja entonces de ser un opt-in y se convierte en algo que ya no necesitas escribir. Pero el control no desaparece, solo cambia de signo: ahora sirve para excluir. Un enlace que no quieres precargar —porque apunta a una página cara, a una descarga o a una acción destructiva— se marca con el valor false.

<a href="/informe-pesado" data-astro-prefetch="false">Informe completo</a>

Ese giro de lista de invitados a lista de vetados es la esencia de prefetchAll. En un sitio donde la mayoría de los destinos merece precarga, invertir la política ahorra ruido en el marcado: escribes la excepción, no la regla.

En un sitio donde la mayoría no la merece, prefetchAll es justo lo contrario de lo que quieres, y conviene quedarse en el modelo de opt-in de la lección anterior. La palanca no es buena ni mala en abstracto: depende de si la regla que promulga es cierta para tu sitio.

defaultStrategy: el apetito global

La segunda perilla decide cómo precarga todo lo que has decidido precargar. defaultStrategy fija la estrategia que se aplica a los enlaces con data-astro-prefetch sin valor y —cuando prefetchAll está activo— a todos los enlaces del sitio.

// astro.config.mjs
export default defineConfig({
  prefetch: {
    prefetchAll: true,
    defaultStrategy: 'viewport',
  },
});

El valor por defecto de defaultStrategy es hover, la estrategia más equilibrada. Elevarlo a viewport o a load combinado con prefetchAll es la configuración más agresiva posible: literalmente todos los enlaces que aparecen en pantalla —o todos los de la página— se precargan.

Bajarlo a tap es la más tímida: aun con prefetchAll, cada enlace solo se trae en el instante previo a su clic, lo que reduce el gasto a casi cero a cambio de una aceleración modesta.

La combinación de las dos perillas dibuja un espectro. prefetchAll decide el alcance —cuántos enlaces entran en juego— y defaultStrategy decide el momento —cuándo se dispara cada uno—. Un prefetchAll amplio con una defaultStrategy de tap es una posición perfectamente razonable: cubres todo el sitio pero pagas tardísimo, cuando el clic ya es casi seguro. La torpeza está en subir ambas a la vez sin pensar.

Cuándo ayuda y cuándo desperdicia

La pregunta que gobierna esta lección no es técnica sino económica: ¿cuándo la precarga agresiva compra velocidad y cuándo solo quema datos? La respuesta depende de dos magnitudes que ya conoces —probabilidad de visita y coste del destino— más una tercera: la red del visitante.

La precarga agresiva ayuda cuando la probabilidad de navegación interna es alta y los destinos son baratos: una documentación que se lee saltando de página en página, un asistente por pasos, un sitio pequeño con pocas rutas muy visitadas. Ahí, precargar de más acierta casi siempre, y cada acierto convierte una espera de red en una lectura de caché instantánea.

La precarga agresiva desperdicia cuando la probabilidad por enlace es baja o los destinos son caros: un índice con cientos de resultados de los que se abre uno, una tienda con miles de fichas, cualquier página con más enlaces que atención tiene el visitante.

Ahí prefetchAll con load descarga decenas de documentos que nadie mirará, y ese gasto no es abstracto: es batería, es cuota de datos móviles, es carga sobre tu propio servidor o CDN multiplicada por cada visita.

Recetas por tipo de sitio

No hay una configuración universal, pero sí arquetipos. Para una documentación o un blog muy enlazados, donde el visitante salta de página en página y los documentos son ligeros, un alcance amplio con un momento moderado rinde de maravilla.

// astro.config.mjs — sitio de contenido muy navegado
export default defineConfig({
  prefetch: {
    prefetchAll: true,
    defaultStrategy: 'hover',
  },
});

Para un catálogo o un buscador con cientos de resultados, donde cada enlace tiene poca probabilidad individual y el gasto se dispara, conviene lo contrario: alcance amplio pero momento tardío, o directamente volver al marcado selectivo.

// astro.config.mjs — catalogo con muchos enlaces poco probables
export default defineConfig({
  prefetch: {
    prefetchAll: true,
    defaultStrategy: 'tap',
  },
});

La lección de las recetas no es memorizarlas, sino ver que la misma feature adopta caras opuestas según la forma del sitio. La configuración correcta no se hereda de un tutorial: se deduce de cómo navega tu público real.

flowchart TD
P[probabilidad de clic por enlace] --> D[decision de alcance]
C[coste del destino y de la red] --> D
D -->|alta probabilidad y bajo coste| AG[prefetchAll con hover o viewport]
D -->|baja probabilidad o alto coste| CO[opt-in por enlace con tap]
AG --> W[muchos aciertos por byte]
CO --> W
style P fill:#89b4fa,color:#11111b
style C fill:#89b4fa,color:#11111b
style W fill:#a6e3a1,color:#11111b