Fetch de datos en Astro con criterio de rendimiento

Trae datos desde APIs de forma robusta y decide qué se resuelve en build y qué en tiempo de petición.

En Astro, el fetch puede ejecutarse en el servidor durante build o durante request según el modo de render.

Esto te da flexibilidad para construir páginas ultrarrápidas con datos estables o páginas dinámicas con datos frescos.

No se trata de hacer fetch en cualquier lugar, sino de ubicarlo donde tenga sentido de coste y negocio.

También es importante gestionar fallos de red y estados vacíos para no romper la experiencia del usuario.

  • La mejor ubicación depende del tipo de dato y su frecuencia de cambio.
  • Si el dato cambia poco, resolverlo en build reduce latencia y simplifica infraestructura.
  • Si el dato cambia constantemente, conviene render dinámico o estrategias híbridas.
  • Siempre contempla fallback visual para errores y vacíos de datos.
  • Datos estables: preferencia por build-time.

Dónde y cuándo hacer fetch

La mejor ubicación depende del tipo de dato y su frecuencia de cambio.

Si el dato cambia poco, resolverlo en build reduce latencia y simplifica infraestructura.

Si el dato cambia constantemente, conviene render dinámico o estrategias híbridas.

Siempre contempla fallback visual para errores y vacíos de datos.

  • Datos estables: preferencia por build-time.
  • Datos volátiles: request-time o endpoints dedicados.
  • Evita sobrecargar APIs con fetch redundante por página.

Robustez básica de consumo

Un fetch útil incluye validación mínima y manejo de errores.

Astro
11

Fetch de datos en Astro con criterio de rendimiento

Trae datos desde APIs de forma robusta y decide qué se resuelve en build y qué en tiempo de petición.

Código del tema: Componentes Astro + render hibrido

📘 Teoría

Dónde y cuándo hacer fetch

La mejor ubicación depende del tipo de dato y su frecuencia de cambio.

Si el dato cambia poco, resolverlo en build reduce latencia y simplifica infraestructura.

Si el dato cambia constantemente, conviene render dinámico o estrategias híbridas.

Siempre contempla fallback visual para errores y vacíos de datos.

  • Datos estables: preferencia por build-time.
  • Datos volátiles: request-time o endpoints dedicados.
  • Evita sobrecargar APIs con fetch redundante por página.

Robustez básica de consumo

Un fetch útil incluye validación mínima y manejo de errores.

🧪 Aprende probando

Ejemplo Listado de datos remoto Renderizar una lista de items traídos por API.

🏁 Retos

Reto Reto: manejo de error HTTP Añade una validación de res.ok antes de parsear JSON.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre Astro.

Test de Astro

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com