Cuando terminas de desarrollar algun proyecto web que este usado algun framework de Javascript (como React, Angular, Vue, Svelte), y ejecutas un comando para hacer build (como npm run build) todo tu proyecto se convierte a archivos estatico, es decir HTML, CSS y Javascript.
Javascript, de hecho, es la parte más importante de estos tres, porque gracias a el la interfaz se va creando en el navegaor a medida que el usario la usa, ademas la interactividad con la interfaz es rápida (sin tener que refrescar la página) y la aplicación se puede dividir en multiples partes tambien (componentes web).
Es por esto que todos los frameworks de Frontend se enfocan en optimizar código de Javascript, ya que gracias a el se puede crear aplicaciones web complejas en el navegador, dejando a HTML en segundo plano.
Pero tambien hay Herramientas que hacen lo contrario, se enfocan en optimizar el código de HTML principalmente, y tratan de usar lo menos posible a Javascript. Uno de esta herramientas es Astro.
¿Qué es Astro?
Astro, es un Generador de sitios estaticos, es decir es una herramienta que te permite crear aplicaciónes y sitios web que son contenido estático principalmente.
Contenido estático se le llama a cualquier archivo (HTML, CSS, Javascript, Imagenes, etc), que una vez generado, no cambia, es decir que no necesita de código de Servidor para poder ser alterado de algun modo, una vez generado se mantendrá igual hasta volver a generarse nuevamente (ejecutar npm run build nuevamente).
Hay varios Generadores de sitios estaticos (SSG) como Hugo, Gatsby, Jekyll o incluso proyectos como Nextjs o Nuxtjs pueden llegar a producrir sitios estaticos. En realidad la lista de SSG es grande
Pero Astro se diferencia de estas opciones al ofrecer un entorno de desarrollo muy comodo y facil de empezar, al usar muchas herramientas y conceptos modernas de Frontend.
¿Porque Astro?
Entre sus caracteristicas principales podemos encontramos:
- Cero Javascript por defecto. La idea de Astro es generar toda tu interfaz puramente en archivos HTML, y solo cargar Javascript cuando sea estrictamente necesario. Esto es lo contrario a los Frameworks de Javascript que toda la interfaz se genera mayormente en Javascript y solo hay una pequeña porcion de HTML.
Quizas has visto un archivo HTML como este, en muchos Frameworks de JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="root"></div>
<script src="framework/script.js"></script>
<script src="bundle.js"></script>
</body>
</html>
Island Architecture
De hecho Astro usa un concepto llamado Island Architecture que basicamente consiste en que en una pagina estatica (HTML) solo cargará el código de Javascript de tan solo una parte de la interfaz (Componente) que realmente necesite cambiar, el resto permanecerá siendo estatico. Contrario a lo que ofrece el Server Side Rendering que toda la pagina se generae en el servidor y luego necesita un proceso de Hidratacion para pode establecer el estado de los componentes en el frontend
En la practica esto significa que cuando alguien visite tu aplicacion o sitio web, recibira un HTML puro, y si necesita algo de JavaScript, Astro solo lo cargara si el componente es visible o cuando la pagina cargue.
- Astro es Personalizable, al ofrecerte plugins o Integraciones como lo llama Astro, que sirve para poder añadir rapidamente modulos o frameworks de CSS. Por ejemplo puedes añadir TailwindCSS con un solo comando o tambien añadir MDX, para tener interfaces interactivas en Markdown, o plugins para poder generar sitemaps o plugin optimizar la carga de imagenes, por mencionar a algunos.
- Es UI Agnostic. En Astro los archivos se crean con la extension
.astrolos cuales permiten escribir tu sitio ya sea en HTML o Markdown pero con funcionalidades estras, esta funcionalidad extra que menciono es que puedes importar componentes de frameworks o bibliotecas como React, Svelte, Vue, Solidjs, Lit, Preact o Alpine. y No es que solo puedes importar de uno solo de estos frameeworks sino que puedes importar componentes de multiples frameworks a la vez.
- Facil de Desplegar, al ser principalmente archivos estaticos puedes subirlo en Hosting de archivos estaticos como Netlify, Vercel, Github Page, Cloudflare Pages, o en tu Hosting Compartido sin ningun problema.
Aunque sus funcionalidades siguen creciendo ya que tambien tiene plugins para SSR que funcionan con Nodejs o Deno, Puedes usarlo como Frontend de Headless CMS como Sanity, Wordpress, Netlify, entre otros
Astro tambien soporta Typescript y hace uso Vitejs por debajo, lo que significa que es rapido tanto en desarrollo como al momento de hacer build de tu aplicación en Producción.
Conclusión
En lo personal me gusta mucho Astro, cuando lo uso me hace recordad mucho a Frameworks como Nextjs, Vue en la forma en la que organiza sus carpetas, y archivos.
Pero sino has usado ningun framework y solo quieres crear aplicaciones web sabiendo Javascript, HTML y CSS. Astro es una herramienta mucho más facil y practica para poder llevar proyectos a cabo.
No consume muchos recursos y su comunidad esta muy activa mejorandolo, asi que es muy probable que esta herramienta se vuelva mucho más comun en este siguiente año.
En fin ya estoy preparando el curso de Astro, asi que el siguiente video que veas despues de este será el curso completo de Astro, por si te has quedado con las ganas de verlo en la practica.