¿Qué es Astro.js y cómo utilizarlo para crear sitios web?

19min

Astro uno de los frameworks full stack de nueva generación que están conquistando rápidamente una gran comunidad de desarrolladores, especialmente entre los desarrolladores frontend.

Índice

¿Qué es Astro.js?

Astro.js es un framework fullstack que permite desarrollar sitios web modernos y versátiles, con características pensadas para la optimización y seguridad, aportando además una grata experiencia para el desarrollo. 

Básicamente, permite crear páginas web definiendo su estructura mediante el sistema de carpetas y archivos de tu proyecto. Además resulta sencillo porque puedes usar herramientas elementales para la edición de archivos de texto plano. También es destacable su versatilidad porque permite crear páginas de contenido estático pero también pequeños scripts para acceder a datos con los cuales componer las páginas web de manera dinámica. 

Una de las características principales de Astro es su filosofía «cero JavaScript por defecto» que básicamente consiste en que envía a los clientes HTML y CSS plano y estático, dejando el JavaScript únicamente para las partes donde es necesaria la interacción con el usuario. También es clave su capacidad para construir páginas muy optimizadas para el rendimiento y el SEO, ya que es capaz de generar el contenido en el momento de build, creando la mayoría de su código en HTML y CSS estáticos que cargan muy rápido y nos aportan mucha seguridad al no depender de programación en el servidor.

Es un framework especialmente indicado para muchos tipos de proyectos, aunque principalmente le sacaremos más ventajas en los sitios web basados en contenido. Sus tecnologías están estrechamente relacionadas con el mundo del desarrollo frontend, por lo que la comunidad de diseñadores y desarrolladores de JavaScript se sentirán muy cómodos con él.

Backend, API y persistencia en Astro.js 

Aunque la experiencia de desarrollo se alinee muy bien a la que nos ofrecen los frameworks frontend, Astro.js es un framework fullstack que también se puede ocupar de la parte que realizamos en el backend. 

Para ello, se usa el lenguaje JavaScript / TypeScript bajo plataformas de ejecución como NodeJS o incluso Deno. Con ellas seremos capaces de realizar funcionalidades comunes en las aplicaciones backend como endpoints de API o persistencia de datos. 

Creación de endpoints API y rutas de servidor dinámicas en formato JSON

Con Astro podemos perfectamente crear lo que sería un API que ofrece datos en formato JSON. No es que sea el framework más adecuado si tenemos que desarrollar un servicio web complejo, pero permite crear APIs de una manera sencilla y rápida para que podamos consumirlas en nuestras aplicaciones web con muy poco esfuerzo.

Como hemos dicho, Astro.js es un lenguaje amistoso con desarrolladores frontend. Por ello utiliza JavaScript para la creación de las APIs, o también TypeScript si lo preferimos. Esto hace los desarrolladores frontend no necesiten aprender lenguajes adicionales y facilita la transición del desarrollo entre backend y frontend. 

Configuración de adaptadores SSR para desplegar lógica backend en plataformas edge

Con Astro podemos crear todo tipo de modelos de aplicación, desde las SPA que se alimentan de servicios web en modo API hasta sitios basados en server side rendering, también conocido por las siglas SSR. 

En el modelo SSR se beneficia de manera notable de las plataformas edge, que usan despliegues en servidores distribuidos a lo largo del mundo. La diferencia importante de una plataforma edge de un servidor tradicional es la siguiente:

  • En los despliegues backend tradicionales tenemos un servidor donde se ejecuta el  código y se accede a bases de datos. Ese servidor está alojado en un centro de datos en alguna parte del mundo.
  • En las plataformas edge la diferencia clave consiste en que los servidores no están en un lugar físico sino que se puede usar cualquier nodo para la ejecución del backend. Al procesarse el código en el nodo más cercano al usuario, hace que la distribución sea más ágil debido a una menor latencia al entregar los contenidos. 

Por ello, aunque tus páginas requieran procesarse para construir el HTML se puede alcanzar una mayor optimización.

Conexión nativa con bases de datos SQL y NoSQL mediante ORM modernos

Con AstroJS podemos utilizar todo el ecosistema JavaScript que es uno de los más ricos en la actualidad, gracias a la cantidad de herramientas que tenemos disponibles para NodeJS. 

