¿Por qué Astro?

Astro es el framework web para construir sitios web orientados al contenido, como blogs, marketing y comercio electrónico. Astro es conocido por ser pionero en una nueva arquitectura frontend para reducir la sobrecarga y complejidad de JavaScript en comparación con otros frameworks. Si necesitas un sitio web que cargue rápidamente y tenga un excelente SEO, entonces Astro es para ti.

Características

Astro es un framework todo en uno. Incluye todo lo que necesitas para crear un sitio web, incorporado. También cuenta con cientos de integraciones y hooks de API disponibles para personalizar un proyecto según tus necesidades y casos de uso.

Algunos aspectos destacados incluyen:

Islas: Una arquitectura web basada en componentes optimizada para sitios web orientados al contenido.
Agnostico a la UI: Compatible con React, Preact, Svelte, Vue, Solid, Lit, HTMX, web components y más.
Servidor primero (EN): Mueve la renderización costosa fuera de los dispositivos de tus visitantes.
Cero JS por defecto: Menos JavaScript del lado del cliente para no ralentizar tu sitio.
Colecciones de contenido: Organiza, valida y proporciona seguridad de tipos de TypeScript para tu contenido en Markdown.
Personalizable: Tailwind, MDX y cientos de integraciones entre las que elegir.

Principios de Diseño

Aquí hay cinco principios de diseño fundamentales para explicar por qué construimos Astro, los problemas que existen para resolver y por qué Astro puede ser la mejor elección para tu proyecto o equipo.

Astro es…

Orientado al contenido: Astro fue diseñado para destacar tu contenido.
Servidor primero: Los sitios web se ejecutan más rapido cuando renderizan el HTML en el servidor.
Rápido por defecto: Debería ser imposible construir un sitio web lento en Astro.
Fácil de usar: No necesitas ser un experto para construir algo con Astro.
Centrado en el desarrollador: Deberías tener los recursos que necesitas para tener éxito.

Orientado al contenido

Astro fue diseñado para construir sitios web ricos en contenido. Esto incluye sitios de marketing, sitios de publicaciones, sitios de documentación, blogs, portafolios, páginas landing, sitios comunitarios y sitios de comercio electrónico. Si tienes contenido para mostrar, debe llegar a tu lector rápidamente.

En contraste, la mayoría de los frameworks web modernos fueron diseñados para construir aplicaciones web. Estos frameworks destacan en la construcción de experiencias más complejas, similares a aplicaciones en el navegador: paneles de administración, bandejas de entrada, redes sociales, listas de tareas e incluso aplicaciones similares a nativas como Figma y Ping. Sin embargo, con esa complejidad, pueden tener dificultades para ofrecer un rendimiento óptimo al entregar tu contenido.

Astro está centrado en el contenido desde sus inicios como constructor de sitios estáticos, esto ha permitido que Astro escale de manera sensata hacia aplicaciones eficientes, potentes y dinamicas, que aún respetan tu contenido y tu audiencia. El enfoque único de Astro en el contenido le permite realizar compensaciones y ofrecer características de rendimiento incomparables que no tendrían sentido implementar en frameworks web más orientados a aplicaciones.

Servidor primero

Astro aprovecha la renderización en el servidor en lugar de la renderización en el lado del cliente en el navegador tanto como sea posible. Este es el mismo enfoque que los frameworks tradicionales del lado del servidor han estado utilizando durante décadas -- PHP, WordPress, Laravel, Ruby on Rails, etc. --. Pero no necesitas aprender un segundo lenguaje del lado del servidor para aprovecharlo. Con Astro, todo sigue siendo simplemente HTML, CSS y JavaScript (o TypeScript, si lo prefieres).

Este enfoque contrasta con otros frameworks web modernos en JavaScript como Next.js, SvelteKit, Nuxt, Remix y otros. Estos frameworks fueron construidos para la renderización del lado del cliente de todo tu sitio web e incluyen la renderización del lado del servidor principalmente para abordar problemas de rendimiento. Este enfoque se ha denominado como la Aplicación de Página Única (SPA), en contraste con el enfoque de Astro, que es la Aplicación de Múltiples Páginas (MPA).

El modelo SPA tiene sus beneficios. Sin embargo, estos vienen a costa de una complejidad adicional y compensaciones en el rendimiento. Estas compensaciones afectan el rendimiento de la página, métricas críticas como el Tiempo de Interactividad (TTI), lo cual no tiene mucho sentido para sitios web centrados en el contenido donde el rendimiento en la carga inicial es esencial.

El enfoque de Astro de servidor primero te permite optar por la renderización del lado del cliente solo si es necesario y exactamente como sea necesario. Puedes elegir agregar componentes de frameworks de UI que se ejecuten en el cliente. Puedes aprovechar el enrutador de view transitions de Astro para tener un control más preciso sobre ciertas transiciones de página y animaciones. La renderización de servidor primero de Astro, ya sea pre-renderizada o bajo demanda, proporciona valores predeterminados de rendimiento que puedes mejorar y ampliar.

