Explorando Astro: análisis del novedoso generador de sitios estáticos.

Astro es un moderno generador de sitios estáticos diseñado para mejorar el rendimiento y la experiencia de desarrollo.

En este artículo vamos a hablar de las principales características de Astro, repasando sus fortalezas y debilidades. Además, pondremos algún ejemplo práctico de web construida utilizando esta herramienta y explicaremos cómo crear un proyecto desde cero.

¿Qué es astro?

Sus creadores lo definen como el framework para construir sitios web orientados al contenido como blogs, marketing y comercio electrónico. Independientemente de que la terminología correcta pueda ser framework o generador de sitios, está claro que esta herramienta surgida en 2021 va a destacar mucho en el mundo frontend en un futuro próximo. Si te dedicas al desarrollo web, no hay duda de que debería interesarte conocer un poco más sobre él, ya que otro de sus objetivos principales es potenciar la “developer experience”.

Astro está enfocado en la optimización del rendimiento y en reducir al mínimo el JavaScript en el frontend.

Para entender un poco mejor en qué lugar del mercado se encuentra Astro, podríamos compararlo con frameworks como Gatsby, Next.js y Jekyll en cuanto al tipo de aplicaciones en las que lo podemos utilizar. Aun así, el enfoque de Astro resulta muy innovador respecto a estos generadores “tradicionales”.

Características

Algunas de las características que hacen a Astro tan atractivo son las siguientes:

• Islas. Es una arquitectura web basada en componentes optimizada para sitios web orientados al contenido. En Astro, una isla es cualquier componente interactivo flotando en un mar de HTML estático renderizado en el servidor (de esta forma solo es interactiva la porción de página que realmente necesita serlo).
• Agnóstico a la UI. Se dice también que tiene soporte multiframework, ya que nos permite utilizar componentes desarrollados en React, Preact, Svelte, Vue, SolidJS, AlpineJS, web components y Lit (de hecho cuenta con integraciones oficiales para todos ellos).
• “Server first”. Realiza la renderización costosa en el servidor para evitar hacerla en el dispositivo del usuario.
• Cero JS por defecto. Menos JavaScript del lado del cliente para no ralentizar tu sitio.
• Colecciones de contenido. Permiten organizar el contenido en formato Markdown. Validan el frontmatter (donde se encuentra título, descripción, imagen destacada, etc) y añaden una seguridad mediante el tipado de Typescript.
• Personalizable. Permite utilizar Tailwind, MDX y muchas más integraciones oficiales.
• Enfocado en el SEO. Facilita la generación de Sitemaps y cuenta con integraciones para mejorar el SEO.

Los principales inconvenientes que pueden surgir a la hora de utilizar Astro:

• La curva de aprendizaje puede ser una barrera de entrada. A pesar de que se hace muy sencillo de utilizar y en unas pocas horas puedes ser capaz de tener un proyecto web funcionando, está claro que se requiere un pequeño proceso de adaptación para entender las particularidades que tiene.
• Si tenemos alguna duda o problema durante el desarrollo, no contamos con una comunidad tan amplia como en el caso de otros generadores que llevan más tiempo utilizándose. Por contra, puedo decir que la documentación que hay en su página oficial es bastante completa, muy a la altura de otros frameworks como por ejemplo Next.js.
• Limitaciones en funcionalidades dinámicas. Esto hace que Astro no sea la mejor opción para aplicaciones que cambian frecuentemente o que tienen mucha interacción por parte del usuario como un dashboard, una red social o un e-commerce con productos que cambian frecuentemente, reviews, carrito de compras, etc. A pesar de que Astro facilita la utilización de componentes dinámicos de cualquier framework como React o Vue, esto está pensado para pequeños elementos. Si la página necesita una alta interactividad en el lado del cliente, la integración de estos componentes dinámicos y el manejo de estados puede resultar un problema.

Proyectos reales utilizando Astro

Astro está especialmente pensado para realizar proyectos de sitios estáticos sin demasiada interacción, es un generador muy orientado al contenido. Por eso será ideal para crear sitios web de documentación, blogs y portafolios personales e, incluso, algún e-commerce simple (que no necesite funcionalidades backend muy complejas).