Entre las muchas herramientas que contamos destaca la posibilidad de utilizar todo tipo de ORMs, apoyados con bases de datos relacionales o alternativas NoSQL.

Consumo seguro de variables de entorno y secretos del sistema en el servidor

Por supuesto, Astro también facilita lidiar con variables de entorno y secretos de una manera segura y práctica. 

Integración ágil con Headless CMS para la gestión dinámica de contenidos

Si tuviéramos que destacar alguna desventajas de tecnologías similares a Astro habría que mencionar la carencia de herramientas de CMS maduras y ampliamente soportadas como WordPress. Sin embargo, esto está cambiando de manera bastante rápida por la proliferación de servicios de CMS headless que nos ofrecen ventajas muy importantes a la vez que una gran experiencia de usuario.

Básicamente estos servicios permiten administrar el contenido con una excelente experiencia de usuario y luego acceder a ese contenido mediante un origen de datos que se usa en el momento del build del sitio web, creando las correspondientes páginas dinámicamente con el contenido actualizado.

Ventajas de usar Astro.j para tu proyecto web

Veamos a continuación cuáles son las ventajas de Astro para el desarrollo de sitios y aplicaciones web. 

Carga ultrarrápida y rendimiento óptimo gracias a la arquitectura de islas

Las islas son uno de los puntos fuertes de Astro.js que merece la pena destacar. Para entenderlas conviene pensar en cómo funcionan las aplicaciones frontend tradicionales en frameworks como React o VueJS.

Básicamente los frameworks frontend basan su código en una gran cantidad de JavaScript que tiene que descargarse en el ordenador o móvil del usuario para poder montar la página y permitir la interactividad con el usuario. Por eso, generalmente sitios creados con React o similares, hacen que se tenga que descargar mucho código JavaScript para la primera renderización, que además necesita procesarse en el cliente, lo que puede llevar tiempo adicional y mayor consumo de recursos del dispositivo del usuario.

AstroJS modifica este paradigma con el concepto de islas. Básicamente una isla es una parte interactiva del sitio web que es capaz de aportar dinamismo e interactividad. Sin embargo las islas se centralizan solamente donde realmente se necesita JavaScript . Por ejemplo, cuando una página web tiene contenido Astro es capaz de generar la mayor parte del código en HTML y CSS, de modo que el bloque principal de contenido se produce y transmite de manera estática. Luego, para las partes que realmente requieren de respuesta interactiva, como por ejemplo un botón o una interfaz dinámica más avanzada, Astro.js compone una isla. 

Esto hace que el peso en JavaScript se focalice únicamente en aquellas partes del documento web que realmente lo requiere, evitando que el cliente necesite renderizar todo el sitio web en base a código JavaScript descargado y procesado en local. 

Reducción drástica del tamaño del bundle eliminando JavaScript innecesario por defecto

Las propias islas permiten que los bundles de JavaScript se reduzcan bastante, ya que simplemente se utiliza JavaScript en los lugares que realmente son necesarios. Esto hace que la primera carga de las páginas Astro sea muy rápida en comparación con páginas dinámicas modernas que han sido creadas únicamente con frameworks como React. 

Flexibilidad absoluta para combinar múltiples frameworks de frontend en un solo proyecto

De todos modos, si tienes unas costumbres más fijas o prefieres trabajar de una manera determinada Astro.js te ofrece también una gran flexibilidad para que el framework se adapte a ti en vez de adaptarte tú a sus restricciones. 

Justamente este detalle ha hecho que la comunidad de desarrolladores se haya lanzado a usarlo con entusiasmo. En este sentido hay que destacar la diferencia con frameworks como Next.js, basado en React, o Nuxt.js que se basa en Vue… En estos stacks debes ceñirte a tecnologías determinadas, que pueden hacer que te sientas un poco restringido. Sin embargo, con Astro no te obligas a usar siempre una tecnología en concreto, sino que puedes usar la que te viene bien en cada caso. Esto hace que puedas sentirte a gusto a la hora de trabajar con proyectos de diversos tipos o tener en un mismo proyecto a desarrolladores con backgrounds distintos.

Optimización nativa para SEO técnico y excelente puntuación en Core Web Vitals

