Cuando decidí rehacer mi portfolio personal, la primera pregunta que me hice como ingeniero fue natural: ¿Qué stack utilizo?
En mi día a día trabajo con frameworks robustos como React, Next.js y
Angular. La inercia natural hubiese sido inicializar un create-next-app, meter Tailwind y empezar a escribir componentes. Sin embargo, un
portfolio tiene unos requerimientos arquitectónicos muy específicos que
a menudo pasamos por alto.
El problema del SPA para contenido estático
Un portfolio, por definición, es una colección de documentos: páginas de presentación, imágenes de proyectos y quizá algunos artículos. El contenido es altísimamente estático.
Utilizar una Single Page Application (SPA) basada en React puro o un framework con fuerte dependencia del client-side hydration como Next.js por defecto para este caso de uso supone:
- Ship de JavaScript innecesario: Enviar cientos de KB de React y ReactDOM al cliente solo para renderizar HTML y CSS estático.
- Peor Time to Interactive (TTI): Aunque se haga SSR, el navegador debe descargar, parsear y ejecutar el JS del framework para hidratar la página antes de que sea interactiva.
- Complejidad accidental: Manejo de estado global, useEffect para animaciones de scroll simples, etc.
Astro y la Arquitectura de Islas
Astro propone un cambio de paradigma espectacular: Zero JS by default. Astro renderiza todo a HTML puro en el servidor (o en tiempo de build). Si necesito interactividad, como el menú de navegación móvil o una galería de imágenes compleja, puedo cargar islas de interactividad.
"La arquitectura de islas te permite usar tu framework favorito (React, Vue, Svelte) solo donde realmente lo necesitas, dejando el resto de la página como HTML estático puro."
Resultados Tangibles
Migrar de un antiguo portfolio en Next.js a esta versión en Astro tuvo un impacto medible e inmediato en las métricas orgánicas y de performance:
- Lighthouse 100/100: En Performance, Accessibility, Best Practices y SEO.
- Bundle size reducido en un 85%: Al no cargar el runtime de React en las páginas donde no era necesario.
- Carga instantánea: View Transitions habilitado nativamente hace que la navegación entre páginas se sienta como una SPA sin el coste de una SPA.
Conclusión
Elegir la herramienta adecuada para el trabajo es la primera habilidad de un buen ingeniero de software. Para aplicaciones altamente interactivas (Dashboards, SaaS), Next.js o Angular siguen siendo mi primera opción. Sin embargo, para sitios orientados a contenido (Blogs, Portfolios, Landing Pages de Marketing), Astro es actualmente imbatible.
Me permite escribir en React/JSX si quiero, pero le envía al usuario HTML puro con CSS ultra-optimizado.