Astro es un Framework de código abierto que prioriza la velocidad y la flexibilidad. Te permite construir sitios web de manera rápida y eficiente. Astro se integra perfectamente con tus componentes y bibliotecas de interfaz de usuario favoritas, brindando una experiencia de desarrollo completa.
El framework está inspirado en la Arquitectura de Islands y admite diversas integraciones de interfaz de usuario, incluidas React, Svelte, Vue y muchas otras. Una contribución notable de Astro es su papel en popularizar conceptos como la hidratación parcial y la idea de «Islas interactivas» dentro de la comunidad de desarrollo web.
Rendimiento y mejor SEO
Una de las principales fortalezas de Astro es su capacidad para optimizar la velocidad de carga de nuestros sitios web. Astro agrega JavaScript solo a los componentes que lo necesitan, lo cual garantiza que tu sitio web este bien optimizado, lo que conduce a mayores tasas de conversión y una mejor optimización para los motores de búsqueda (SEO).
Aquí tienes una comparación de rendimiento entre Astro y otros frameworks utilizando la herramienta Lighthouse.
Hidratación parcial
La hidratación parcial es una técnica utilizada en el desarrollo web para optimizar el rendimiento y la interactividad de las páginas web. Consiste en hidratar o inicializar selectivamente solo las partes necesarias de una página web con JavaScript, dejando el resto de la página como contenido estático. Astro utiliza esta técnica; por ejemplo, cuando creas tus componentes UI con tu framework JS favorito, astro renderizará todo el sitio como HTML estático durante la compilación. El resultado es un sitio web completamente estático con todo el JavaScript eliminado.
Directivas del cliente
Con Astro y client directive, podemos controlar la hidratación. Con Astro, tenemos una propiedad llamada (client:*) para indicarle cómo se debe renderizar un componente.
Las opciones disponibles son (cada valor tendrá una prioridad):
- Para mayor prioridad, para los elementos de interfaz de usuario visibles de inmediato y que deben ser interactivos lo antes posible.<Component client:load />
- Para elementos de interfaz de usuario de menor prioridad que no necesitan ser interactivos de inmediato.<Component client:idle />
- Para elementos de interfaz de usuario de baja prioridad que no necesitan ser interactivos de inmediato, se hidratarán hasta que sean visibles en el viewport.<Component client:visible />
- Para elementos de interfaz de usuario de baja prioridad, esta directiva hidrata el elemento cuando es visible en ciertos tamaños de pantalla.<Component client:media=»(max-width: 50em)» />
- Con esta directiva, el componente se hidratará al cargar la página, pero solo en el lado del cliente, en el momento de la compilación se ignorará.<Component client:only=»react» />
Gestión de contenido con Astro
En cuanto a la gestión de contenido, Astro está diseñado para adaptarse a una variedad de necesidades. Ofrece flexibilidad para obtener datos desde cualquier sistema de gestión de contenido (CMS) que elijas. Además, puedes trabajar localmente con type-safe Markdown y MDX, lo que te permite crear contenido de manera similar a lo tradicional y estructurada. Este enfoque centrado en el contenido asegura que Astro se adapte a tus requisitos de contenido específicos al mismo tiempo que mantiene un flujo de trabajo de desarrollo optimizado.
Sobre la Comunidad
La comunidad de Astro es muy grande y activa, puedes encontrar canales en Discord y hacer tus preguntas, además hay muchos temas y plantillas con Astro. disponibles creados por la comunidad. También, podes encontrar muchas herramientas que puedes integrar fácilmente, el ecosistema de Astro está en constante crecimiento gracias a la comunidad.