Otra ventaja muy importante es la optimización de cara al usuario y a los buscadores. En la actualidad Astro es uno de los frameworks más optimizados, lo que permite el desarrollo de páginas muy rápidas, ya sea por distribuir la mayor parte del contenido sin necesidad de renderización del lado servidor, o por restringir el Javascript del lado del cliente a las partes que realmente lo necesiten. Esto hace que las páginas realmente vuelen, aportando una excelente valoración en métricas Core Web Vitals. 

Curva de aprendizaje suave utilizando sintaxis HTML estándar y Markdown estructurado

Otra de las ventajas fundamentales de AstroJS es que la curva de aprendizaje es muy suavizada. Primero porque mucho del trabajo que realizaremos con Astro se basa simplemente en gestionar archivos planos en lenguajes sencillos como HTML y CSS o incluso Markdown (un lenguaje de creación de contenido, muy sencillo de utilizar y muy fácil de escribir por humanos). 

Obviamente, si el proyecto se sale un poco de lo básico tendremos que trabajar más con lenguajes como JavaScript o TypeScript, pero el hecho de ofrecernos un punto de entrada elemental en archivos planos hace que la mayor parte de las personas se encuentren cómodas desde el primer día al trabajar con Astro.js.

Casos de uso de Astro.js

Dentro del abanico de posibilidades y casos de uso que nos ofrece Astro, podemos destacar tanto sitios web tradicionales como aplicaciones frontend. Sin embargo, donde vamos a sacarle mayor partido es en los sitios basados en contenido.  Vamos a ver ahora los casos de uso más populares para este framework, lo que nos dará una idea más clara sobre hasta qué punto resulta versátil.

Creación de blogs corporativos y portfolios profesionales optimizados para buscadores

Como los frameworks SSG tradicionales, AstroJS es ideal para hacer páginas web de contenido corporativo o la realización de blogs. Para ello únicamente tenemos que definir el contenido en archivos y texto plano realizados en Markdown.

Además, la estructura del sitio se define a través de la creación de carpetas, de modo que trabajar con Astro es tan sencillo como manejar archivos y ser capaz de combinar lenguajes como Markdown, CSS o HTML.

Desarrollo de eCommerce veloces integrados con pasarelas de pago y Headless CMS

Aparte de sitios de contenido AstroJS también es capaz de realizar páginas de comercio electrónico, en las cuales podemos crear experiencias totalmente personalizadas para nuestros usuarios. 

En este caso se recomienda combinar Astro con alguna plataforma de CMS headless que permita editar el contenido de nuestro catálogo de productos y utilizar incluso servicios como Stripe para facilitar el proceso de pago se electrónicos.

Sitios web informativos y portales de noticias con millones de visitas diarias

Debido a su capacidad de generar contenido, mayormente estático y distribuido a través de plataformas Edge, es ideal para portales de noticias u otras páginas de contenido con tráfico masivo. Si lo que nos interesa es el rendimiento y la seguridad es una opción excelente.

Landing pages de alta conversión para campañas de marketing y captación de leads

Al mismo tiempo Astro.js resulta muy apropiado para construir páginas más sencillas (sin dejar de ser atractivas) como landing pages. 

Esto es así por varios motivos: por una parte por su capacidad de optimización y por otra parte por la sencillez de desarrollo y rapidez de puesta en marcha de sus proyectos, incluso el despliegue.

Documentación técnica interactiva y plataformas educativas de código abierto

Otro caso de uso también muy frecuente es la creación de documentación técnica de proyectos de software libre. Crear contenido en base a Markdown hace que sea sencillo mantener los sitios web y además usar tecnologías muy relacionadas con las que la comunidad de desarrollo usa en el día a día.

¿Dónde y cómo alojar tu proyecto de Astro.js?

Ahora que has conocido Astro, quizás te haya entrado el gusanillo y quieras probar este framework y experimentar las ventajas que ofrece. No obstante, para acabar de decidirte por la tecnología seguramente te interesará saber cuáles son las modalidades de despliegue y tipos de servidores que soporta. 

Como en otros puntos que ya hemos abordado de este post verás que Astro aporta mucha flexibilidad.

Despliegue estático clásico (SSG)

