Astro: Construyendo Sitios Web Ultrarrápidos con Islands Architecture

Astro ha revolucionado la forma de construir sitios web orientados a contenido. Su filosofía es radical: envía cero JavaScript al navegador por defecto. Solo añade JS donde realmente lo necesitas, a través del concepto de “islas de interactividad”.

¿Por qué Astro?

Comparativa de JavaScript enviado al navegador

Framework	JS para un blog post
Next.js (React)	~80-150KB
Nuxt (Vue)	~60-120KB
SvelteKit	~30-60KB
Astro	~0KB (sin islas)

Estructura de un proyecto Astro

src/
├── components/     # Componentes .astro
├── layouts/        # Layouts reutilizables
├── pages/          # Rutas basadas en archivos
├── content/        # Content Collections
└── styles/
public/              # Assets estáticos

Componentes Astro: Lo básico

---
// Esto se ejecuta en BUILD TIME, no en el navegador
import Header from '../components/Header.astro';

interface Props {
  title: string;
}

const { title } = Astro.props;
const data = await fetch('https://api.example.com/data').then(r => r.json());
---

<html lang="es">
  <head>
    <title>{title}</title>
  </head>
  <body>
    <Header />
    <h1>{title}</h1>
    <slot />
  </body>
</html>

Islands Architecture: Islas de Interactividad

---
import StaticHeader from '../components/Header.astro';
import ReactCounter from '../components/Counter.jsx';
import VueSearch from '../components/Search.vue';
---

<StaticHeader />

<main>
  <h1>Mi página</h1>
  <ReactCounter client:visible />
  <VueSearch client:idle />
</main>

Directivas `client:*`

Directiva	Cuándo se hidrata	Caso de uso
`client:load`	Inmediatamente	Elementos above the fold interactivos
`client:idle`	Cuando el navegador está idle	Componentes no críticos
`client:visible`	Cuando entra en viewport	Componentes below the fold
`client:only`	Solo cliente	Componentes que usan APIs del navegador

Content Collections: Contenido tipado

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

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

View Transitions

---
import { ClientRouter } from 'astro:transitions';
---

<html>
  <head>
    <ClientRouter />
  </head>
  <body>
    <h1 transition:name="title">Mi Título</h1>
    <img transition:name="hero" src="/hero.jpg" />
  </body>
</html>

Conclusión

Astro es la elección perfecta cuando tu prioridad es rendimiento y contenido. Si estás construyendo un blog, portfolio, documentación o landing page, Astro debería ser tu primera opción.