Desde el primer momento en que conocí Astro, me transmitió buenas vibras. Su nombre y logo captaron mi atención, pero sabía que eso no era suficiente para juzgar una tecnología. Sin embargo, algo me decía que tenía un gran potencial.
🌌 ¿Por qué Astro?
Astro llegó para llenar un vacío en el vasto mundo de los frameworks de JavaScript. Al considerar qué tecnología utilizar para crear una aplicación estática con una experiencia de desarrollo moderna, lo primero que viene a la mente son opciones como Next.js, Nuxt.js, SvelteKit o Gatsby. Sin embargo, todas estas opciones dependen de enviar JavaScript al cliente, incluso cuando se trata de una web estática. Esto se debe a que funcionan como metaframeworks basados en otras tecnologías:
🚀 La diferencia con Astro
Aquí es donde Astro marca la diferencia: su renderizado se basa en HTML, CSS y JavaScript puro, sin la necesidad de un framework adicional. Además, su arquitectura de islas (Islands Architecture) permite integrar otros frameworks como React, Vue, Svelte, Preact, SolidJS o Alpine.js de manera inteligente, facilitando la adición de interactividad sin comprometer el rendimiento.
🔬 Primeras pruebas con Astro
Desde su lanzamiento, tuve la necesidad de probarlo (Así es, la necesidad, algo dentro de mi moria de ganas por usar Astro), pero el tiempo no estaba a mi favor. Mi primera incursión fue migrar el blog de mi actual novia de Next.js a Astro. En esa primera prueba, mantuve la misma UI con TailwindCSS y el CMS con DatoCMS, pero sin explorar muchas de las características de Astro. Puedes ver el resultado aquí: 🍂 nuestrashojasamarillas.com.
No fue hasta que tuve más tiempo libre (por un giro inesperado en mi vida laboral) que decidí sumergirme por completo en Astro y desarrollar mi propio sitio web desde cero. Como buen desarrollador, no podía evitar la tentación de reconstruir mi portafolio con la última tecnología que me entusiasmaba. Esta vez, quería aprovechar todas las capacidades de Astro.
🎯 Desafíos y aprendizajes
Uno de los retos más interesantes fue desarrollar todo con HTML, CSS y JavaScript puro, sin librerías de UI ni componentes predefinidos. Usé TailwindCSS para la maquetación y Zod para la validación de formularios, pero nada más. Me sentí como en los viejos tiempos, cuando construir desde cero era la norma y cada línea de código tenía un propósito claro.
🔥 Funcionalidades clave que exploré
- ✅ Enrutamiento con Internationalización (i18n) para ofrecer mi sitio en dos idiomas (es y en).
- ✅ Colecciones de Contenido para gestionar el contenido del blog de manera eficiente.
🌟 Lo que más me gustó de Astro
- 💡 El Enrutamiento basado en archivosAPIRoute, que ya está muy de moda. Prácticamente todos los frameworks modernos lo usan. Es muy cómodo y facilita el trabajo sin necesidad de configuración adicional.
- 💡 Integración nativa con Markdown y MDX.
- 💡 Componentes
.astro: Simples, potentes y fáciles de entender. - 💡 Directivas de maquetado, que agregan un extra de poder a tus componentes. Te permite mantener todo tan nativo como sea posible, pero también abre la puerta a darle "superpoderes" a tu HTML.
- 💡 Soporte para múltiples frameworks de UI como React.js, Vue.js, Svelte, Preact, SolidJS o Alpine.js
- 💡 Apdatadores para despliegues en Cloudflare, Netlify, Node.js y Vercel .
- 💡 Soporte para i18n sin paquetes externos.
- 💡 Colecciones de contenido para gestionar contenido estructurado.
- 💡 Estilos locales y globales con
<style>dentro de los componentes. - 💡 Integración con View Transitions API.
- 💡 Script en componentes Astro, el código ubicado dentro de los delimitadores
--- ---al inicio de un archivo se ejecuta en el servidor, lo que permite manejar lógica de backend sin necesidad de configuraciones adicionales. - 💡 Rutas API, permite la creación de rutas API utilizando métodos como GET, POST, entre otros. Esto facilita la ampliación de la funcionalidad de la aplicación, permitiendo adaptarla a necesidades específicas sin depender de un backend externo.
🔮 Reflexión final
Astro ha sido una de las tecnologías que más me ha impresionado en los últimos años. No solo ofrece un rendimiento excelente, sino que también brinda una experiencia de desarrollo amigable y flexible. ¿Vale la pena probarlo? Definitivamente sí.
Si estás buscando un framework moderno, intuitivo y con un enfoque optimizado para la web, Astro es una opción que no puedes ignorar. Para mí, ha sido un cambio de juego, y estoy seguro de que muchos desarrolladores encontrarán en Astro una herramienta invaluable.
Espero que esto haya sido útil para tí. Después de mucho tiempo considerando crear un blog para compartir mis experiencias y opiniones, Astro y su integración con Markdown me dieron el impulso necesario para hacerlo. ¡Nos leemos en el próximo post! 🚀✨