Para empezar podemos publicar aplicaciones realizadas con Astro en su modalidad static site generator (SSG) en servidores de páginas estáticas. Esto hace que en la práctica puedas publicar sitios creados con Astro en los servidores más básicos y más económicos que puedas encontrar. Esta modalidad aporta una elevadísima optimización, ya que todo el contenido se encuentra ya totalmente listo para servir, y a la vez mucha seguridad, ya que no existen programas o lenguajes en el servidor donde se puedan introducir vulnerabilidades.

El uso de adaptadores SSR como Node.js, Cloudflare Pages o Deno

Si ya necesitas utilizar SSR (renderizado en el lado del servidor), será necesario contar con un servidor que tenga soporte a Node.js o otras plataformas de runtime para JavaScript o TypeScript como Deno.

Esto hace que la configuración de tu servidor requiera un poco más de trabajo, aunque son tecnologías muy sencillas de poner en marcha. Por otra parte estas soluciones además ofrecen un rendimiento muy elevado, haciendo que servidores con recursos verdaderamente limitados sean capaces de atender a miles de usuarios.

Configuración de redes de distribución de contenido (CDN) globales para lograr latencia cero en la carga

Si queremos sacarle un poco más de partido a las posibilidades de Astro, podemos utilizar servicios de distribución de contenido como los CDN. Es la mejor forma de eliminar la latencia con usuarios que se encuentran en distribuciones geográficas muy distantes. 

Configuración de pipelines de Integración y Despliegue Continuo (CI/CD) para flujos de trabajo ágiles

En cualquiera de las posibilidades anteriores, puedes utilizar todos los flujos modernos de pipelines para desplegar aplicaciones. Esto hace que Astro se alinee muy bien con todas las prácticas DevOps del desarrollo actual, haciendo sitios web que aprovechan las posibilidades del despliegue continuo y la entrega continua. 

En otras palabras, gracias a Astro.js podrás crear flujos de trabajo ágiles y totalmente automatizados para conseguir mejorar la entrega de tus sitios, con muy poco trabajo.

Enrutamiento avanzado e internacionalización nativa en Astro.js

Antes de acabar también queremos repasar una de las características más relevantes de la arquitectura de las aplicaciones desarrolladas con Astro, como es la enrutación de las distintas páginas o recursos que consta un proyecto web. Nuevamente, en este segmento Astro ofrece una experiencia de desarrollo óptima, a la vez que una elevadísima versatilidad. 

Enrutamiento basado en archivos

El enrutamiento básico que utilizamos en Astro está basado en archivos. De este modo, cuando nosotros colocamos los archivos en carpetas o subcarpetas dentro del proyecto, lo que estamos haciendo automáticamente y de manera muy natural es generar rutas que reflejan la estructura de carpetas y archivos de nuestro sitio. 

Esto hace que el trabajo sea muy intuitivo, ya que simplemente necesitamos administrar archivos dentro de carpetas para crear la estructura de una página o aplicación web. 

Generación de rutas dinámicas en entornos estáticos mediante el uso de la función getStaticPaths()

En entornos de generación de sitios estáticos (modelo SSG), el servidor no existe en tiempo de ejecución para responder a peticiones al vuelo de los usuarios. Por lo tanto, Astro necesita saber durante el proceso de compilación (build time) exactamente qué páginas debe generar. Para ello se usa la función getStaticPaths().

Esta función es capaz de obtener los datos en tiempo de compilación del proyecto y generar distintas páginas, mapeando esos datos por medio de parámetros y propiedades que acaban siendo consumidas por plantillas, para generar cada una de las páginas del sitio.

Configuración de proyectos multi-idioma (i18n) de forma nativa y sin dependencias pesadas de terceros

Si tu sitio web requiere distribuirse en varios idiomas no necesitas buscar nada más, ya que Astro es capaz de gestionar la internacionalización de forma nativa, sin librerías externas. Esto es perfecto porque nos facilita el trabajo de una manera consistente a lo largo de distintos proyectos.

Implementación de estrategias de redirección eficientes tanto del lado del servidor como del lado del cliente

Los anteriores puntos sobre enrutamiento se complementan con algunas técnicas avanzadas que nos aportan muchas ventajas y versatilidad tanto en el lado del servidor como en el lado del cliente.

