EL PROBLEMA
El mes pasado nuestro equipo empezó a recibir quejas sobre una sensación de lentitud en la aplicación Next.js. Los usuarios notaban que la navegación entre páginas era más lenta en producción a pesar de no haber cambios importantes recientes. Al investigar la regresión de rendimiento descubrimos un problema sutil pero crítico relacionado con el prefetching en rutas dinámicas de Next.js.
INVESTIGACIÓN
Usamos Next.js 15 con App Router y el componente Link estándar que gestiona el prefetching automáticamente. En principio esto debería acelerar la navegación, pero vimos lo contrario. Al revisar cambios recientes en el ruteo detecté que habíamos introducido internacionalización anidando todas las rutas bajo un segmento dinámico de locale
Antes slash about slash products slash contact Después slash bracket locale bracket slash about slash bracket locale bracket slash products slash bracket locale bracket slash contact
Ese cambio aparentemente inofensivo transformó muchas rutas estáticas en dinámicas y afectó profundamente al comportamiento de prefetching.
COMPORTAMIENTO DE PREFETCH EN NEXTJS
Next.js diferencia entre rutas estáticas y dinámicas para prefetching. En rutas estáticas se puede prefetch el contenido completo y cachearlo, mientras que en rutas dinámicas Next.js evita prefetch completo salvo que exista un loading.js y sólo precarga la estructura del layout por un corto periodo. Esto evita trabajo innecesario en servidor pero hace que la navegación dependa de respuestas en tiempo real, lo que provoca la sensación de que la app no responde.
CAUSA RAÍZ
Al mover todas las páginas bajo slash bracket locale bracket convertimos inadvertidamente cada página en dinámica. Consecuencias principales 1 No hay prefetch automático del contenido completo 2 Sólo se precarga el layout cuando existe loading.js 3 Navegación más lenta por fetchs bajo demanda
SOLUCIÓN IMPLEMENTADA
En Q2BSTUDIO, empresa de desarrollo de software y aplicaciones a medida con especialidad en inteligencia artificial y ciberseguridad, abordamos el problema con un plan en tres frentes orientado a restaurar la navegación rápida sin renunciar a la arquitectura de i18n.
1 Cambiar la estrategia de prefetching de opt out a opt in Implementamos una envoltura personalizada del componente Link que desactiva el prefetch por defecto y permite habilitarlo de forma explícita solo en las rutas donde aporta valor real. De este modo controlamos qué páginas merecen consumo de red anticipado y cuáles no.
2 Prefetch explícito en páginas de alto tráfico Habilitamos prefetch manualmente en enlaces a páginas críticas como catálogo, checkout o páginas con mucho tráfico. Esto devuelve la sensación de navegación instantánea en los recorridos clave de usuario sin provocar prefetcheos masivos innecesarios en otras áreas.
3 Estados de loading en segmentos dinámicos Añadimos archivos loading js en los segmentos dinámicos para permitir prefetch del layout y ofrecer indicadores visuales mientras se cargan datos. Esto mejora la experiencia de usuario al eliminar saltos bruscos y dar feedback inmediato durante la carga.
RESULTADOS
Tras aplicar estos cambios la mejora fue inmediata la navegación volvió a sentirse instantánea, las métricas de rendimiento mejoraron significativamente y la experiencia de usuario fue más consistente en toda la app.
OPTIMIZACIONES ADICIONALES
Además de las correcciones principales implementamos prácticas complementarias que ayudan a afinar el comportamiento de prefetching según tipo de página y patrón de uso.
Prefetch explícito estratégico Activar prefetch en páginas de prioridad alta y desactivarlo en páginas de baja prioridad es una forma sencilla de recuperar rendimiento. Esto es especialmente importante cuando se usa ruteo basado en locale.
Estados de carga en cada nivel de segmento Crear loading js en cada nivel dinámico de la aplicación aporta layout prefetching y reduce el impacto percibido por el usuario. Esto mejora también la integración con experiencia de negocio y paneles tipo power bi embebidos en páginas dinámicas.
Prefetch por hover para páginas con muchos datos En listas grandes Next.js puede intentar prefetchear cada enlace, generando picos de tráfico. Implementamos enlaces que activan prefetch solo al pasar el ratón o al detectar intención de navegación, reduciendo el número de peticiones y mejorando el rendimiento en páginas con tablas y muchos registros.
LECCIONES CLAVE
1 Las rutas dinámicas cambian radicalmente el comportamiento de prefetching y pueden degradar el rendimiento si no se gestionan. 2 La internacionalización mediante un segmento locale tiene implicaciones de rendimiento que hay que ponderar. 3 El prefetch explícito ofrece control fino para garantizar recorridos críticos rápidos. 4 Los loading states son imprescindibles en rutas dinámicas para una buena UX. 5 Monitorizar rendimiento tras cambios de ruteo previene regresiones.
SERVICIOS Y VALOR AÑADIDO DE Q2BSTUDIO
En Q2BSTUDIO somos especialistas en software a medida y aplicaciones a medida diseñadas para escalar y ofrecer rendimiento. Nuestras capacidades incluyen inteligencia artificial e ia para empresas, agentes ia, servicios de ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y soluciones con power bi. Aplicamos buenas prácticas de arquitectura y optimización como las descritas para ofrecer experiencias rápidas y seguras, alineadas con objetivos de negocio.
CONCLUSIÓN
Las regresiones de rendimiento suelen ser discretas y aparecen por decisiones arquitectónicas que, aunque bien intencionadas, rompen optimizaciones internas de frameworks como Next.js. Las rutas dinámicas no son malas por sí mismas, pero requieren estrategias específicas de prefetching y estados de carga. Combinando prefetching explícito, loading states y técnicas como prefetch por hover podemos recuperar y mejorar la velocidad de navegación sin renunciar a la internacionalización ni a funcionalidades avanzadas.
Si necesitas ayuda para optimizar aplicaciones Next.js, diseñar software a medida, integrar inteligencia artificial, asegurar tu plataforma con ciberseguridad o desplegar en servicios cloud aws y azure, en Q2BSTUDIO ofrecemos consultoría y desarrollo end to end para llevar tu proyecto al siguiente nivel.