Llevo unos meses usando Astro, tanto para este mismo portafolio, como para un blog y me ha gustado mucho. Voy a intentar, de forma muy resumida, hablaros de él y que puedan valorar si seguir aprendiéndolo, ya que cuenta con muchas opciones y sus posibilidades son tantas, que si nos paramos a enumerarlas todas, nos dormimos.

¿Qué es Astro?

Astro es un framework relativamente nuevo, nacido en 2019 y que actualmente estrena su versión 4.0. Este entorno de trabajo basado en javascript, permite la creación de web estáticas muy rápidas, puesto que de forma predeterminada, no emitirá ningún javascript… ¿Comoorrrr? Ahora lo veremos.

Documentación

Este es un punto importante, ya que toda la documentación esta traducida al español y es bastante amplia. Es muy recomendable tenerla siempre a mano al principio.

Javascript lo justo

Si has usado Vue o React, sabrás que la aplicación, una vez transpilada, cuenta con un fichero html de entrada que llama a uno o varios ficheros javascript con todo el framework, aunque la aplicación solo sea un “Hola mundo!“. En Astro, esto es muy distinto, ya que su enrutado (tras la transpilacion) se basa en estructura de ficheros estaticos html con nada de javascript. ¿Significa esto que no puedo ejecutar javascript? No, tienes la posibilidad de añadir componentes dinámicos, tanto con ficheros .astro, como con ficheros de otros frameworks.

Otros frameworks

Esta maravillosa herramienta, te permite el uso de componentes de múltiples frameworks distintos al mismo tiempo. A día de hoy cuenta con la participación de React, Preact, Svelte, Vue, SolidJS, AlpineJS y Lit. Esto es posible con una serie de implementaciones que puedes instalar al proyecto de Astro.

Astro, de forma predeterminada, convertirá los componentes a html estático, por lo que si queremos que sean dinámicos, tendremos que hidratar el componente, que no es otra cosa más que añadir una directiva en la etiqueta del mismo.

Sintaxis

Astro cuenta con su extensión de fichero (.astro) y sintaxis propia que consta de dos partes fundamentales separadas por tres guiones:

---
const title = "Ejemplo de astro"
const rand1 = Math.floor(Math.random() * 100) + 1
---

<script>
const rand2 = Math.floor(Math.random() * 100) + 1
document.querySelector("#random").textContent = rand.toString()
</script>

<h1>{title}</h1>
El número aleatorio estático es: {rand1}
El número aleatorio dinámico es: <span id="random"></span>

En la primera sección, va todo el javascript que queremos que se ejecute al hacer el build del proyecto. Explicado con un ejemplo, si añades un random de un número, ese número aleatorio se creará en el build, posteriormente, siempre será el mismo.

En la otra sección del componente, iría el html como podemos ver. También podríamos añadir un script de javascript para que se ejecute en el lado del cliente. Y en este caso, el random si se ejecutaría en cada recarga de la página.

Extensión

Astro cuenta con una extensión oficial para los principales IDE’s, que te ayudará a tener una mejor experiencia de desarrollo. Es casi obligatorio para poder resaltar la sintaxis de los ficheros .astro.

Plantillas

En su pagina web, cuentan con varias plantillas gratuitas, que te ayudarán a entender el potencial de Astro y sus distintos enfoques.

Conclusiones

Considero que Astro es un framework increible para tener fronts rápidos y enfocados al SEO: portafolios, landing pages, blogs, etc. También he podido experimentar que, la curva de aprendizaje, pese a su amplia documentación, es una montaña rusa. Esto se debe a que no es posible extrapolar todo de otros frameworks y algunos conceptos nuevos pueden atascarte durante largos ratos. Si quieres aprenderlo de forma más fluida, recomiendo optar por recibir alguna formación.