Por ejemplo, tenemos las rutas dinámicas multinivel que nos permiten capturar rutas anidadas, incluso aunque no tengas clara la profundidad de carpetas que puedas tener que gestionar. Por ejemplo, podrías tener una ruta con varios segmentos como como /documentacion/guias/inicio/instalacion/etc y para ello simplemente recibir todas esas rutas en un único punto de entrada como src/pages/doc/[…slug].astro.

También podemos construir paginación de elementos sin tener que programar gracias a la función paginate() que encontramos dentro del contexto de getStaticPaths(). Esto nos permite dividir automáticamente un array de datos en varias páginas como /blog/1, /blog/2, etc.

¿Cómo adoptar Astro y extender sus capacidades?

Trabajar con Astro.js es realmente sencillo. Podemos crear proyectos nuevos en instantes gracias a comandos de terminal y luego tenemos comandos para agilizar distintos pasos del proceso de desarrollo y despliegue del sitio prácticamente sin esfuerzo. De este modo, adoptar Astro e integrar nuevas funcionalidades en tu flujo de trabajo es un proceso elemental que permite maximizar la productividad del desarrollador.

El comando mágico astro add

Comenzamos destacando el comando estrella del CLI de Astro.js: «astro add».  

Este comando es un  automatizador que configura integraciones complejas en un solo paso. Nos permite añadir tecnologías como Tailwind o React sin ningún esfuerzo. Gracias a este comando no necesitas hacer numerosos pasos para poder contar con cosas nuevas en tu proyecto. No necesitas instalar dependencias a mano, crear o configurar archivos, registrar tipos de TypeScript…

Todo ello además se guarda en un archivo llamado astro.config.mjs que permite registrar las integraciones de manera sencilla y reproducible.

¿Cómo trasladar un sitio web heredado desde WordPress, Gatsby o Next.js?

Si quieres migrar un proyecto que tienes en otra tecnología a Astro existen mecanismos y vías ya diseñadas por la comunidad. Vamos a ver algunos ejemplos relevantes para tener una idea. Si vienes desde WordPress te recomendamos usar el propio CMS WordPress como headless. Esto hace que WordPress exponga un REST API que luego puedes consumir en tiempo de build desde Astro para generar todas las páginas que anteriormente tenías en WordPress.

Otra opción sería  migrar los artículos a archivos Markdown o MDX dentro de Content Collections.

Si usamos otros generadores de sitios estáticos más antiguos como Gatsby y queremos beneficiarnos de las ventajas de Astro el camino es todavía más sencillo, ya que la mayor parte del contenido seguramente lo tengamos en Markdown, lo que hace que simplemente tengas que trasladar los archivos a la estructura de carpetas de Astro. En el caso particular de Gatsby tendrás que reemplazar además las consultas GraphQL complejas por código JavaScript por ejemplo con fetch.

Otros frameworks modernos como Next.js también soportan un camino más o menos sencillo para migrar a Astro. En este caso tendrás que importar y reutilizar tus componentes de React dentro de plantillas de Astro. A mayores tendrás que asignar directivas de hidratación de Astro para definir dónde se debe procesar el código (client:visible / client:idle). 

Automatización de tareas de desarrollo con la interfaz de línea de comandos (CLI) de Astro

Aparte del práctico y efectista comando «astro add», la CLI de este framework nos permite hacer muchas otras tareas de manera simplificada y productiva, tanto en el desarrollo de partes de tu proyecto como a la hora de implementar flujos de integración continua (CI/CD):

Por ejemplo tienes «astro check» que examina el proyecto completo identificando errores de sintaxis y tipos en plantillas .astro y TypeScript. Por otro lado tienes «astro sync» que genera los tipos automáticos para las colecciones de contenido antes del proceso de compilación.

Luego tienes los típicos comandos de llevar a producción como «astro build» y «astro preview» que permite previsualizar el proyecto usando los archivos generados en el paso de producción.

Testing y calidad de código

Por último podemos hacer tareas de testing y mejora de la calidad del código. Para ello Astro implementa sistemas de lint y prettier por medio de plugins, que nos permiten estandarizar el estilo del código y prevenir errores comunes de sintaxis.

Para las pruebas unitarias Astro se integra muy bien con Vitest y para las pruebas End-to-End se pueden usar frameworks como Playwright o Cypress, testeando que las páginas HTML y las islas interactivas funcionen correctamente en los navegadores  de los usuarios.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: