Astro framework: guía completa

La arquitectura de islas (islands) es el concepto central de Astro. Cada página se renderiza como HTML estático, y solo los componentes que necesitan interactividad (un carrusel, un formulario, un menú) se hidratan con JavaScript. El resto de la página permanece como HTML puro, sin coste de JavaScript.

Esto contrasta con frameworks SPA como React o Vue, donde toda la página se hidrata con JavaScript aunque el 90% del contenido sea estático. En Astro, un blog con un comentario interactivo solo envía JavaScript para el componente de comentarios, no para el artículo completo.

Astro incluye un sistema nativo de Content Collections que permite definir, validar y consultar contenido local (Markdown, MDX, JSON, YAML) con esquemas tipados usando Zod. Cada colección tiene su schema, y Astro genera tipos TypeScript automáticamente.

Para proyectos headless, Astro se integra con cualquier CMS que exponga una API: Strapi, Contentful, Sanity, WordPress (REST/GraphQL), Directus. Los datos se obtienen en build time (SSG) o en request time (SSR) según la configuración de cada ruta.

Astro soporta tres modos de renderizado: estático (SSG), servidor (SSR) y híbrido. En modo estático, todas las páginas se pre-renderizan en build time y se sirven desde CDN. En modo servidor, las páginas se generan en cada request. En modo híbrido, cada ruta puede elegir su estrategia.

Para sitios de contenido con actualizaciones infrecuentes, SSG ofrece el mejor rendimiento y los menores costes de hosting. Para rutas que requieren personalización, autenticación o datos en tiempo real, SSR es la opción adecuada. Astro permite combinar ambos en el mismo proyecto sin configuración compleja.

Astro produce las puntuaciones Lighthouse más altas entre los frameworks principales. Un sitio Astro típico obtiene 100/100 en Performance con páginas que pesan menos de 50KB de HTML y cero KB de JavaScript (salvo islas interactivas). Los tiempos de First Contentful Paint (FCP) y Largest Contentful Paint (LCP) están por debajo de 1 segundo en la mayoría de casos.

La optimización de imágenes integrada (astro:assets) genera automáticamente formatos modernos (WebP, AVIF), múltiples tamaños y lazy loading. Las fuentes, estilos y scripts se optimizan automáticamente con scope CSS por componente y eliminación de código no utilizado.

Astro tiene un catálogo creciente de integraciones oficiales y de comunidad: Tailwind CSS, MDX, Sitemap, RSS, React, Vue, Svelte, Partytown (para scripts de terceros), y adaptadores de deploy para Node.js, Vercel, Netlify, Cloudflare y Deno.

La integración con UI frameworks es una ventaja diferencial: puedes usar componentes React para un widget interactivo, Vue para otro, y Svelte para un tercero, todo en la misma página Astro. Cada framework solo se carga donde se usa, sin penalizar el rendimiento global.

Astro es la opción óptima para sitios donde el contenido es el protagonista: blogs, documentación, webs corporativas, portfolios, landing pages y sitios de marketing. También funciona bien para ecommerce con catálogos medianos donde el rendimiento es crítico.

No es la mejor opción para aplicaciones web altamente interactivas (dashboards, editores, herramientas colaborativas) donde la mayor parte de la interfaz requiere hidratación. Para esos casos, Next.js o Remix ofrecen un modelo de renderizado más adecuado al volumen de interactividad.