Astro: el framework más rápido para sitios estáticos

Si estás buscando un generador de sitios estáticos que vuele en velocidad, Astro es probablemente lo que necesitas. Olvídate de cargas pesadas de JavaScript: este framework entrega HTML puro desde el primer momento. En este artículo te cuento por qué se ha convertido en mi opción favorita para proyectos rápidos y ligeros.

¿Qué hace único a Astro?

Astro no es un framework más. Su secreto está en la hidratación parcial: solo carga JavaScript en los componentes que realmente lo necesitan. El resto se sirve como HTML estático. Esto se traduce en páginas que cargan en milisegundos y puntuaciones perfectas en Lighthouse.

Mientras que Next.js o Gatsby envían bundles de JS completos, Astro te permite decidir qué debe ser interactivo y qué no. El resultado es un sitio ultraligero incluso con mucho contenido dinámico.

Primeros pasos: crear un proyecto

Arrancar con Astro es trivial. Solo necesitas Node.js 18 o superior:

npm create astro@latest mi-sitio
cd mi-sitio
npm run dev

En segundos tienes un servidor de desarrollo en localhost:4321. La estructura es limpia:

mi-sitio/
├── src/
│   ├── pages/      # Tus rutas (index.astro, blog.astro...)
│   ├── components/ # Componentes reutilizables
│   └── layouts/    # Plantillas base
├── public/         # Archivos estáticos
└── astro.config.mjs

Los archivos .astro mezclan HTML, CSS y JavaScript en un mismo componente, pero sin la complejidad de JSX puro. Ejemplo básico:

---
// Código del servidor (se ejecuta en build)
const titulo = "Hola, mundo";
---

<html>
  <head><title>{titulo}</title></head>
  <body>
    <h1>{titulo}</h1>
  </body>
</html>

Todo lo que está entre --- se ejecuta en el servidor o en tiempo de build. El resultado es HTML plano.

Integración con otros frameworks

Aquí viene lo potente: puedes usar React, Vue, Svelte o Solid dentro de Astro. Instala el adaptador y empieza a mezclar:

npm install @astrojs/react

En astro.config.mjs:

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()]
});

Y luego usas componentes de React sin más:

---
import MiContador from '../components/MiContador.jsx';
---

<MiContador client:load />

La directiva client:load le dice a Astro que hidrate ese componente en el navegador. El resto de la página sigue siendo estático.

Despliegue y rendimiento real

Astro genera una carpeta dist/ con HTML, CSS y JS optimizados. Subirlo a producción es cuestión de segundos. Lo he probado con Cloudflare Pages, Netlify y Vercel, y en todos funciona de maravilla.

Un ejemplo de mi experiencia: un blog con 50 artículos, imágenes optimizadas y un par de componentes interactivos. Con Astro, el primer pintado ocurre en menos de 0.5 segundos. Con un generador tradicional, superaba los 2 segundos. La diferencia es brutal.

Además, Astro soporta Markdown y MDX de serie, ideal para blogs o documentación. Solo creas un archivo .md en src/pages/ y ya tienes una ruta.

Conclusión

Astro no es una moda pasajera. Resuelve un problema real: la sobrecarga de JavaScript en la web moderna. Si necesitas un sitio rápido, mantenible y sin complejidades innecesarias, este framework te va a encantar. Pruébalo en tu próximo proyecto y notarás la diferencia desde el primer npm run build.