Introducción a Astro, el framework web full-stack de moda

Astro surgió como el framework enfocado en conseguir el mejor rendimiento posible enviando el mínimo código JavaScript al cliente. Su arquitectura en islas, su soporte a colecciones de contenido estático, sus integraciones con otros frameworks o su modo de renderizado en servidor, entre otros, ha hecho que Astro haya ganado popularidad en la comunidad de desarrolladores.

¿Quieres aprender más sobre sus posibilidades? Pues vamos a ello ?.

Índice

1. ¿Qué es Astro?
2. Características principales
   • Soporte a contenido estático
   • Agnóstico a frameworks UI
   • Arquitectura de islas
   • Integraciones
   • API o server endpoints
   • Optimización de imágenes
   • Internacionalización
   • View Transitions
   • Prefetch
   • Astro DB
3. Ejemplos de aplicaciones en Astro
4. Conclusiones

Empecemos por el principio, ¿qué es Astro?

Hace 3 años, cuando Astro nació y se encontraba en su versión 0.18, hice un artículo dónde comentaba que era un generador de sitios estáticos.

Desde que añadieron soporte a renderizado desde el servidor y rutas API con las que poder construir toda una interfaz REST, hace que se haya convertido en un framework full-stack que no está lejos de hacer frente a grandes como Next.js.

De código abierto, Astro fue creado por Fred K. Schott (también conocido por crear Snowpack) junto a varios colaboradores que sumado a una gran comunidad de desarrolladores creo que, y esto es opinión personal, va camino de ser un referente a tener en cuenta.

Características principales

Intentaré hacer esta lista lo más breve posible pero quiero que se vean la mayoría de las capacidades que tiene, mira.

Soporte a contenido estático

Astro tiene soporte de forma nativa para ficheros en formato Markdown que, si los creamos dentro de la carpeta pages, estaremos habilitando una ruta de nuestra aplicación accesible desde el navegador. Gracias a su integración oficial, podemos tener también soporte a MDX el cual nos permite añadir template en formato JSX e incluso importar componentes externos.

Además de tener soporte nativo a ficheros markdown, existe una funcionalidad llamada Content Collection que nos permite añadir contenido tipado y validaciones, relacionarlo entre sí, etc. Estas colecciones irán en la carpeta reservada content que, además del soporte a ficheros .md también tiene soporte a ficheros .yaml y .json.

└── src/content
    │── blog
    │   ├── post-1.md
    │   ├── post-2.md
    └── authors
        ├── grace-hopper.json
        └── alan-turing.json

Agnóstico a frameworks UI

Astro tiene su propio sistema de componentes pero estos componentes nunca se renderizan en el cliente, siempre son en tiempo de compilación o bajo demanda (SSR).

Podemos añadir contenido dinámico gracias a sus integraciones oficiales con soporte a multitud de frameworks UI del lado del cliente incluso permitiendo tener componentes de diferentes librerías en el mismo proyecto. Es decir, podemos utilizar componentes hechos en Lit, React, Vue, Svelte, etc; también existen integraciones no oficiales para Angular o Qwik.

Arquitectura de islas

Imagina que todo el HTML estático de tu sitio web fuese el mar; las islas son pequeños elementos o widgets dinámicos dentro de ese mar estático, por ejemplo, un gráfico, un carrusel de imágenes, un selector de tema claro-oscuro, etc.

Astro renderiza todo los componentes en el lado del servidor, eliminando automáticamente todo el JavaScript no esencial del lado del cliente. Gracias a sus directivas client:* , indicamos a Astro en que momento debe “alimentar” o hidratar los componentes de las islas o chunks.

Te dejo por aquí dos enlaces por si quieres profundizar en arquitectura basada en islas:

• https://jasonformat.com/islands-architecture/
• https://www.patterns.dev/vanilla/islands-architecture/

Integraciones

Las integraciones nos permiten extender las funcionalidades nativas de Astro. Algunas ejemplos de estas integraciones son las que implementan soporte a diferentes frameworks de UI (React, Vue, etc), adaptadores de Server Side Rendering (Node, Vercel, Netlify o Cloudflare), base de datos, TailwindCSS, MDX entre otros.

Puedes ver todo el catálogo accediendo a astro.build/integrations.

API o Server endpoints

Con el soporte a adaptadores de Server Side Rendering, Astro añadió la posibilidad de poder crear rutas de tipo API en tu proyecto. Podremos crear nuestra propia interfaz REST creando, dentro de la carpeta pages, ficheros .js o .ts que exportan funciones con el nombre de los métodos HTTP de los endpoints que queramos crear.

Por ejemplo, para exponer un endpoint de tipo GET que obtenga un listado de libros podremos crear el fichero src/pages/api/books.ts y dentro exportar el método de la siguiente formar:

