Razones para aprender Astro, el framework web de JavaScript

Sí, así como lo leíste. Astro ha estado repuntando como uno de los frameworks web más prometedores y que muchas empresas y startups están comenzando a utilizar para construir sus sitios web.

Así que en esta ocasión, te voy a compartir algunas razones por las que deberías considerar aprenderlo, ya que es una herramienta que te permitirá construir sitios web de forma eficiente, rápida y con la herramienta frontend de tu preferencia.

Antes, déjame contarte un poco más sobre esta herramienta.

¿Qué es Astro?

Es un framework web basado en JavaScript enfocado en permitir a los desarrolladores crear sitios web basados en contenido, optimizados para construirse rápidamente y server-first. Es decir, el sitio web se construye con el objetivo de renderizar los componentes en el lado del servidor, evitando enviar código JavaScript innecesario al cliente.

Algunas de sus principales características son:

• Te permite gestionar contenido utilizando su capa incorporada para trabajar con archivos Markdown y MDX.
• Cero JavaScript por defecto.
• Middleware, Actions y variables de entorno.
• Adaptadores de despliegue.
• Integración con múltiples herramientas frontend, tales como React, Vue, Svelte, entre otros.
• DevToolbar.

Su filosofía principal es brindar una experiencia fácil y sencilla para crear sitios web con un enfoque en el rendimiento.

Performance by default

Astro se caracteriza por brindar sitios web que tengan un rendimiento casi que perfecto, ya que todo el contenido se renderiza en tiempo de ejecución y esto permite que no carguemos código JavaScript innecesario en nuestras páginas.

De hecho, de acuerdo al sitio web de la documentación, Astro se posiciona como el mejor en esto. Incluso por encima de Next.js, otro framework web que tiene mucha popularidad hoy en día.

Razón 1: Arquitectura de Islas (Astro Islands)

Si actualmente te encuentras trabajando con herramientas de frontend moderno, uno de los patrones que se utilizan más a menudo es la arquitectura basada en componentes.

Sin embargo, Astro incorpora una arquitectura diferente, una arquitectura en islas. El término fue introducido por Katie Sylor-Miller Arquitecta de Frontend en Etsy en 2019, y la idea se expandio en Agosto de 2020 gracias a Jason Miller creador de Preact.

La idea principal de esta arquitectura es construir algo de forma parcial o con una hidratación selectiva, la mayoría de los frameworks web hidratan y renderizan la página web entera como una aplicación JavaScript completa.

Pero, ¿qué es en realidad una isla?

En astro, una isla corresponde a un componente mejorado de la interfaz de ussuario que se hidrata de forma independiente del resto de la página. Anteriormente, solo teníamos islas en el cliente (client islands), sin embargo, con el auge del desarrollo del lado del servidor (server side) ahora también tenemos islas en el servidor (server islands).

En particular, cada isla permite renderizar contenido estatico HTML o dinámico sin carga en el cliente. Esto permite que el contenido se renderice de forma más rápida y eficiente, ya que no se necesita cargar todo el código JavaScript de la aplicación.

Si quieres leer un poco más sobre este tema, te recomiendo leerlo directamente en la documentación: Island Architecture.

Razón 2: Integración con múltiples herramientas frontend

Hoy en día, uno de los principales problemas que enfrentan los desarrolladores es la elección de una herramienta frontend para construir sus aplicaciones. Actualmente, existen muchas opciones en el mercado y cada una tiene sus propias ventajas y desventajas.

Entonces, ¿por qué no utilizar todas las herramientas frontend que te gustan en un solo lugar? Esta gran característica se debe a la arquitectura con la que Astro trabaja (Island Architecture).

Esto te permitirá construir tus islas con React, Vue, Svelte, Preact, Alpine y Solid. Sin embargo, también puedes utilizar Vanilla JavaScript si así lo prefieres.

Aquí te dejo un ejemplo de cómo puedes crear islas en diferentes tecnologías y utilizarlas dentro de Astro:

// MyReactComponent.jsx
export default function MyReactComponent() {
  return (
    <div>
      <h1>Hello, Astro + React!</h1>
      <p>This is a React component</p>
    </div>
  )
}

<template>
  <div>
    <h1>Hello, Astro + Vue!</h1>
    <p>This is a Vue component</p>
  </div>
</template>
<script setup lang="js">
 // MyVueComponent.vue
</script>

---
// index.astro
import MyReactComponent from './MyReactComponent.jsx'
import MyVueComponent from './MyVueComponent.vue'
---

<MyReactComponent />
<MyVueComponent />

Esto facilita que puedas moverte de una herramienta diferente a otra sin tener que preocuparte por la integración, ya que Astro se encarga de ello, por lo que su adopción es mucho más sencilla y rápida.

¿Recuerdas que te mencioné que Astro no tiene JavaScript por defecto? Estos componentes que se mostraron en el ejemplo anterior se renderizan de forma completamente estática, lo que significa que no se envía código JavaScript al cliente.

Por lo que, si necesitas que estos componentes tengan interactividad, puedes agregarla de forma selectiva utilizando la directiva client en el componente.