A pesar de su corta vida, son muchas las empresas que han confiado en Astro para sus desarrollos. Podemos encontrarlo presente en gran cantidad de webs, por ejemplo:

• Blog de Firebase.
• Project idx (el nuevo editor de código de Google).
• La web de Netlify.
• La web de Porsche.

Inicio de un proyecto con Astro

Iniciar un proyecto con Astro se hace muy sencillo gracias a las potentes herramientas de CLI con las que cuenta.

Como requisitos necesitamos dos elementos:

• Node.js (recomiendan la versión v18.17.1 o de la v20.3.0 en adelante). La versión 19 no está soportada. Recuerda que para comprobar tu versión actual solo tienes que ejecutar node -v en tu terminal.
• Un editor de código (para el ejemplo hablaremos de VSCode). Recomiendo instalar la extensión oficial de Astro para que nos reconozca los archivos .astro.
• Para crear un proyecto con astro basta con ejecutar el siguiente comando como nos dice en su documentación:

npm create astro@latest

A partir de aquí nos hará una serie de preguntas sobre la ubicación, el template que queremos utilizar para empezar (yo he seleccionado blog), si queremos utilizar Typescript, si queremos instalar dependencias automáticamente y, por último, si deseamos inicializar un repositorio de Git.

Durante la experiencia desarrollando con Astro vamos a poder comprobar que sus herramientas de CLI son una gran ayuda en muchos casos y facilitan mucho ciertas tareas.
En este punto, si ejecutamos npm run dev podremos acceder a localhost:4321 (muy graciosa la broma de la secuencia de lanzamiento para el puerto) y veremos la siguiente web:

Estructura del proyecto

Con la ejecución del comando de creación del proyecto se genera una estructura de carpetas y ficheros de configuración, donde destacan los siguientes:

• public: en esta carpeta colocaremos los archivos de fuentes, iconos, imágenes, estilos, fichero robots, etc.
• src/pages: cada fichero .astro o .md, Astro lo interpretará como una ruta de tu web.
• src/components: aquí irán los componentes reutilizables, tanto propios de Astro como de otros frameworks.
• src/layouts: en este directorio estarán los componentes de tipo layout que podremos importar en determinadas páginas para que “envuelvan” su contenido.
• src/content: directorio para colecciones de contenido (se utilizará, por ejemplo, para los distintos posts o autores de un blog).
• astro.config.mjs: fichero de configuración de Astro.

Instalación de extensiones

Vamos a probar un ejemplo de las opciones que nos proporcionan las herramientas de CLI de Astro. Si queremos, por ejemplo, añadir Tailwind a nuestro proyecto, bastará con que ejecutemos el comando:

npx astro add tailwind

Una vez terminado, Astro habrá añadido la integración @astrojs/tailwind, la propia biblioteca TailwindCSS y las configuraciones necesarias para que podamos utilizarla directamente.

Edición del index

En este punto vamos a hacer una demostración sobre cómo se editaría la página y, además, vamos a comprobar si los estilos de Tailwind están funcionando correctamente. Para ello, nos vamos al fichero src/pages/index.astro y, en el h1 que contiene el texto “Hello astronaut”, vamos a añadir la siguiente clase:

class="text-red-700

Conclusión

Hemos comprobado las enormes ventajas que nos proporciona Astro en el desarrollo de sitios web. Está claro que, a la hora de elegir Astro para un proyecto, hay que tener en cuenta el uso que va a tener nuestra web en un futuro, ya que esto será determinante a la hora de decidir si es la herramienta más adecuada.

No olvidemos que, para proyectos que requieran mucha interactividad y comunicación constante con un backend, Astro puede no ser la herramienta más adecuada. Sin embargo, en webs más sencillas y más orientadas al contenido, Astro nos puede aportar una gran facilidad y agilidad en el desarrollo.

Os animo a explorar su documentación oficial para que podáis descubrir muchas otras utilidades y funcionalidades (Markdown, Server y client side rendering, web components, etc.) que no cabían en este post.

Recursos y referencias

Documentación oficial

Artículo

Cursos introductorios:

• Astro Crash Course
• Curso de Astro