Astro es el framework web que te permite construir sitios centrados en contenido, enviando cero JavaScript al navegador por defecto.
Astro es un framework de código abierto diseñado para construir sitios web rápidos y centrados en contenido: blogs, portafolios, documentación, e-commerce y más.
Astro usa una arquitectura de "islas" donde cada componente interactivo se hidrata de forma independiente. El resto de la página es HTML estático puro.
A diferencia de otros frameworks, Astro no envía JavaScript al navegador a menos que tú lo necesites explícitamente. Resultado: sitios ultra rápidos.
Usa React, Vue, Svelte, Solid, Preact o Lit dentro de Astro. Puedes mezclar frameworks en una misma página sin conflictos.
Astro renderiza todo en el servidor y envía HTML estático al navegador. Solo los componentes que necesitan interactividad se "hidratan" con JavaScript.
Los componentes Astro usan una sintaxis similar a HTML con un bloque de frontmatter (entre ---) para lógica del servidor en JavaScript/TypeScript.
En tiempo de build, Astro ejecuta todo el código del servidor y genera HTML estático. No hay runtime de JavaScript en el cliente.
Si necesitas interactividad, usa directivas como client:load, client:visible o client:idle para hidratar solo los componentes necesarios.
Simple, directo y familiar. Si conoces HTML, ya sabes Astro.
---
// Esto se ejecuta en el servidor
const titulo = "Hola desde Astro";
const items = ["Rápido", "Ligero", "Moderno"];
---
<h1>{titulo}</h1>
<ul>
{items.map((item) => (
<li>{item}</li>
))}
</ul>Organiza tu contenido en Markdown o MDX con validación de esquema mediante TypeScript. Perfecto para blogs y documentación.
Astro obtiene puntuaciones perfectas en Lighthouse por defecto. No necesitas optimizar lo que nunca se envió.
Crea un archivo en src/pages/ y tienes una ruta. Soporta rutas dinámicas, endpoints API y más.
Los estilos en componentes .astro tienen scope automático. No más colisiones de CSS ni convenciones de nombres complejas.
Tailwind, MDX, Sitemap, RSS, imágenes optimizadas y más. Un comando y listo: npx astro add tailwind.
Genera un sitio estático o usa SSR con adaptadores para Vercel, Netlify, Cloudflare, Node.js y más.
Crea tu primer proyecto Astro con un solo comando.
npm create astro@latest