Recientemente he completado la migración de mi sitio web personal desde Nuxt hacia Astro. El objetivo principal de este cambio era mejorar drásticamente el rendimiento, simplificar la arquitectura del proyecto y, sobre todo, alcanzar la máxima puntuación en las métricas de Core Web Vitals.
En este artículo detallo por qué elegí Astro, las diferencias clave con Nuxt y las nuevas funcionalidades que he implementado en el proceso.
¿Por qué migrar de Nuxt a Astro? Ventajas y Mejoras
Aunque Nuxt es un framework excelente para aplicaciones web complejas (SPAs) y renderizado híbrido, para un sitio centrado en contenido como este, Astro ofrece ventajas estructurales significativas.
1. Arquitectura de Islas (Islands Architecture)
La diferencia más notable es cómo Astro gestiona el JavaScript.
- En Nuxt: Por defecto, la aplicación se hidrata completamente en el cliente (SPA hydration), lo que implica descargar y ejecutar el bundle de Vue para toda la página, incluso para partes estáticas.
- En Astro: Se utiliza la Arquitectura de Islas. El HTML se genera estáticamente en el servidor (SSG). Solo se envía JavaScript al navegador para los componentes que explícitamente requieren interactividad (como un buscador o un menú móvil). El resto de la página es HTML y CSS puro.
2. Rendimiento: Objetivo Lighthouse 100
Gracias a la estrategia de “Zero JS by default” (Cero JavaScript por defecto), conseguir una puntuación de 100 en Lighthouse es mucho más accesible con Astro.
- Menor TBT (Total Blocking Time): Al no haber hidratación masiva, el hilo principal del navegador queda libre casi de inmediato.
- Carga más rápida: El peso de la página se reduce drásticamente al eliminar librerías de framework innecesarias en el cliente.
3. Agnosticismo de UI
Con Astro, no estoy atado a un solo framework de UI. Aunque vengo de Vue/Nuxt, Astro me permite integrar componentes de React, Svelte o Preact en el mismo proyecto si fuera necesario, sin penalizar el rendimiento global.
Nuevas Funcionalidades Implementadas
Principales features usadas:
- Uso de Content Collections API.
- Paginación de entradas de blog.
- Paginación en rutas dinámicas de categorías de Blog.
- Dark Mode.
- Aumento de tamaño de tipografía.
- Animación en aplicación de múltiples páginas (MPA).
- Preconfiguración de Playwright.
- Mantener el Lighthouse rating en 100.
Aprovechando la reescritura del código, he añadido características que mejoran la experiencia de usuario (UX) y la accesibilidad:
Paginación Nativa y Eficiente
Astro maneja la paginación de colecciones de contenido (content collections) de manera nativa. Esto me ha permitido estructurar el blog para navegar por el historial de publicaciones de forma rápida, generando páginas estáticas para cada tramo de la paginación.
Filtrado por Categorías
He implementado un sistema de filtrado robusto. Al ser un sitio estático, las páginas de categorías (como /categories/astro o /categories/javascript) se generan en tiempo de construcción (build time). Esto significa que son instantáneas para el usuario y perfectamente indexables para los motores de búsqueda, mejorando el SEO long-tail.
Accesibilidad: Tipografía Ajustable
Pensando en la accesibilidad web, he añadido una funcionalidad en el header que permite a los usuarios ajustar el tamaño de la fuente.
- Utiliza unidades relativas (
rem) en todo el CSS. - Persiste la preferencia del usuario.
- Mejora la legibilidad sin romper la maquetación del sitio.
Conclusión
La migración a Astro ha supuesto un salto de calidad en términos de Performance y DX (Developer Experience). Mantener el sitio es ahora más sencillo gracias a la estructura de archivos de Astro y el soporte para Markdown/MDX, y la velocidad de carga es instantánea.
Si gestionas un blog, portfolio o sitio de documentación y te preocupa el SEO y la velocidad, Astro es, hoy por hoy, la mejor alternativa frente a frameworks de SPA tradicionales.