Astro Framework: Por Qué Construyo Todo Con Él

Tengo 4 sitios web en producción corriendo con Astro ahora mismo. No son tutoriales, ni demos, ni proyectos de prueba. Son negocios reales generando tráfico real e ingresos reales. Después de años construyendo exclusivamente con WordPress, migrar a Astro para mis sitios de contenido fue una de las mejores decisiones técnicas que he tomado. Y lo digo como alguien que todavía opera dos tiendas WordPress + WooCommerce que procesan ~60 pedidos al mes combinadas.

El framework Astro no es simplemente otro framework JavaScript compitiendo por atención en un ecosistema sobresaturado. Es fundamentalmente diferente en filosofía: enviar cero JavaScript por defecto, hacer del HTML la salida principal, y dejar que los desarrolladores agreguen interactividad solo donde realmente se necesita. Para sitios web orientados a contenido — blogs, documentación, páginas de marketing, sitios de afiliados — esta filosofía se traduce en rendimiento mediblemente superior, costos más bajos, y cero dolores de cabeza de mantenimiento.

Esta guía es todo lo que he aprendido construyendo con Astro en producción a través de múltiples proyectos, incluyendo lo que nadie te dice sobre las limitaciones.

Qué es el framework Astro y por qué importa

Astro es un framework web creado por el equipo de Astro (liderado por Fred K. Schott) que toma un enfoque fundamentalmente diferente para construir sitios web. Mientras la mayoría de frameworks modernos (Next.js, Nuxt, SvelteKit) envían JavaScript al navegador por defecto, Astro envía HTML puro. Cero kilobytes de JavaScript a menos que explícitamente lo pidas.

Esto no es una limitación técnica — es una decisión deliberada de diseño. La mayoría de sitios de contenido no necesitan JavaScript. Un artículo de blog no necesita React para renderizar. Una descripción de producto no necesita Vue para mostrar texto. Al eliminar JavaScript innecesario, Astro logra velocidades de carga que son físicamente imposibles con frameworks pesados en JavaScript.

La arquitectura de islas explicada

La “arquitectura de islas” de Astro es su característica más innovadora. En lugar de hidratar una página entera con JavaScript (como hace Next.js), Astro te permite designar componentes interactivos específicos como “islas” de JavaScript en un mar de HTML estático.

Un ejemplo práctico de este mismo sitio: toda la página que estás leyendo es HTML estático — cero JavaScript. Pero el componente de búsqueda en la navegación carga JavaScript solo cuando se necesita. La barra de progreso de lectura es una isla pequeña. Todo lo demás es HTML y CSS puro.

Esto significa:

• 90%+ de la página carga instantáneamente como HTML estático
• Los componentes interactivos cargan independientemente sin bloquear la página
• El payload total de JavaScript es una fracción de lo que enviaría un sitio de Next.js
• Los Core Web Vitals están en verde en todo momento, siempre

Mis 4 sitios web en producción con Astro

Permíteme recorrer los sitios reales que he construido y opero con Astro. No son hipotéticos — están vivos, generando tráfico, y sirviendo propósitos reales de negocio.

diegoacero.com (este sitio)

Este sitio de marca personal corre en Astro 5 + Tailwind 4, desplegado en Cloudflare Pages. Tiene 40+ páginas, 12+ artículos de blog optimizados para SEO, componentes interactivos (búsqueda, progreso de lectura, botones de compartir), y deploy automatizado vía GitHub Actions.

• Puntajes Lighthouse: 100/100/100/100
• Costo de hosting: $0/mes
• Tiempo de build: ~8 segundos
• Mantenimiento mensual: Cero. Sin actualizaciones, sin parches, sin problemas de compatibilidad.

alimentos-proteinas.com

Un blog de nutrición en español diseñado como activo de linkbuilding para mi tienda de suplementos. Construido con Astro + Cloudflare Pages, logra puntajes perfectos de Lighthouse y sirve como prueba de que los sitios de contenido no necesitan WordPress.

• Puntajes Lighthouse: 100/100/100/100
• Páginas: 8 artículos publicados
• Propósito: SEO + linkbuilding para Suplenet
• Costo total: $0/mes (el dominio es el único gasto)

montessoritoys.info

Un sitio de afiliados de Amazon en inglés sobre juguetes Montessori. Este es el proyecto Astro más grande que he construido: 1,000+ páginas, 697 productos, 6 herramientas interactivas, todo generado estáticamente.

