Astro: el framework web para sitios orientados al contenido

El problema que Astro viene a resolver

Los frameworks modernos de frontend, React, Vue, Next.js, Nuxt, nacieron para construir aplicaciones web interactivas. Son excelentes en ese trabajo. Pero con el tiempo se convirtieron en la respuesta automática para todo tipo de proyectos, incluyendo muchos que no necesitan ni la décima parte de lo que ofrecen.

El resultado es predecible: sitios de contenido, blogs, páginas de marketing, documentación, e-commerce, que envían cientos de kilobytes de JavaScript al navegador del usuario solo para mostrar texto e imágenes. Tiempo de carga alto, Core Web Vitals sufriendo, SEO afectado.

Astro parte de una pregunta diferente: ¿qué pasaría si el JavaScript fuera la excepción, no la norma?

¿Qué es Astro?

Astro es un framework web all-in-one orientado a sitios de contenido. Su premisa central es simple: renderizá todo lo que podés en el servidor, enviá HTML estático al cliente y cargá JavaScript únicamente donde hay interactividad real.

No es una idea nueva, pero Astro la llevó más lejos que cualquier alternativa anterior con lo que llamaron Islands Architecture.

Islands Architecture: el concepto que cambia el juego

La arquitectura de islas es la innovación técnica central de Astro y vale la pena entenderla bien.

En un framework tradicional basado en componentes, cuando el navegador carga una página, hidrata toda la aplicación. Aunque el 90% de los componentes sean puramente estáticos, el JavaScript necesario para potencialmente hacerlos interactivos se descarga y ejecuta de todas formas.

Astro invierte ese modelo: la página se renderiza como HTML estático por defecto. Las partes interactivas, un carrito de compras, un slider, un formulario con validación client-side, son "islas" que se hidratan de forma independiente y solo cuando es necesario.

┌─────────────────────────────────────────────┐
│              Página Astro                           │
│                                                     │
│  [Header estático - HTML puro]                      │
│                                                     │
│  [Artículo - HTML puro]                             │
│                                                     │
│  ┌─────────────────────┐                        │
│  │  🏝️ Isla: Carrito       │  ← JS cargado         │
│  │  (React component)      │                        │
│  └─────────────────────┘                        │
│                                                     │
│  [Footer estático - HTML puro]                      │
└─────────────────────────────────────────────┘

Esto evita los grandes payloads de JavaScript que ralentizan muchos frameworks modernos y tiene un impacto directo en los Core Web Vitals: menos JavaScript inicial significa menor LCP, mejor FID y CLS más estable.

Características principales

Zero JS por defecto Astro no incluye JavaScript en el cliente a menos que explícitamente lo necesites. Para la mayoría de las páginas de contenido, eso significa archivos más livianos y tiempos de carga notablemente más rápidos.

UI-agnóstico No estás obligado a elegir un solo framework de componentes. Astro soporta React, Preact, Vue, Svelte, Solid, HTMX y web components. Podés usar diferentes frameworks en el mismo proyecto, o ninguno.

Server-first El rendering pesado ocurre en el servidor, no en el dispositivo del usuario. Para sitios con mucho contenido, esto significa menos trabajo en el cliente y mejor experiencia en dispositivos de gama baja.

Content Collections Una de las funcionalidades más útiles para blogs y documentación: un sistema para organizar, validar y tipar con TypeScript el contenido en Markdown o MDX. Definís un esquema, Astro lo valida y te da autocompletado e inferencia de tipos en todo el proyecto.

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

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

export const collections = { blog };

Altamente personalizable Cientos de integraciones disponibles: Tailwind CSS, MDX, sitemap automático, image optimization, y más. También soporta SSG (generación estática), SSR (renderizado en servidor) o un enfoque híbrido según lo que necesite cada ruta.

Astro vs. Next.js: la comparación que todos hacen

Es la pregunta más frecuente cuando se evalúa Astro, y merece una respuesta honesta en lugar de marketing.

Dónde brilla Astro

Performance desde el día uno. Cero JavaScript por defecto se traduce en tiempos de carga más rápidos y Core Web Vitals más sanos sin configuración adicional. Para sitios donde el SEO y la velocidad de carga son críticos, esto es una ventaja real y medible.

Curva de aprendizaje más suave. El enfoque HTML-first de Astro es más accesible para desarrolladores que no vienen de un background fuerte en JavaScript o React. Los archivos .astro son parecidos a HTML con superpoderes.

Sitios de contenido sin compromiso. Para blogs, documentación, marketing sites o e-commerce basado en contenido, Astro da exactamente lo que se necesita sin el overhead de un framework pensado para aplicaciones.

Dónde brilla Next.js

Aplicaciones dinámicas e interactivas. Si tu proyecto tiene lógica compleja en el cliente, muchas rutas dinámicas, gestión de estado elaborada o interfaces muy reactivas, Next.js tiene las herramientas para manejarlo.

Ecosistema maduro. Next.js tiene una comunidad más grande, más años de producción, más librerías específicas y más recursos disponibles. Para equipos que quieren minimizar riesgo técnico, esto importa.

API routes y full-stack. Next.js tiene API routes nativas bien integradas. Astro también soporta endpoints de servidor, pero el modelo full-stack de Next.js es más completo.

La tabla

El resumen honesto

Elegí Astro si estás construyendo un sitio orientado al contenido donde performance y SEO son prioridades, o si querés una experiencia de desarrollo más simple sin sacrificar calidad de resultado.

Elegí Next.js si necesitás una aplicación web dinámica con mucha interactividad, lógica de servidor compleja o si tu equipo ya trabaja con el ecosistema React.

No son opciones mutuamente excluyentes en una organización: pueden coexistir perfectamente en distintos proyectos según el contexto.

¿Para qué tipo de proyectos tiene sentido?

• Blogs y sitios editoriales con alto volumen de contenido y requisitos de SEO

• Landing pages y sitios de marketing donde la velocidad de carga tiene impacto directo en conversión

• Documentación técnica de productos o librerías

• Portfolios y sitios personales donde la simplicidad y el rendimiento importan

• E-commerce basado en contenido (catálogos, páginas de producto con bajo nivel de interactividad)

Conclusión

Astro no busca reemplazar a Next.js ni ser el framework para todo. Su propuesta es más precisa que eso: ser la mejor opción para sitios donde el contenido es el protagonista y el JavaScript es el invitado, no al revés.

En un contexto donde los Core Web Vitals impactan directamente el posicionamiento en buscadores y la experiencia del usuario, tener un framework que entrega HTML estático por defecto no es un lujo, es una ventaja competitiva.

La Islands Architecture es una idea elegante que resuelve un problema real. Y la ejecución de Astro, con soporte multi-framework, Content Collections y cientos de integraciones, lo convierte en una herramienta madura y lista para producción.

En Devlights evaluamos qué tecnología tiene sentido para cada tipo de proyecto. Si estás definiendo el stack de tu próximo sitio y querés entender cuál es la mejor opción para tu caso, hablemos.