Rápido por defecto

Un buen rendimiento siempre es importante, pero es especialmente crítico para sitios web cuyo éxito depende de mostrar tu contenido. Ha quedado bien demostrado que un rendimiento deficiente lleva a una menor participación, conversiones y pérdida de ingresos. Por ejemplo:

Cada 100ms más rápido → 1% más de conversiones (Mobify, ganado +$380,000/año)
50% más rápido → 12% más de ventas (AutoAnything)
20% más rápido → 10% más de conversiones (Furniture Village)
40% más rápido → 15% más de registros (Pinterest)
850ms más rápido → 7% más de conversiones (COOK)
Cada segundo más lento → 10% menos de usuarios (BBC)

En muchos frameworks web, es fácil construir un sitio web que se vea genial durante el desarrollo solo para cargar dolorosamente lento una vez desplegado. JavaScript suele ser el culpable, ya que muchos teléfonos y dispositivos de menor potencia rara vez alcanzan la velocidad del portátil de un desarrollador.

La mágia de Astro está en como combina los dos valores explicados anteriormente -- un enfoque en el contenido con una arquitectura de servidor primero -- para realizar compensaciones y ofrecer características que otros frameworks no pueden. El resultado es un rendimiento web increíble para cada sitio web, de forma prederterminada. Nuestra meta: Debería ser casi imposible construir un sitio web lento con Astro.

Un sitio web de Astro puede cargar un 40% más rápido con un 90% menos de JavaScript que el mismo sitio construido con React, el framework web más popular. Pero no confíes en nuestra palabra: mira cómo el rendimiento de Astro deja a Ryan Carniato (creador de Solid.js y Marko) sin palabras.

Fácil de usar

La meta de Astro es ser accessible a cada desarrollador web. Astro fué diseñado para sentirse familiar y asequible independientemente el nivel de habilidad o experiencia pasada en el desarrollo web.

El lenguaje de UI .astro es un superconjunto de HTML: ¡cualquier HTML válido es una sintaxis de plantilla válida en Astro! Entonces, si puedes escribir HTML, ¡puedes escribir componentes de Astro! Pero, además combina algunas de nuestra características favoritas tomadas de otros lenguajes de componentes, como expresiones JSX (React) y CSS con ámbito por defecto (Svelte y Vue). Esta cercanía a HTML también facilita el uso de mejoras progresivas y patrones comunes de accessibilidad sin un costo adicional.

Luego nos aseguramos de que también pudieras usar tus lenguajes de componentes de UI favoritos que ya conoces e incluso reutilizar componentes que ya puedas tener. React, Preact, Svelte, Vue, Solid, Lit y otros, incluidos los web components, son compatibles para la creación de componentes de UI en un proyecto de Astro.

Astro fué diseñado para ser menos complejo que otros frameworks y lenguajes UI. Un gran motivo para esto es que Astro fué diseñado para renderizar en el servidor, no en el navegador. Esto significa que no necesitas preocuparte acerca de: hooks (React), closures obsoletas (también React), refs (Vue), observables (Svelte), atoms, selectores, reacciones o derivaciones. No hay reactividad en el servidor, por lo que toda la complejidad desaparece.

Una de nuestras frases favoritas es: optar por la complejidad. Diseñamos Astro para eliminar tanta “complejidad requerida” como fuera posible de la experiencia del desarrollador, especialmente al inicio. Puedes construir un sitio web “Hola Mundo” de ejemplo en Astro con solo HTML y CSS. Entonces, cuando necesites contruir algo más potente, puedes alcanzar incrementalmente nuevas características y APIs a medida que avanzas.

Centrado en el desarrollador

Creemos firmemente que Astro es un proyecto exitoso si a las personas les encantan usarlo. Astro tiene todo lo que necesitas para apoyarte mientras construyes con Astro.

Astro invierte en herramientas de desarrollo como una gran experiencia en el CLI desde el momento que abres la terminal, una extension oficial de VS Code para el resaltado de sintaxis, TypeScript y Intellisense, y una documentación mantenida activamente por cientos de contribuidores de la comunidad, disponible en 14 idiomas.

Nuestra comunidad acogedora, respetuosa e inclusiva de Discord está lista para proporcionar soporte, motivacion y ánimo. Abre un hilo en #support para obtener ayuda con tu proyecto. Visita nuestro canal dedicado #showcase para compartir tus sitios de Astro, publicaciones de blog, videos e incluso trabajos en progreso para obtener comentarios seguros y críticas constructivas. Participa en eventos en vivo regulares como nuestra llamada comunitaria semanal “Talking and Doc’ing” y sesiones de API/bug.

Como proyecto open-source, damos la bienvenida a contribuciones de todos los tipos y tamaños por parte de miembros de la comunidad de todos los niveles de experiencia. Estás invitado a unirte a las discusiones sobre la hoja de ruta para dar forma al futuro de Astro, y esperamos que contribuyas con correcciones y características al código base principal, compilador, docs, herramientas de lenguaje, sitios web y otros proyectos.