Astro: framework web, arquitectura de islas y cero JavaScript

Astro es un framework web de nueva generación que rompe con el paradigma de enviar JavaScript masivo al navegador. Su filosofía central: HTML primero, JavaScript solo cuando es necesario. Este enfoque permite construir sitios estáticos y dinámicos con un rendimiento excepcional desde el primer byte.

Qué es Astro y por qué importa

Astro nace como respuesta a la complejidad y el peso de los frameworks tradicionales (React, Vue, Svelte) que hidratan toda la aplicación en el cliente. En su lugar, Astro genera HTML estático por defecto y permite hidratar solo las partes interactivas mediante su arquitectura de islas. El resultado: páginas que cargan instantáneamente, puntuaciones perfectas en Core Web Vitals y una experiencia de desarrollador que no sacrifica ergonomía.

Arquitectura de islas: hidratación selectiva

El concepto clave de Astro son las islas (islands). Una isla es un componente interactivo incrustado en un mar de HTML estático. Cada isla se hidrata de forma independiente, solo cuando es visible o necesaria, usando directivas como client:load, client:idle, client:visible o client:media.

---
import Contador from './components/Contador.svelte';
---

<div class="hero">
  <h1>Bienvenido a mi sitio estático</h1>
  <Contador client:visible />
</div>

Esta arquitectura permite mezclar cualquier framework (React, Vue, Svelte, Solid, Preact) en el mismo proyecto sin penalización de rendimiento: cada isla carga su propio runtime solo si se hidrata.

Cero JavaScript por defecto

Por defecto, un componente .astro no envía ningún JavaScript al cliente. El código dentro del frontmatter (entre ---) se ejecuta en el servidor o en tiempo de build, y solo el HTML resultante llega al navegador. Esto elimina la hidratación completa, el bundle de router, y el overhead de state management global para páginas que no lo necesitan.

---
// Este código SOLO se ejecuta en el servidor
const datos = await fetch('https://api.ejemplo.com/datos').then(r => r.json());
---

<ul>
  {datos.map(item => <li>{item.nombre}</li>)}
</ul>

Sistema de enrutamiento basado en archivos

Astro usa un enrutamiento por convención en src/pages/. Cada archivo .astro, .md o .mdx se convierte automáticamente en una ruta. Soporta rutas dinámicas ([slug].astro), parámetros opcionales y catch-all routes ([...slug].astro).

src/pages/
├── index.astro          → /
├── blog/
│   ├── index.astro      → /blog
│   └── [slug].astro     → /blog/:slug
└── [...ruta].astro      → /*

Integración de contenido: Markdown, MDX y Content Collections

Astro brilla en sitios de contenido. Sus Content Collections (src/content.config.ts) definen esquemas Zod para validar frontmatter de Markdown/MDX, proporcionando type safety y autocompletado en el editor. El query engine permite filtrar, ordenar y paginar colecciones con una API fluida.

// src/content.config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = { blog };

---
import { getCollection } from 'astro:content';
const posts = await getCollection('blog', ({ data }) => data.pubDate > new Date('2024-01-01'));
---

{posts.map(post => <article><h2>{post.data.title}</h2></article>)}

Rendimiento: métricas reales

Métrica	Astro (promedio)	Next.js (promedio)	Remix (promedio)
TTFB	~50 ms	~120 ms	~100 ms
FCP	~0.8 s	~1.5 s	~1.3 s
LCP	~1.2 s	~2.1 s	~1.8 s
TBT	~0 ms	~150 ms	~80 ms
JS enviado (KB)	0-15	80-200	60-140

Fuente: HTTP Archive 2024, median mobile.

Ecosistema e integraciones oficiales

Astro mantiene integraciones oficiales para:

• UI: Tailwind CSS, UnoCSS, Partytown (terceros en web workers)
• CMS: Contentful, Sanity, Strapi, WordPress, Notion
• Búsqueda: Algolia, Pagefind (estático, sin servidor)
• Analytics: Plausible, Umami, Google Analytics (con Partytown)
• Despliegue: Vercel, Netlify, Cloudflare Pages, AWS, Docker

Cuándo elegir Astro (y cuándo no)

Escenario	¿Astro?
Blog, documentación, marketing site, portfolio	✅ Ideal
E-commerce con carrito complejo	⚠️ Posible (islas para carrito/checkout)
Dashboard / SaaS con estado global intensivo	❌ Mejor Next.js, Remix, TanStack Router
App mobile híbrida (Capacitor)	❌ No es su foco
Migración gradual de React/Vue existente	✅ Excelente (adopción incremental)

Conclusión

Astro representa un cambio de paradigma en el desarrollo web: deja de enviar frameworks al navegador y empieza a enviar HTML semántico, cachable y rápido. Su arquitectura de islas, cero JS por defecto y content collections lo convierten en la mejor opción para sitios donde el contenido y el rendimiento son prioritarios. Si construyes un blog, una documentación, un sitio corporativo o un landing page, Astro debería ser tu primera elección.

Fuentes y Aclaraciones

Fuentes

1. Documentación oficial de Astro: https://docs.astro.build
2. HTTP Archive 2024 - State of the Web
3. Astro Islands Architecture RFC

Aclaraciones

1. [1] Isla: Unidad de hidratación independiente en Astro; componente interactivo en HTML estático.
2. [2] Hidratación: Proceso de adjuntar event listeners y estado React/Vue/Svelte a HTML estático.
3. [3] TTFB: Time To First Byte; latencia hasta recibir el primer byte de la respuesta.
4. [4] FCP: First Contentful Paint; cuando el navegador renderiza el primer contenido visible.
5. [5] LCP: Largest Contentful Paint; cuando el elemento visible más grande termina de renderizarse.
6. [6] TBT: Total Blocking Time; tiempo total en que el hilo principal está bloqueado >50 ms.

En esta misma línea, Ling aborda el Sistema Ling de Gimnasia Sueca: las cuatro ramas, el análisis anatómico del movimiento, la masoterapia y las bases de la.