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

Si estás buscando crear un sitio web que vuele en velocidad y sea sencillo de mantener, Astro es tu mejor aliado. En este post te explico por qué lo considero el framework más rápido para sitios estáticos y cómo empezar a usarlo de forma práctica.

¿Qué hace a Astro tan rápido?

Astro se basa en un concepto clave: cero JavaScript por defecto. A diferencia de frameworks como Next.js o Gatsby, Astro renderiza todo el HTML en el servidor y elimina el JavaScript innecesario del lado del cliente. El resultado es que tu web se carga al instante, incluso en conexiones lentas.

Además, usa un sistema de “islas” (islands architecture): solo envía JavaScript para componentes interactivos, y el resto permanece como HTML y CSS puro. Esto reduce drásticamente el peso de la página.

Primeros pasos con Astro

Arrancar un proyecto es cuestión de segundos. Solo necesitas Node.js 18 o superior. Abre tu terminal y ejecuta:

npm create astro@latest

Te guiará por un asistente donde eliges nombre, plantilla (recomiendo “Starter” para empezar) y si quieres TypeScript. Luego:

cd tu-proyecto
npm run dev

Verás tu web en http://localhost:4321. La estructura de carpetas es limpia: src/pages/ para rutas, src/components/ para tus componentes (.astro), y public/ para archivos estáticos.

Crea tu primera página en Astro

Los ficheros .astro son el corazón del framework. Combinan HTML, CSS y JavaScript en un solo archivo, pero con una sintaxis muy limpia. Aquí tienes un ejemplo de una página simple:

---
// Esto es el frontmatter: código JavaScript que se ejecuta en build
const titulo = "Mi web rápida";
const posts = ["Astro es genial", "CSS sin JavaScript", "Markdown nativo"];
---

<html lang="es">
  <head>
    <title>{titulo}</title>
  </head>
  <body>
    <h1>{titulo}</h1>
    <ul>
      {posts.map(post => <li>{post}</li>)}
    </ul>
  </body>
</html>

Guárdalo como index.astro en src/pages/ y verás el resultado al instante. Sin JavaScript en el cliente, todo es HTML estático.

Integración con Markdown y componentes

Astro soporta Markdown de serie. Crea un fichero src/pages/blog/mi-post.md:

---
title: "Mi primer post"
date: 2025-03-01
---

Este es el contenido del post. Astro lo convierte en HTML automáticamente.

Y si quieres añadir interactividad (un contador, un formulario), puedes usar React, Vue o Svelte como islas. Solo tienes que instalar el adaptador y marcar el componente con client:load:

<Contador client:load />

El resto de la página sigue siendo estática. Así consigues velocidad sin sacrificar funcionalidad.

Despliegue en producción

Generar tu web estática es tan fácil como:

npm run build

Obtendrás una carpeta dist/ lista para subir a cualquier servidor o CDN. Yo lo despliego en Cloudflare Pages o Netlify en cuestión de minutos, y el resultado es una web que carga en menos de un segundo.

Conclusión

Astro combina lo mejor del desarrollo moderno con un rendimiento impecable. Si trabajas con sitios estáticos, blogs, o documentación, no necesitas más. Pruébalo en tu próximo proyecto y notarás la diferencia desde el primer build.