Table of Contents
En los últimos años han aparecido muchos nuevos frameworks de frontend, ofreciendo a los desarrolladores un amplio abanico de opciones para elegir el que mejor se adapte a tus proyectos. En este artículo, analizaremos Astro, un proyecto de código abierto publicado con licencia MIT. La primera versión, v1.0, se lanzó en agosto de 2022 como un framework web adaptado para sitios web de alta velocidad y centrados en el contenido.
Un año más tarde, en agosto de 2023, lanzaron Astro 3.0 con un montón de nuevas características como transiciones de vista, rendimiento de renderizado más rápido, mejoras de SSR para serverless y salida de compilación optimizada, que cubriremos más adelante en el artículo. El 12 de octubre de 2023, anunciaron Astro 3.3 con interesantes actualizaciones, como el componente <Picture/> para el manejo de imágenes.
Astro.js es un framework web de aplicaciones multipágina. Indica que Astro renderiza las páginas web en el servidor, lo que explica por qué es tan rápido: mientras navegas entre páginas, obtendrás continuamente esas páginas. Aunque Astro también puede cargar perezosamente JavaScript del lado del cliente si nuestras páginas web requieren interactividad, entraré en más detalle sobre esto en el próximo capítulo.
Características de Astro
Arquitectura insular
La arquitectura insular, de la que fue pionera la arquitecta de frontend de Etsy Katie Sylor-Miller, es un concepto revolucionario en el desarrollo web. Consiste en separar los elementos estáticos de un sitio web, como imágenes y texto, que pueden renderizarse en el servidor y entregarse sin JavaScript, de los componentes interactivos que requieren JavaScript para ser interactivos. Al dar prioridad a estos elementos interactivos, una página web puede cargar primero sus funciones importantes, lo que mejora la experiencia del usuario.
Astro adopta plenamente esta arquitectura de islas y divide la interfaz de usuario (UI) en componentes más pequeños y aislados conocidos como «Astro Islands». Lo que diferencia a Astro de otros frameworks es su utilización de la hidratación parcial, ofreciendo compatibilidad con una variedad de bibliotecas de interfaz de usuario, incluyendo React, Svelte, Vue, y más. Los usuarios tienen la flexibilidad de mezclar y combinar estas bibliotecas para renderizar islas en el navegador a través de la hidratación parcial.
Astro optimiza el rendimiento de tu sitio web enviando código sin JavaScript. Por ejemplo, incluso si creas un componente React altamente interactivo, Astro entregará solo HTML y CSS, reservando la interactividad hasta que se active. Aquí es donde la hidratación parcial juega un papel vital en la mejora de la interactividad web.
Hidratación, en este contexto, significa añadir JavaScript al código HTML para hacerlo interactivo. La hidratación parcial carga selectivamente componentes individuales según sea necesario, manteniendo el resto de la página como HTML estático. La arquitectura Island fomenta la creación de componentes de interactividad pequeños y modulares.
Una de las características más destacadas de Astro es el control preciso que ofrece sobre cuándo introducir la interactividad :
– carga JavaScript simultáneamente con HTML.
– carga JavaScript cuando el navegador no tiene ninguna otra tarea que realizar
– carga JavaScript sólo cuando es visible para el usuario
– carga JavaScript sólo para un ancho de pantalla específico
– sólo renderización del lado del cliente
Por ejemplo, las islas de prioridad alta pueden incluir elementos como botones, etiquetas y navegación para la interacción inmediata del usuario. Las islas de prioridad media podrían ser elementos como un interruptor de modo claro/oscuro. Al segregar la interfaz de usuario en elementos estáticos e interactivos, Astro garantiza una experiencia de usuario rápida y eficiente al cargar los componentes interactivos sólo cuando es necesario.
El enfoque de la arquitectura de islas no sólo acelera el rendimiento, sino que mejora significativamente la clasificación SEO en los motores de búsqueda. Mejora la experiencia del usuario, minimiza el código repetitivo y ofrece una sólida compatibilidad con varias bibliotecas y frameworks CSS.
Marco agnóstico
Astro nos permite construir nuestro sitio web utilizando nuestro framework preferido; React, Vue, Svelte, SolidJS, Preact, Alpine, Lit, Web components, etc, y no está limitado a uno solo – podemos trabajar con múltiples frameworks simultáneamente. Podemos tener componentes React y Vue coexistiendo en la misma base de código. Si un día queremos emigrar de React a Vue o viceversa, podemos hacerlo gradualmente.
Si no tenemos partes dinámicas en nuestro proyecto, podemos construir nuestra web sólo con Astro, proporcionando una solución ligera y eficiente.
API de transiciones
Chrome y Astro han unido sus fuerzas para presentar la API View Transitions, una herramienta revolucionaria para los desarrolladores web. Con la ayuda de esta API, crear transiciones de estado fluidas será más fácil. Anteriormente, se trataba de una operación difícil que implicaba manejar variaciones de posición de desplazamiento y animaciones CSS. Este método fue rápidamente adoptado por el framework Astro, permitiéndole ofrecer la magia de las transiciones de página sin las típicas limitaciones de complejidad y rendimiento. Las transiciones de vista son ahora compatibles con Astro 3.0, permitiendo el uso de elementos compartidos entre rutas y proporcionando acceso a capacidades adicionales como animaciones personalizadas.
Comprendiendo la estructura del proyecto y la flexibilidad del renderizado
En Astro, la estructura del proyecto incluye elementos esenciales, como componentes, diseños, páginas y estilos. Vamos a sumergirnos en cada uno de estos componentes:
Componentes: Trozos de código reutilizables que pueden integrarse en todo su sitio web. Por defecto, estos componentes llevan la extensión de archivo .astro. Sin embargo, la flexibilidad de Astro te permite incorporar componentes no Astro creados con librerías populares como Vue, React, Preact o Svelte.
Layouts: Componentes reutilizables, pero que sirven como envoltorios de tu código, proporcionando estructura y organización a tus páginas web.
Páginas: Componentes especializados que se encargan del enrutamiento, la carga de datos y la creación de plantillas. El framework emplea enrutamiento basado en archivos para generar páginas web. Además, también puede utilizar enrutamiento dinámico para rutas URL más personalizadas.
Cada archivo creado en esta carpeta vuelve a una URL. Por ejemplo, un archivo llamado about nos daría disponibilidad para URLs /about.
Estilos: La carpeta «styles» sirve como repositorio para los estilos de tu sitio web. Astro se adapta perfectamente a varias opciones de estilo, incluyendo Sass, Scoped CSS, CSS Modules y Tailwind CSS.
Más allá de estos componentes estructurales, Astro ofrece varias capacidades adicionales. Proporciona un objeto global llamado «Astro», que da acceso a valiosas propiedades como props, cookies, params, redirección y más. Una característica notable es la ausencia de código repetitivo. Al definir un componente, no es necesario escribir la función de exportación.
En el fragmento de código siguiente, puede observar la inclusión de código JavaScript encerrado entre tres guiones, seguido de código HTML.
---
import GreetingHeadline from './GreetingHeadline.astro';
const name = "Astro";
---
<h1>Greeting Card</h1>
<GreetingHeadline greeting="Hi" name={name} />
<p>I hope you have a wonderful day!</p>
Por defecto, Astro funciona como un generador de sitios estáticos. Esto significa que todo el contenido se convierte en páginas HTML estáticas, una estrategia conocida por su optimización de la velocidad del sitio web. Sin embargo, cabe señalar que el desarrollo web puede exigir ocasionalmente un enfoque más dinámico.
Aunque Astro comenzó como un generador de sitios estáticos, ahora facilita tanto la generación de sitios estáticos (SSG) como el renderizado del lado del servidor (SSR) en función de los requisitos específicos de tu proyecto. Y puedes elegir qué páginas utilizarán cada enfoque. Podemos añadir el siguiente código a astro.config.mjs si la mayor parte o la totalidad de su sitio debe ser renderizado del lado del servidor:
import { defineConfig } from 'astro/config';
import nodejs from '@astrojs/node';
export default defineConfig({
output: 'server',
adapter: nodejs(),
});
O en lugar de ‘servidor’ si escribimos ‘híbrido’ será pre-renderizado a HTML por defecto. Deberíamos usar el híbrido cuando la mayoría de nuestras páginas sean estáticas.
Conclusión
Astro es una opción innovadora y adaptable en el mundo de los frameworks front-end, en rápida evolución. Con su enfoque único de «arquitectura en isla» y la capacidad de adoptar múltiples bibliotecas de interfaz de usuario, Astro ofrece a los desarrolladores trabajar con sus herramientas preferidas e incluso combinarlas, dando lugar a una experiencia de usuario sin fisuras.
Además, otra razón de peso para pasarse a Astro es que sus sitios estáticos ricos en contenido serán significativamente más rápidos utilizando Astro, ya que se utiliza menos JavaScript. Por ejemplo, los sitios Astro pueden cargarse un 40% más rápido con un 90% menos de JavaScript en comparación con Next.js. Porque sólo hidrata lo necesario y deja el resto como HTML estático. Esta hidratación selectiva, unida a la arquitectura en isla de Astro para componentes interactivos, permite crear sitios web rapidísimos. El aumento del rendimiento se traducirá en una mejora del SEO y de la experiencia de usuario de su sitio Astro. Tanto si estás priorizando el rendimiento, el SEO o la transición entre frameworks, Astro se erige como un notable framework de elección para sitios web de alta velocidad y centrados en el contenido.