export const GET: APIRoute = ({ params, request }) => {
  return new Response(JSON.stringify({
      data: books
    })
  )
}

Optimización de imágenes

Uno de los mayores problemas de rendimiento de una web es la carga de imágenes (dimensiones, tamaño, prioridad de carga, layout shifts).

Dentro del paquete astro:assets encontramos dos componentes: Image y Picture. Estos componentes nos facilitarán tanto la carga como la optimización de las imágenes con posibilidad de transformar las dimensiones, el formato y la calidad de una imagen local o remota.

<!-- Componente Astro -->
---
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png";
---

<!-- Salida con la imagen optimizada -->
<img src="/_astro/my_image.hash.webp" width="1600" height="900" loading="lazy" alt="Una descripción de mi imagen." />

Internacionalización

Astro nos permite la posibilidad de crear un proyecto con múltiples idiomas. Gracias a su router y su configuración de i18n, podremos exponer diferentes versiones de nuestra aplicación de dos formas distintas:

• Con prefijo a nivel de path, por ejemplo, example.com/es/blog/ y example.com/en/blog/
• Con diferentes dominios, por ejemplo, https://en.example.com y https://example.es. Esta opción sólo está disponible para los adaptadores de Node y Vercel.

View Transitions

Las view transitions, o transiciones entre vistas, permiten añadir animaciones fluidas entre páginas sin recargar la pantalla completamente, evitando el efecto “blink” o parpadeo que tienen las navegaciones en webs multipágina.

Haciendo uso de la nueva API nativa del navegador View Transitions se consigue simular el comportamiento de las transiciones entre rutas de una SPA al momento de cambiar el DOM en una navegación.

Astro añade una capa de abstracción de esta API nativa gracias a su componente <ViewTransitions> y sus directivas HTML transition:*.

¡Importante! Esta API no está soportada en todos los navegadores al momento de escribir este artículo. Puedes comprobar el soporte que tiene actualmente en caniuse.com/view-transitions.

Prefetch

Gracias al prefetching de recursos, podremos descargar en segundo plano dependencias o elementos que podrían ser requeridos en un futuro, incluso otras páginas de la aplicación.

Imagina que tienes un enlace llamado «Siguiente página» y le indicas al navegador que cuando se muestre en el viewport se descargue esa siguiente página. Antes de que el usuario de al enlace, el navegador ya tendrá descargada la página y la mostrará inmediatamente, mejorando con creces la experiencia de usuario.

En Astro podremos configurar diferentes estrategias de prefetching a diferentes páginas de la aplicación:

• hover(por defecto): precarga cuando pasas el cursor o te enfocas en el enlace.
• tap: precarga justo antes de hacer clic en el enlace.
• viewport: precarga cuando los enlaces entran en el viewport.
• load: precarga todos los enlaces en la página cuando finalice la carga de la página actual.

Astro DB

Recién incluido en su versión 4.5, Astro DB es una base de datos diseñada exclusivamente para Astro. Basada en libSQL (fork de SQLite también open source) y con ORM incluido, podrás gestionar una BBDD directamente en tu proyecto.

Ejemplos de aplicaciones en Astro

Y es que no hay nada como ver proyectos que ya se han hecho para darnos cuenta de las posibilidades que tenemos. Por aquí os dejo algunos ejemplos y pruebas de concepto hechas con Astro:

• Blog de Firebase: https://firebase.blog/
• Web de referencia con roadmaps de aprendizaje: https://roadmap.sh/
• IDE colaborativo en el navegador: https://stackblitz.com/
• Encuesta anual por excelencia del ecosistema JavaScript: https://stateofjs.com/
• Proyecto IDX de Google: https://idx.dev/
• NordVPN: https://nordvpn.org/
• Web de eventos sobre tecnología en España: https://eventos.wiki/
• Prueba de concepto con 3D y View Transitions de Maxi Ferreira: https://astro-3d-view-transitions.pages.dev/
• Otra prueba, esta vez haciendo un reproductor de música: https://astro-records.pages.dev/

Puedes ver un listado más completo en astro.build/showcase/.

Conclusiones

En este primer vistazo hemos hecho un repaso de alto nivel por la mayoría de las características principales que tenemos actualmente disponibles con Astro. En el próximo artículo veremos como crear un proyecto, estructura del proyecto e introduciremos los componentes nativos de Astro y sus tipos.

Cómo ya he comentado, creo que es un framework a tener en cuenta por su potencial, facilidad de aprendizaje, su versatilidad y compatibilidad con diferentes librerías, además de por su comunidad y el soporte que están dando al framework.

¡Muchas gracias por llegar hasta el final! ?