---
// index.astro
import MyReactComponent from './MyReactComponent.jsx'
import MyVueComponent from './MyVueComponent.vue'
---

<MyReactComponent client:load />
<MyVueComponent client:idle />

Puedes leer un poco más aquí: Hydrating Interactive Components.

Razón 3: Cero JavaScript por defecto

Si tu principal objetivo es crear un sitio web que cumpla con los Core Web Vitals de Google y que tenga un rendimiento excepcional, Astro es la herramienta que necesitas.

Tal y como lo hemos visto a lo largo de este artículo, Astro se enfoca en brindarnos solo el código JavaScript que sea fundamental para ofrecer interactividad al usuario. Algunos otros frameworks web, como Next.js, por ejemplo, envían todo el código JavaScript al cliente, lo que puede afectar el rendimiento de tu sitio web. Es por ello que poco a poco han ido adoptando lo que se conoce como Pre-rendering (es decir, creo el contenido parcialmente y luego lo completo).

Razón 4: Enfoque en el contenido

Sí, como bien lo escuchaste. Una de sus características clave es que te permite crear sitios web enfocados en el contenido. Esto se debe a que Astro incorpora una capa para trabajar con archivos Markdown y MDX, donde puedes escribir tu contenido de forma sencilla y rápida.

---
title: Mi primer post en Astro
---

# Hola, mundo!
Este es mi primer post en Astro.

Y esto no es todo, ahora con la última versión se ha incorporado una nueva característica que te permite construir loaders para obtener el contenido desde otras fuentes como APIs, CMS, bases de datos, etc.

const countries = defineCollection({
  loader: async () => {
    const response = await fetch("https://restcountries.com/v3.1/all");
    const data = await response.json();
    // Must return an array of entries with an id property, or an object with IDs as keys and entries as values
    return data.map((country) => ({
      id: country.cca3,
      ...country,
    }));
  },
  schema: /* ... */
});

Esto, sumado a las características de su manejo de islas, permite a los desarrolladores construir sitios web basados en bloques, ofreciendo a sus usuarios la capacidad de crear sitios web dinámicos que se puedan actualizar de forma sencilla.

Simplemente, esto le da a Astro una ventaja competitiva muy amplia sobre otros frameworks web.

¿Alguna vez te ha tocado trabajar con sitios en múltiples idiomas?

No te preocupes, gracias a que su sistema de rutas está basado en archivos y a su capa de contenido, puedes crear sitios web multilingües sin tantas complicaciones. Ya sea que lo hagas con contenido local (Markdown/MDX) o con contenido remoto (APIs, CMS, etc).

Razón 5: No solo es para sitios web estáticos

Aunque Astro se ha colocado como una de las herramientas que mejor experiencia ofrece a los desarrolladores para construir sitios web estáticos, también es posible construir aplicaciones web dinámicas.

Al igual que otras herramientas, este posee una capa de enrutamiento basada en archivos para construir la estructura de tu proyecto. Además, puedes utilizar sus características en el servidor para diseñar aplicaciones web dinámicas, como, por ejemplo, una tienda en línea, entre otros casos de uso.

Entre ellas podrás encontrar:

• Middlewares.
• Endpoints.
• Astro Actions.
• Server Side Rendering.
• Variables de entorno.

Razón 6: Es fácil de aprender

Si ya tienes experiencia trabajando con herramientas frontend modernas, entonces no tendrás ningún tipo de problema en adaptarte. Y si eres relativamente nuevo en este mundo, Astro te lleva de la mano y sigue una filosofía de ser fácil de utilizar y aprender.

Uno de los principales problemas con los que el frontend moderno se ha topado es con la forma en la que escribimos cada elemento que compone un sitio web o aplicación. Sin embargo, Astro sigue el mismo estándar en sus propios componentes, haciéndote sentir que escribes estructura de HTML sin ningún otro tipo de carga cognitiva adicional.

Esto hace sentir a muchos desarrolladores que están escribiendo y generando sitios de forma tradicional. Algo que muchos en el ámbito del frontend han estado buscando.

Razón 7: SEO-first

Enfoque en performance, enfoque en contenido y sin JavaScript por defecto. No se le puede pedir más a un framework web.

Esto ha permitido que empresas a nivel global lo seleccionen como su herramienta principal, ya que al tener todos estos elementos, se garantiza que el sitio web tenga un buen rendimiento y sea indexado de forma correcta por los motores de búsqueda, tales como Google.

Hoy en día, un sitio web que no cumple con lo mínimo necesario para ser indexado por Google simplemente no existe.

Conclusión

Así que ya lo sabes, necesitas rendimiento, necesitas gestionar contenido, necesitas una herramienta que no te complique la vida… necesitas Astro.

Si estás interesado en aprender más sobre esta herramienta, te recomiendo visitar su sitio web oficial y comenzar a explorar todo lo que puedes hacer con ella. Y si todavía tienes dudas, tengo un sitio web creado completamente en Astro que te puede ayudar a comprender su potencial… estás leyendo este artículo en él.

Nos vemos pronto, y espero que te animes a aprender Astro.