Astro

¿Qué es Astro?

Astro es un framework web de código abierto para sitios centrados en el contenido, como blogs, documentación, páginas de marketing y tiendas. Por defecto renderiza las páginas a HTML estático en la compilación y envía JavaScript al navegador solo para las partes interactivas que elijas, llamadas islas. Escribes las páginas como componentes y puedes usar React y otros frameworks de interfaz dentro de ellas.

La documentación de Astro indica actualmente la versión 7 como la última versión mayor (consultado en octubre de 2026).

Cómo funciona Astro

Estático primero, bajo demanda cuando hace falta

El modo de salida por defecto es estático: las páginas y los endpoints se prerrenderizan a HTML en la compilación, el modelo de la generación de sitios estáticos. Para renderizar una ruta en cada petición añades un adaptador de servidor (Node, Netlify, Cloudflare, Vercel y otros) y pones export const prerender = false en esa página. Con output: 'server' inviertes el valor por defecto y todas las páginas se renderizan bajo demanda, como en el renderizado en el servidor.

Islas y cero JavaScript por defecto

Astro elimina el JavaScript del lado del cliente de los componentes de interfaz salvo que lo actives. Una directiva client:* convierte un componente en una isla interactiva que se hidrata por separado: client:load lo hace de inmediato, client:idle cuando el navegador está libre y client:visible cuando el componente entra en el área visible. Todo lo que rodea a la isla sigue siendo HTML plano. Los detalles están en la documentación de islas de Astro. Las islas de servidor (server:defer) funcionan al revés: una pieza dinámica se renderiza aparte en el servidor mientras el resto de la página muestra un marcador de posición.

Colecciones de contenido

Las colecciones de contenido gestionan conjuntos de contenido similar, como las entradas de un blog. Se definen en src/content.config.ts con un loader (glob() lee archivos Markdown, MDX, JSON y YAML; file() lee un solo archivo) y un esquema Zod opcional que valida el front matter y genera tipos de TypeScript. Un archivo que incumple el esquema hace fallar la compilación en lugar de llegar a producción.

Ejemplo

En una página de producto, la cabecera, la descripción y las imágenes son HTML estático. El botón "Añadir al carrito" es un componente de React con client:visible, así que su JavaScript solo se descarga cuando el visitante llega hasta él. Una franja de "vistos recientemente" que depende del usuario puede ser una isla de servidor con marcador de posición. El resto del sitio sigue siendo cacheable en una CDN.

Errores comunes

• Poner client:load en todos los componentes. Eso envía el mismo JavaScript que una aplicación de una sola página y elimina la ventaja principal.
• Elegir Astro para un panel tipo aplicación con mucho estado compartido en el cliente. Un framework pensado para aplicaciones de una sola página como Next.js puede encajar mejor.
• Olvidar el adaptador. Sin él, una página no se puede renderizar bajo demanda.
• Suponer que estático significa que no hay nada que probar. Los formularios, los endpoints de API, las rutas bajo demanda y las islas de servidor siguen ejecutándose en un servidor y pueden ralentizarse con tráfico.

Astro, pruebas de rendimiento y monitorización

Una compilación estática de Astro servida desde una CDN suele tener un tiempo hasta el primer byte bajo, pero eso se mide, no se supone. Sigue las puntuaciones de Lighthouse y las Core Web Vitals a lo largo del tiempo con la monitorización de velocidad de página y haz una comprobación puntual con el verificador de Core Web Vitals. Para convertir las cifras en límites que hagan fallar una compilación, lee cómo fijar presupuestos de rendimiento para aplicaciones web. Si renderizas rutas bajo demanda, una prueba de carga muestra cómo se comportan con tráfico concurrente. Como alternativa entre generadores, compara con Eleventy. Para el trabajo general de velocidad, consulta la guía para monitorizar las Core Web Vitals con alertas.

Preguntas frecuentes (FAQ)

¿Es Astro un generador de sitios estáticos?

En gran parte, sí. Su salida por defecto es HTML estático generado de antemano. También puede renderizar páginas bajo demanda si añades un adaptador de servidor, así que cubre sitios estáticos y renderizados en servidor.

¿Es Astro bueno para el SEO?

Las páginas llegan como HTML completo, por lo que los buscadores pueden leer el contenido sin ejecutar JavaScript, y enviar menos JavaScript ayuda a las métricas de carga. El posicionamiento sigue dependiendo de la calidad del contenido y del resto del sitio.

¿Puedo usar React, Vue o Svelte con Astro?

Sí. Astro tiene integraciones para frameworks de interfaz como React, y con una integración usas sus componentes como islas. Puedes mantener la mayor parte de la página en componentes de Astro e hidratar solo lo que necesita interacción.

¿Qué son las islas de Astro?

Una isla es un componente de interfaz interactivo dentro de una página por lo demás estática. Se hidrata por separado del resto de la página, de modo que solo se carga el JavaScript que necesita.