• Páginas: 1,000+ (productos, categorías, herramientas, blog)
• Tiempo de build: ~45 segundos para 1,000+ páginas
• Costo de hosting: $0/mes en Cloudflare Pages
• Herramientas interactivas: Quiz, motor de comparación, buscador por edad, buscador de regalos — todas islas de Astro

Astro vs WordPress: comparación honesta de alguien que usa ambos

Opero 2 sitios WordPress y 4 sitios Astro. Esta comparación viene de experiencia diaria con ambos, no de leer documentación.

Cuándo elegir Astro sobre WordPress

Elige Astro cuando:

• Tu sitio es principalmente contenido (blog, documentación, marketing, portafolio)
• El rendimiento es una ventaja competitiva (SEO, experiencia de usuario)
• Quieres cero costos de hosting y mantenimiento continuo
• Te sientes cómodo con o estás dispuesto a aprender Git y terminal básico
• Tienes herramientas de IA como Claude Code que manejan la parte técnica

Cuándo WordPress sigue siendo la mejor opción

Mantén WordPress cuando:

• Necesitas e-commerce con carrito, checkout, pagos y gestión de pedidos
• Personas no técnicas necesitan editar contenido regularmente
• Necesitas funciones dinámicas como cuentas de usuario, comentarios o datos en tiempo real
• Tu negocio depende de plugins específicos de WordPress que no tienen alternativa

No veo esto como competencia. En mi negocio, Astro maneja contenido y WordPress maneja comercio. Sirven propósitos diferentes y ambos hacen su trabajo excepcionalmente bien.

Astro vs Next.js: por qué elegí Astro para sitios de contenido

Next.js es un framework excelente. Lo uso — mi ERP personalizado (Textti Desk) está construido con Next.js + Supabase. Pero para sitios de contenido, elegir Next.js sobre Astro no tiene sentido en 2026, y aquí explico por qué.

La diferencia fundamental: Next.js es un framework de React que puede generar páginas estáticas. Astro es un framework de contenido que puede usar React (o Vue, o Svelte, o cualquiera) cuando se necesita. La orientación importa.

Con Next.js, estás pagando el impuesto de React en cada página — incluso si esa página es un artículo de blog simple que no necesita interactividad. El bundle de JavaScript del lado del cliente puede ser 80KB+ antes de agregar un solo componente. Con Astro, un artículo de blog envía exactamente 0 bytes de JavaScript a menos que elijas agregar una isla interactiva.

Para mi dashboard de ERP (Next.js): tiene todo el sentido. Cada página necesita autenticación, datos en tiempo real, formularios complejos y gestión de estado. React está justificado.

Para este blog (Astro): enviar React para mostrar texto estático sería absurdo. El contenido no cambia. Los componentes no necesitan estado. La página está completa cuando llega el HTML.

Mi regla general: si la mayoría de tus páginas son contenido estático, usa Astro. Si la mayoría son aplicaciones dinámicas, usa Next.js. No dejes que la popularidad del framework dicte las decisiones de arquitectura.

Cómo Astro logra 100/100 en Lighthouse consistentemente

Conseguir un puntaje perfecto de Lighthouse con la mayoría de frameworks requiere optimización extensiva: code splitting, lazy loading, compresión de imágenes, extracción de CSS crítico, y docenas de otras técnicas. Con Astro, 100/100 es lo predeterminado.

Por qué Astro es rápido por defecto

1. Cero JavaScript: Sin runtime de framework, sin script de hidratación, sin router — solo HTML y CSS
2. Optimización de imágenes integrada: astro:assets automáticamente redimensiona, comprime y sirve formatos modernos (AVIF, WebP)
3. CSS con scope: Los estilos tienen scope por componente y se bundlean automáticamente — sin CSS sin usar
4. Minificación de HTML: La salida es HTML limpio y mínimo sin basura de framework
5. Sin routing del lado del cliente: Cada página es un documento HTML fresco — sin overhead de SPA

Resultados reales de Lighthouse en mis sitios

Estos no son puntajes seleccionados de una prueba perfecta. Son puntajes consistentes y reproducibles en todos mis sitios Astro. La comparación con WordPress es de mis propios sitios WordPress, que están bien optimizados con FlyingPress, Perfmatters y caché agresivo. Sacan buenos puntajes para WordPress — pero no pueden igualar cero JavaScript.

MDX: el formato de contenido que hace Astro perfecto para blogs técnicos

MDX es Markdown con componentes JSX. Es la razón por la que puedo escribir contenido técnico largo (como este artículo) e incluir tablas comparativas interactivas, score cards, gráficos y callouts sin tocar HTML.

Cómo funciona MDX en Astro

