¿Por qué usar Astro?

Astro es un framework web todo en uno para crear páginas web rápidas y enfocadas en el contenido.

¿Por qué elegir Astro en lugar de otro framework web? Aquí hay cinco principios básicos de diseño para ayudar a explicar por qué construimos Astro, cuáles son los problemas que pretende resolver y por qué Astro puede ser la mejor opción para tu proyecto o equipo.

1. Enfocado en el contenido: Astro fue diseñado para sitios web ricos en contenido.
2. Servidor primero: Los sitios web se ejecutan más rápido cuando procesan HTML en el lado del servidor.
3. Rápido por defecto: Debería ser imposible crear un sitio web lento en Astro.
4. Fácil de usar: No hace falta ser un experto para desarrollar algo con Astro.
5. Muchas características, pero flexible: Más de 100 integraciones de Astro de donde elegir.

Enfocado en el contenido. Astro fue diseñado para crear sitios web ricos en contenido. Esto incluye la mayoría de los sitios de marketing, edición de publicaciones, documentación, blogs, portafolios y hasta algunos sitios de comercio electrónico.

Por el contrario, la mayoría de los frameworks web modernos están diseñados para crear aplicaciones web. Estos frameworks funcionan mejor para crear experiencias más complejas similares a aplicaciones en el navegador: paneles de administración con inicio de sesión para usuarios registrados, bandejas de entrada, redes sociales, listas de tareas e incluso aplicaciones nativas como Figma y Ping.

Esta es una de las diferencias más importantes que hay que entender sobre Astro. El enfoque especial de Astro en el contenido le permite a Astro hacer compensaciones y ofrecer características de rendimiento inigualables que no tendrían sentido para implementar de parte de otros frameworks web enfocados en aplicaciones.

Astro aprovecha el renderizado del lado del servidor por encima del renderizado del lado del cliente tanto como sea posible. Este es el mismo enfoque que los frameworks tradicionales del lado del servidor (PHP, WordPress, Laravel, Ruby on Rails, etc.) han estado usando durante décadas. Pero no necesitas aprender un segundo lenguaje del lado del servidor para lograrlo. Con Astro, todo sigue siendo solo HTML, CSS y JavaScript (o TypeScript, si lo prefieres).

Este enfoque entra en contraste con otros frameworks web JavaScript modernos como Next.js, SvelteKit, Nuxt, Remix y otros. Estos frameworks requieren el renderizado del lado del cliente de todo tu sitio web e incluyen el renderizado del lado del servidor principalmente para abordar los problemas de rendimiento. Este enfoque se denomina Aplicación de página única (en inglés: Single Page Application o SPA), en contraste al enfoque que tiene Astro: Aplicación de varias páginas (en inglés: Multi Page Application o MPA).

El modelo SPA tiene sus ventajas. Sin embargo, esto se logra a expensas de una complejidad adicional y compensaciones de rendimiento. Estas compensaciones perjudican el rendimiento de la página, incluidas métricas críticas como Tiempo para interactuar (en inglés: TTI o Time to Interactive), lo que no tiene mucho sentido para los sitios web enfocados en el contenido, donde el rendimiento de la primera carga es esencial.

El rendimiento siempre es importante, pero es especialmente crítico para los sitios web enfocados en el contenido. Se ha comprobado que un bajo rendimiento te hace perder retención, conversiones y dinero. Por ejemplo:

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

En muchos frameworks web, es fácil crear un sitio web que se vea muy bien durante el desarrollo pero que carga dolorosamente lento en producción. JavaScript suele ser el culpable, ya que los celulares de los usuarios y los dispositivos de menor potencia rara vez alcanzan la velocidad de la computadora portátil de un desarrollador.

La magia de Astro está en cómo combina los dos valores explicados anteriormente (un enfoque en contenido con una arquitectura MPA que prioriza el servidor) para buscar soluciones de compensación y ofrecer funciones que otros frameworks no pueden. El resultado es un rendimiento web sorprendente para cada sitio web, sin esfuerzo adicional. Nuestro objetivo: Debería ser casi imposible construir un sitio web lento con Astro.

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

El objetivo de Astro es que sea accesible para todos los desarrolladores web. Astro fue diseñado para sentirse familiar y alcanzable, independientemente del nivel de habilidad o experiencia previa con el desarrollo web.

Comenzamos asegurándonos de que pudieras usar cualquier lenguaje de componentes que ya conozcas. Hay soporte para React, Preact, Svelte, Vue, Solid, Lit y muchos otros para crear nuevos componentes en un proyecto de Astro.

También queríamos asegurarnos de que Astro también tuviera un excelente lenguaje de componentes integrado. Para hacer eso, creamos nuestro propio lenguaje de interfaz de usuario .astro. Está fuertemente influenciado por HTML: ¡cualquier fragmento válido de HTML ya es un componente válido de Astro! Pero también combina algunas de nuestras funciones favoritas prestadas de otros lenguajes de componentes, como expresiones JSX (React) y soporte para el alcance de CSS por defecto (Svelte y Vue). Esta cercanía al HTML también facilita el uso de mejoras progresivas y patrones de accesibilidad comunes sin gran dificultad.

Astro fue diseñado para ser menos complejo que otros lenguajes y frameworks. Un gran motivo de esto es que Astro fue diseñado para renderizarse en el servidor, no en el navegador. Eso significa que no necesitas preocuparte por: hooks (React), closures obsoletos (también React), refs (Vue), observables (Svelte), átomos, selectores, reactividad o derivaciones. No hay reactividad en el servidor, por lo que toda esa complejidad se desvanece.

Uno de nuestros dichos favoritos es: Optar por la complejidad. Diseñamos Astro para eliminar la “complejidad requerida” tanto como sea posible desde la experiencia del desarrollador, especialmente cuando lo utilizas por primera vez. Puedes crear un sitio web “Hello World” de ejemplo en Astro con solo HTML y CSS. Luego, cuando necesites crear algo más poderoso, puedes buscar nuevas funciones y APIs de manera incremental a medida que avances.

Astro es un framework web todo en uno que viene con todo lo que necesitas para construir un sitio web. Astro incluye sintaxis de componentes, enrutamiento basado en archivos, manejo de archivos estáticos (imágenes, fuentes), proceso de compilación, empaquetado, optimizaciones, obtención de datos y más. Puedes crear excelentes sitios web sin tener que salir del conjunto de funciones principales de Astro.

Si necesitas más control, puedes extender Astro con más de 100 integraciones como React, Svelte, Vue, Tailwind CSS, MDX y más. Conecta tu CMS favorito o despliega en tu host favorito con un solo comando.

Astro es independiente a la interfaz de usuario, lo que significa que puedes traer tu propio framework. React, Preact, Solid, Svelte, Vue y Lit son oficialmente compatibles con Astro. Incluso puedes mezclar y combinar diferentes frameworks en la misma página, lo que facilita futuras migraciones y evita encerrar el proyecto a un solo framework.