¿Por qué Astro?

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

Características

Astro es un framework web todo en uno. Incluye de forma integrada todo lo que necesitas para crear un sitio web. También hay cientos de integraciones y hooks de API diferentes disponibles para personalizar un proyecto según tu caso de uso y necesidades exactas.

Algunos aspectos destacados incluyen:

• Islas: Una arquitectura web basada en componentes optimizada para sitios web orientados al contenido.
• Agnóstico de UI: Soporta React, Preact, Svelte, Vue, Solid, HTMX, componentes web y más.
• Primero en el servidor: Mueve el renderizado costoso fuera de los dispositivos de tus visitantes.
• Cero JS por defecto: Menos JavaScript en el lado del cliente para ralentizar tu sitio.
• Colecciones de contenido: Organiza, valida y proporciona seguridad de tipos de TypeScript para tu contenido Markdown.
• Personalizable: Partytown, MDX y cientos de integraciones para elegir.

Principios de diseño

Aquí tienes cinco principios fundamentales de diseño que te ayudarán a explicar por qué creamos Astro, los problemas que busca resolver y por qué Astro podría ser la mejor opción para tu proyecto o equipo.

Astro es…

1. Orientado al contenido: Astro fue diseñado para mostrar tu contenido.
2. Primero en el servidor: Los sitios web funcionan más rápido cuando renderizan HTML en el servidor.
3. Rápido por defecto: Debería ser imposible construir un sitio web lento en Astro.
4. Fácil de usar: No necesitas ser un experto para construir algo con Astro.
5. Enfocado en el desarrollador: Deberías tener los recursos necesarios para tener éxito.

Orientado al contenido

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

Por el contrario, 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 una aplicación en el navegador: paneles de administración con sesión iniciada, bandejas de entrada, redes sociales, listas de tareas pendientes e incluso aplicaciones nativas similares como Figma y Ping. Sin embargo, con esa complejidad, pueden tener dificultades para proporcionar un gran rendimiento al entregar tu contenido.

El enfoque de Astro en el contenido desde sus inicios como generador de sitios estáticos le ha permitido escalar sensatamente a aplicaciones web dinámicas, potentes y de alto rendimiento que siguen respetando tu contenido y a tu audiencia. El enfoque único de Astro en el contenido le permite tomar decisiones de compromiso y ofrecer características de rendimiento inigualables que no tendrían sentido implementar en frameworks web más enfocados en aplicaciones.

Primero en el servidor

Astro aprovecha el renderizado en el servidor en lugar del renderizado 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 (como 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 habilitarlo. Con Astro, todo sigue siendo simplemente HTML, CSS y JavaScript (o TypeScript, si lo prefieres).

Este enfoque contrasta con otros frameworks web de JavaScript modernos como Next.js, SvelteKit, Nuxt, Remix y otros. Estos frameworks se crearon para el renderizado en el lado del cliente de todo tu sitio web e incluyen renderizado en el lado del servidor principalmente para abordar problemas de rendimiento. Este enfoque se ha denominado Single-Page App (SPA), en contraste con el enfoque Multi-Page App (MPA) de Astro.

El modelo SPA tiene sus beneficios. Sin embargo, estos vienen a expensas de una complejidad adicional y compromisos de rendimiento. Estos compromisos perjudican el rendimiento de la página —métricas críticas como Time to Interactive (TTI)— lo cual no tiene mucho sentido para sitios web enfocados en el contenido donde el rendimiento en la primera carga es esencial.

El enfoque primero en el servidor de Astro te permite optar por el renderizado en el lado del cliente solo si es necesario y exactamente cuando lo sea. Puedes elegir añadir componentes de frameworks de UI que se ejecuten en el cliente. Puedes aprovechar el enrutador de transiciones de vista de Astro para tener un control más preciso sobre las transiciones y animaciones de páginas seleccionadas. El renderizado primero en el servidor de Astro, ya sea pre-renderizado o bajo demanda, proporciona valores predeterminados de alto rendimiento que puedes mejorar y extender.

Rápido por defecto

El buen rendimiento siempre es importante, pero es especialmente crítico para los sitios web cuyo éxito depende de la visualización de tu contenido. Está más que demostrado que un mal rendimiento te hace perder interacción, conversiones y dinero. Por ejemplo:

• Cada 100 ms más rápido → 1% más de conversiones (Mobify, ganando +$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)
• 850 ms más rápido → 7% más de conversiones (COOK)
• Cada 1 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, pero que cargue dolorosamente lento una vez desplegado. JavaScript suele ser el culpable, ya que muchos teléfonos y dispositivos de menor potencia rara vez igualan la velocidad de la laptop de un desarrollador.

La magia de Astro reside en cómo combina los dos valores explicados anteriormente (un enfoque en el contenido con una arquitectura primero en el servidor) para hacer concesiones y ofrecer características que otros frameworks no pueden. El resultado es un rendimiento web asombroso para cada sitio web, listo para usar. Nuestro objetivo: 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 el framework web de React más popular. Pero no confíes solo 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

El objetivo de Astro es ser accesible para todos los desarrolladores web. Astro fue diseñado para sentirse familiar y accesible, independientemente de tu nivel de habilidad o experiencia previa en desarrollo web.

El lenguaje de interfaz de usuario .astro es un superconjunto de HTML: ¡cualquier HTML válido es sintaxis de plantilla válida de Astro! Por lo tanto, si sabes escribir HTML, ¡puedes escribir componentes de Astro! Además, combina algunas de nuestras características favoritas tomadas de otros lenguajes de componentes como expresiones JSX (React) y alcance de CSS por defecto (Svelte y Vue). Esta cercanía a HTML también facilita el uso de la mejora progresiva y patrones de accesibilidad comunes sin ninguna sobrecarga.

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 tengas. React, Preact, Svelte, Vue, Solid y otros, incluyendo los componentes web, son todos compatibles para crear componentes de UI en un proyecto de Astro.

Astro fue diseñado para ser menos complejo que otros frameworks y lenguajes de UI. Una gran razón para esto es que Astro fue diseñado para renderizarse en el servidor, no en el navegador. Eso significa que no necesitas preocuparte por los hooks (React), clausuras obsoletas (también React), refs (Vue), observables (Svelte), átomos, selectores, reacciones 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 tanta “complejidad requerida” como fuera posible de la experiencia del desarrollador, especialmente cuando te incorporas por primera vez. Puedes construir un sitio web de ejemplo “Hello World” en Astro con solo HTML y CSS. Luego, cuando necesites construir algo más potente, puedes recurrir de forma incremental a nuevas características y APIs a medida que avances.

Enfocado en el desarrollador

Creemos firmemente que Astro solo es un proyecto exitoso si a la gente le encanta usarlo. Astro tiene todo lo que necesitas para apoyarte mientras construyes con Astro.

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

Nuestra comunidad acogedora, respetuosa e inclusiva en Discord está lista para brindarte soporte, motivación y aliento. Abre un hilo de #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 recibir comentarios seguros y críticas constructivas. Participa en eventos en vivo regulares como nuestra llamada comunitaria semanal, “Talking and Doc’ing”, y sesiones de resolución de APIs/bugs.

Como proyecto de código abierto, damos la bienvenida a contribuciones de todo tipo y tamaño de miembros de la comunidad de todos los niveles de experiencia. Estás invitado a unirte a las discusiones de la hoja de ruta para definir el futuro de Astro, y esperamos que contribuyas con correcciones y características al código base principal, al compilador, a la documentación, a las herramientas de lenguaje, a los sitios web y a otros proyectos.