¿Qué es Astro y por qué deberías probarlo?
Si trabajás como freelancer y querés ofrecer sitios web ultra rápidos, modernos y fáciles de mantener, tenés que conocer Astro.
¿Qué es Astro?
Astro es un framework para construir sitios web que prioriza la velocidad y la simplicidad. Su principal ventaja es que solo envía al navegador lo estrictamente necesario, eliminando JavaScript innecesario y logrando cargas súper rápidas.
¿Por qué elegir Astro?
- Performance: Genera páginas estáticas por defecto, lo que significa tiempos de carga mínimos.
- Zero JS por defecto: Solo se envía JavaScript si realmente lo necesitás.
- Integraciones fáciles: Podés usar React, Vue, Svelte, Solid y más, todo junto si querés.
- DX moderna: Hot reload, soporte para TypeScript, Markdown, y componentes de UI.
Ejemplo básico
---
const nombre = "Astro";
---
<h1>¡Hola desde {nombre}!</h1>
<p>Este es un componente Astro básico.</p>Tip exclusivo: Islas de Interactividad en Astro
Una de las utilidades más potentes y exclusivas de Astro es su sistema de “Islas de Interactividad”. Esto te permite decidir exactamente qué componentes deben ser interactivos y cuáles no, optimizando al máximo el rendimiento de tu web.
Por ejemplo, puedes importar un componente de React, Vue, Svelte, etc., y hacer que solo se hidrate (cargue JavaScript) cuando sea necesario usando directivas como client:load, client:idle, client:visible o client:only:
¿Qué hace cada directiva?
client:load: El componente se hidrata (carga el JS) inmediatamente después de que la página termina de cargar.client:idle: El componente se hidrata cuando el navegador está “en reposo”, es decir, cuando ha terminado otras tareas importantes.client:visible: El componente se hidrata solo cuando aparece en pantalla (cuando el usuario hace scroll hasta él).client:only: El componente solo se renderiza e hidrata en el cliente, nunca en el servidor (ideal para componentes que dependen 100% del navegador).
---
import MiBotonInteractivo from '../components/MiBotonInteractivo.jsx';
---
<!-- Este botón solo cargará JS cuando sea visible en pantalla -->
<MiBotonInteractivo client:visible />¿Por qué es útil? Esto reduce drásticamente el JavaScript enviado al cliente, mejorando la velocidad y el rendimiento de tu web. Otros frameworks no permiten este control tan granular y sencillo sobre la interactividad.
¿En qué se diferencia de otros frameworks?
A diferencia de Next.js, Nuxt o SvelteKit, Astro no te obliga a usar un solo framework de UI. Además, su enfoque “islas de interactividad” permite que solo las partes interactivas de tu sitio carguen JS, el resto es HTML puro y rápido.
Astro 5: Novedades y mejoras
La versión 5 de Astro trae varias mejoras que refuerzan su posición como uno de los frameworks más modernos y eficientes para la web:
- Rendering híbrido mejorado: Ahora es más fácil combinar páginas estáticas y dinámicas, permitiendo que tu sitio escale según las necesidades del proyecto.
- Mejoras en la integración de UI: Las integraciones con React, Vue, Svelte y otros frameworks son aún más fluidas y rápidas.
- Optimización automática de imágenes: Astro 5 incluye herramientas nativas para optimizar imágenes, mejorando aún más la performance sin esfuerzo extra.
- Soporte ampliado para SSR y edge: Ahora puedes desplegar sitios dinámicos en plataformas edge con mayor facilidad y compatibilidad.
- DX (Developer Experience) renovada: Mejoras en el hot reload, mensajes de error más claros y una documentación aún más completa.
Estas novedades hacen que Astro 5 sea una opción aún más atractiva para quienes buscan entregar sitios web veloces, modernos y fáciles de mantener.
Recursos útiles
En resumen: Si querés destacarte como freelancer y entregar webs veloces y modernas, Astro es una herramienta que vale la pena sumar a tu stack.