Un artículo estándar de blog se escribe en archivos .mdx con frontmatter (metadatos) arriba y contenido abajo. Escribes en Markdown — encabezados, párrafos, listas, enlaces — e importas componentes personalizados donde se necesiten.

El flujo para escribir un artículo:

1. Crear un nuevo archivo .mdx en el directorio de contenido
2. Agregar frontmatter (título, descripción, fecha, tags, FAQs, etc.)
3. Escribir contenido en Markdown
4. Importar y usar componentes donde necesites formato enriquecido
5. Push a GitHub — el deploy es automático

Por qué MDX supera al editor de bloques de WordPress

El editor de bloques de WordPress (Gutenberg) es visual e intuitivo. Pero para contenido técnico con convenciones estrictas, MDX es superior:

• Control de versiones: Cada artículo es un commit de Git. Puedes hacer diff, revertir y rastrear cambios
• Consistencia: Los componentes imponen estructura — una tabla comparativa siempre se ve igual
• Velocidad: Escribir en Markdown es más rápido que hacer clic por bloques
• Portabilidad: Los archivos MDX funcionan en cualquier framework. El contenido de WordPress está encerrado en su base de datos
• Amigable con IA: Claude Code puede escribir y editar archivos MDX directamente, entendiendo el contexto completo del proyecto

He escrito más de 400 entradas de contenido en WordPress y 40+ páginas en Astro/MDX. Para contenido estructurado y orientado por convenciones, MDX gana de forma decisiva.

Desplegar Astro en Cloudflare Pages: hosting gratis que escala

Uno de los argumentos más convincentes para Astro es el costo. Mis 4 sitios Astro tienen un costo combinado de hosting de $0 por mes. No “bajo costo” — cero.

Cloudflare Pages ofrece hosting gratuito para sitios estáticos con:

• Ancho de banda ilimitado — sin cargos por exceso, nunca
• CDN global — tu sitio se sirve desde 300+ centros de datos mundialmente
• Deploys automáticos — push a GitHub, sitio actualizado en ~30 segundos
• Dominios personalizados — conecta tu dominio, SSL gratis
• Deploys de preview — cada pull request obtiene su propia URL

El flujo de deployment que uso

Mi proceso de deploy está completamente automatizado:

1. Escribir/editar contenido localmente o vía Claude Code
2. Commit y push a GitHub
3. GitHub Actions ejecuta el build
4. Cloudflare Pages despliega el resultado
5. Sitio está live globalmente en ~30 segundos

Sin gestión de servidor. Sin backups de base de datos. Sin acceso SSH necesario. Sin parches de seguridad. Sin problemas de compatibilidad de PHP. El sitio son archivos HTML estáticos servidos desde la red edge de Cloudflare.

Compara esto con mis sitios WordPress: ScalaHosting cuesta $20-50/mes, gestiono configuraciones de servidor, me preocupo por compatibilidad de plugins, ejecuto rutinas de backup y dedico tiempo a endurecimiento de seguridad. Vale la pena para e-commerce. Innecesario para sitios de contenido.

Construir con Astro cuando no eres desarrollador

La verdad honesta: Astro requiere más conocimiento técnico que WordPress. Necesitas estar cómodo con una terminal, Git y edición básica de código. Pero “más técnico” ya no significa “nivel de desarrollador” en 2026.

No soy desarrollador. Mi JavaScript es un 1-2 de 10. Mi PHP es igual. Lo que tengo es una visión clara de lo que quiero construir y herramientas de IA que pueden escribir el código por mí.

Cómo uso Claude Code con Astro

Claude Code es mi entorno de desarrollo para proyectos Astro. El flujo:

1. Describo lo que quiero en lenguaje natural (“agrega un componente de gráfico de barras que tome items y los renderice como barras horizontales”)
2. Claude Code lee la estructura de mi proyecto y mis convenciones
3. Escribe el componente, respetando mis patrones de nombres, convenciones de estilo y estructura de archivos
4. Yo reviso, pruebo y hago commit

La ventana de contexto de 1 millón de tokens es crucial aquí. Claude Code lee todo mi proyecto Astro — archivos de layout, componentes existentes, schemas de contenido, archivos de configuración — y escribe código que encaja sin problemas. Con una ventana de contexto menor, necesitarías explicar la estructura de tu proyecto en cada conversación.

La barrera práctica

Necesitas estar cómodo con:

• Terminal: Ejecutar npm run dev, npm run build, git push
• Edición de archivos: Trabajar con archivos .astro y .mdx en un editor de código
• Git: Operaciones básicas de commit, push y branch
• Troubleshooting: Leer mensajes de error y pedir correcciones a la IA

