Astro 7.0

El framework web para sitios basados en contenido

Astro impulsa los sitios de marketing, blogs, sitios de e-commerce más rápidos del mundo, y más.

Comenzar
npm create astro@latest

Usado por las empresas más grandes del mundo:

¿Qué es Astro?

Astro es un framework web de JavaScript optimizado para construir sitios web rápidos basados en contenido.

Primero el servidor

Astro mejora el rendimiento del sitio web renderizando componentes en el servidor, enviando HTML ligero al navegador sin ninguna sobrecarga innecesaria de JavaScript.

Basado en contenido

Astro fue diseñado para funcionar con tu contenido, sin importar dónde esté. Carga datos desde tu sistema de archivos, una API externa, o tu CMS favorito.

Personalizable

Extiende Astro con tus herramientas favoritas. Trae tus propios componentes UI de JavaScript, librerías CSS, temas, integraciones, y más.

Rendimiento de primera clase

Islas de Astro

Las islas optimizan tu sitio web como ningún otro framework web puede. Aprovecha el rendimiento único de carga de páginas de Astro para mejorar las tasas de conversión, Core Web Vitals, y SEO.

% de sitios reales con buenos Core Web Vitals

Astro Core Web Vitals Aprobados

66%

WordPress Core Web Vitals Aprobados

48%

Gatsby Core Web Vitals Aprobados

47%

Next.js Core Web Vitals Aprobados

30%

Nuxt Core Web Vitals Aprobados

28%

Ver el dataset completo· Basado en datos de rendimiento del mundo real deHTTP Archive y elChrome UX Report.

Máxima flexibilidad

Sin dependencia del proveedor

Astro soporta todos los frameworks UI principales. Trae tus componentes existentes y aprovecha el rendimiento optimizado de build del cliente de Astro.

---
import BuyButton from '../components/BuyButton.jsx';
import { getProductDetails } from "ecommerce-package";
import ProductPageLayout from '../layouts/ProductPageLayout.astro';
const product = await getProductDetails(Astro.params.slug);
---
<ProductPageLayout>
<img src={product.imageUrl} alt={product.imageAlt} />
<h2>{product.name}</h2>
<BuyButton id={product.id} client:load />
</ProductPageLayout>
Todo lo que necesitas

Completo en funcionalidades

Astro incluye todo lo que necesitas para construir un sitio web moderno. ¿Necesitas más? Extiende Astro con integraciones.

Colecciones de contenido

Organiza tu Markdown y MDX con seguridad de tipos integrada de TypeScript y validación de frontmatter.

Cero JavaScript, por defecto

Astro solo envía el JavaScript que necesitas y automáticamente elimina el resto para un sitio web más rápido.

Transiciones de vista

Transiciona, desvanece y desliza entre páginas sin interrupciones con las APIs nativas del navegador de View Transitions integradas.

Imágenes optimizadas

Elimina el desplazamiento de layout y sirve formatos de imagen modernos y optimizados con los componentes y utilidades integrados de Astro.

Integraciones UI

Trae tus frameworks UI y librerías de componentes favoritos con la arquitectura flexible de islas de Astro.

ReactVueSvelteAngularPreactSolidQwik

Enrutamiento basado en archivos

El sistema de enrutamiento flexible de Astro te permite entender la estructura de tu sitio de un vistazo.

Middleware

Envuelve las peticiones entrantes con lógica personalizada como autenticación, registro, o obtención de datos.

Acciones

Escribe funciones de backend con seguridad de tipos que puedes llamar directamente desde tu código cliente JavaScript del frontend.

Adaptadores de despliegue

Configuración de una línea para Netlify, Vercel, AWS, o tu plataforma de hosting favorita.

Node.jsCloudflareVercelNetlifySSTDenoAWS

Plantillas simples

Si sabes HTML, ya sabes lo suficiente para escribir tu primer componente de Astro. Construye componentes de servidor potentes que todos en tu equipo entiendan.

Carga instantánea de páginas

Optimiza la carga de páginas con prefetching automático e inteligente. Elige entre los presets integrados o adapta una estrategia perfecta para tu sitio.

Listo para IA

Integra el servidor MCP oficial de Astro y los archivos de contexto con tus herramientas de IA favoritas para una experiencia de desarrollo de primera clase.

Variables de entorno

Evita errores comunes de configuración con una API integrada para gestionar tus variables de entorno.

Ecosistema

Temas

Comienza más rápido con un tema pre-construido para Astro. Personalízalo para hacerlo tuyo.

Agencias partner de Astro

Obtén soporte profesional para Astro

Encuentra el equipo adecuado para tu proyecto con una Agencia Partner de Astro. Desde landing pages hasta e-commerce, obtén la asistencia experta que necesitas.

Comienza a construir con
Astro hoy

Comenzar
npm create astro@latest

Astro es software gratuito y de código abierto posible gracias a estos maravillosos patrocinadores