Next.js vs Astro: Por qué he migrado a la Arquitectura de Islas
Análisis técnico de mi migración de Next.js a Astro. Cómo logré pasar de los 10ms de tiempo de bloqueo al 0ms absoluto con un rendimiento perfecto.
La Búsqueda del Rendimiento Absoluto
Después de mucho tiempo optimizando mi sitio en Next.js, decidí poner a prueba a Astro. El objetivo era claro: eliminar el JavaScript innecesario en el cliente sin sacrificar la experiencia de usuario.
Comparativa Directa: Home Page
Los resultados tras el despliegue no dejan lugar a dudas. Astro no solo iguala a Next.js, sino que lo supera en la gestión de recursos críticos.
Desktop (Escritorio)
| Framework | Rendimiento | Accesibilidad | Buenas Prácticas | SEO | Blocking Time |
|---|---|---|---|---|---|
| Next.js | 99 | 88 | 96 | 100 | 10ms |
| Astro | 100 | 89 | 100 | 100 | 0ms |
Mobile (Móvil)
En dispositivos móviles, donde el procesador es más limitado, es donde la arquitectura de Astro brilla con luz propia.
| Framework | Rendimiento | Accesibilidad | Buenas Prácticas | SEO | Blocking Time |
|---|---|---|---|---|---|
| Next.js | 89 | 88 | 96 | 100 | 10ms |
| Astro | 100 | 84 | 100 | 100 | 0ms |
“Lograr un 100 en rendimiento móvil con 0ms de tiempo de bloqueo es la diferencia entre una web rápida y una web instantánea.”
Conclusión Técnica
La gran victoria aquí es el Blocking Time. Al pasar de 10ms a 0ms, hemos eliminado por completo cualquier retraso en la interactividad. Next.js es una herramienta increíble, pero para un portfolio donde el contenido es estático, la hidratación de React era un “impuesto” que ya no estoy dispuesto a pagar.
¿Qué es lo siguiente? Mantener estos 100s mientras sigo añadiendo proyectos y contenido multimedia.