Si esto se siente intimidante, WordPress sigue siendo la opción correcta. Pero si estás dispuesto a invertir un fin de semana aprendiendo lo básico, Astro se vuelve accesible — especialmente con asistencia de IA.

Cuándo NO usar Astro: limitaciones honestas

Astro es excelente en lo que hace, pero no es la herramienta correcta para todo. Estas son las limitaciones legítimas:

Escenarios específicos donde Astro NO es la opción correcta

1. E-commerce completo con carrito y checkout: Usa WordPress + WooCommerce o Shopify. Yo opero dos tiendas WooCommerce exactamente por esta razón.

2. Apps con cuentas de usuario: Login, dashboards, contenido personalizado — usa Next.js o SvelteKit con un backend como Supabase.

3. Sitios editados por personas no técnicas: Si tu equipo de marketing necesita publicar artículos sin tocar código, WordPress con editor visual sigue siendo la opción más práctica.

4. Funciones en tiempo real: Chat, notificaciones, datos en vivo — necesitan WebSockets y lógica del lado del servidor. Astro puede integrar con estos vía islas, pero no está construido para esto.

El ángulo de soluciones propias: Astro como reemplazo de SaaS

Aquí es donde la historia del framework Astro se conecta con una estrategia de negocio más amplia. Cada sitio que construyo con Astro reemplaza lo que de otra forma sería un plan de hosting pagado, una suscripción de CMS, o una cuota de constructor de sitios.

Los ahorros importan para un operador solo. Pero el valor real es la experiencia: cada sitio Astro que construyo me enseña patrones que puedo aplicar a proyectos de clientes. Cuando alguien pregunta “¿puedes construirme un sitio de contenido rápido y optimizado para SEO?” la respuesta es sí — en días, no semanas — porque ya lo he hecho cuatro veces.

Si estás considerando Astro para tu próximo proyecto, he documentado mi enfoque completo en mi sección de casos. Y si prefieres que alguien lo construya por ti, mis sprints de construcción incluyen desarrollo de sitios Astro con el mismo rendimiento 100/100 de Lighthouse que logro en mis propios proyectos.

Empezar con Astro en 2026: el camino práctico

Si leíste hasta aquí y quieres probar Astro, este es el camino que recomendaría:

Semana 1: Lo básico

1. Instalar Node.js y un editor de código
2. Ejecutar npm create astro@latest y explorar el template inicial
3. Entender archivos .astro: frontmatter (---) para lógica, HTML abajo para markup
4. Crear 3-4 páginas estáticas para sentirte cómodo con la sintaxis
5. Desplegar en Cloudflare Pages o Vercel (gratis)

Semana 2: Contenido y componentes

1. Configurar content collections con un schema de blog
2. Escribir tu primer artículo MDX con componentes personalizados
3. Agregar Tailwind CSS para estilos
4. Crear componentes reutilizables (header, footer, card, etc.)
5. Construir un blog funcional con 5+ artículos

Semana 3: Listo para producción

1. Agregar meta tags SEO, imágenes Open Graph y sitemap
2. Implementar feed RSS
3. Configurar GitHub Actions para deploy automático
4. Agregar funcionalidad de búsqueda (Pagefind funciona muy bien con Astro)
5. Optimizar imágenes con astro:assets

El acelerador con IA

Con Claude Code o una herramienta similar de IA para código, puedes comprimir estas tres semanas en tres días. Construí la primera versión de diegoacero.com en una sola sesión intensiva con Claude Code. No porque sea rápido — porque la IA entiende el framework, lee la documentación, y escribe código Astro válido al primer intento.

Perspectiva para emprendedores LATAM: Una de las ventajas más subestimadas de Astro para emprendedores en Latinoamérica es el costo cero de hosting. Cuando cada peso cuenta — y créeme, yo sé lo que es operar con presupuesto apretado — eliminar $20-50/mes en hosting por sitio es significativo. Multiplícalo por 4 sitios y son $80-200/mes que van directo a otras inversiones.

El framework Astro representa un cambio genuino en cómo los sitios web de contenido deberían construirse. No porque sea moderno o nuevo, sino porque se alinea con lo que realmente importa: velocidad, costo y mantenibilidad. En 2026, enviar 200KB de JavaScript para mostrar un artículo de blog no es solo innecesario — es una desventaja competitiva. Astro elimina esa desventaja por defecto, y para negocios orientados a contenido, esa es una ventaja significativa.

Si quieres construir un sitio con la velocidad y rendimiento que muestro aquí, revisa mis sprints de construcción o empieza por ver las herramientas que uso para todo mi stack.