Prefetch automático en SvelteKit

En SvelteKit, cuando usas un componente <a> para navegar entre rutas internas, el framework hace prefetch automáticamente a la página de destino al hacer hover sobre el enlace.

Esto significa que en cuanto el usuario pasa el mouse por encima del enlace, SvelteKit inicia una solicitud para precargar la ruta.

Este comportamiento mejora el rendimiento perceptual, ya que las páginas internas se sienten más rápidas al hacer clic.

Sin embargo, no siempre es ideal.

💥 El problema

En uno de mis componentes, noté un comportamiento curioso al hacer hover sobre un enlace dinámico como este:

<a
  href={lesson.url + lesson.slug}
  class="lesson-card flex flex-col justify-between p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg transition-transform duration-300 hover:-translate-y-2">
  Hola, haz hover sobre este link
</a>

Cada vez que pasaba el cursor sobre el enlace, SvelteKit disparaba una nueva solicitud de prefetch.

Incluso si ya había pasado antes, cada hover adicional generaba una nueva petición (aunque en muchos casos con respuesta 304 Not Modified si el navegador la tenía cacheada).

Esto puede no parecer un gran problema… pero imagina si ese endpoint devuelve una gran cantidad de datos o si el servidor necesita procesar cada solicitud.

En ese caso, estás agregando una carga innecesaria al servidor y al cliente, lo que puede afectar el rendimiento general de tu sitio.

⚠️ Nota: Este comportamiento solo aplica a rutas internas manejadas por SvelteKit.

Enlaces externos no se prefetchéan automáticamente.

✅ La solución: usar rel="external" cuando lo necesites

Este comportamiento puedes deshabilitarlo con el atributo rel="external":

<a
  href={lesson.url + lesson.slug}
  rel="external"
  class="lesson-card flex flex-col justify-between p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg transition-transform duration-300 hover:-translate-y-2">
  Hola, haz hover sobre este link
</a>

Esto le indica a SvelteKit que el enlace debe tratarse como externo, y por tanto no aplicará navegación interna ni hará prefetch.

🎯 Entonces... ¿prefetch sí o no?

Mi objetivo no es decirte que evites el prefetch automático, sino que sepas cuándo es conveniente.

✅ Úsalo cuando:

• Las rutas internas son ligeras.
• Quieres una experiencia rápida y fluida.
• Tienes control total sobre el backend y puedes responder eficientemente.

🚫 Considera desactivarlo cuando:

• Generas enlaces dinámicamente y cambian constantemente.
• Las rutas internas apuntan a contenido pesado.
• Necesitas controlar exactamente cuándo se hace la solicitud.

🧠 Conclusión

El prefetch automático es una gran funcionalidad de SvelteKit que mejora la experiencia de usuario, pero puede volverse contraproducente si no lo manejas bien.

Conocer cómo y cuándo se dispara te permite tomar decisiones más informadas para mantener tu app rápida y eficiente.

Espero que este post te haya sido útil 🙌