Tengo una aplicación en Next.js 14 que está bastante pesada y se carga muy lento, especialmente en móvil. He intentado usar dynamic imports pero sigo notando lag en la navegación. ¿Qué otras cosas puedo probar para mejorar el rendimiento sin reescribir todo?
¿Ya revisaste qué está haciendo pesado el bundle realmente, o estás apuntando a ciegas? lo primero es meter `next/image` si tenés imágenes sin optimizar (hace una diferencia brutal en móvil), después chequear si hay librerías gigantes que podés reemplazar por alternativas más livianas, y activar `swcMinify` en `next.config.js` si no lo tenés ya. También probá desactivar source maps en producción, meter `incremental static regeneration` en las páginas que pueden ser estáticas, y usar `React.memo` o `useMemo` en componentes pesados que se renderizan boludamente cada cambio de ruta. si seguís con lag después de eso, necesitás hacer un profile con Chrome DevTools para ver dónde se traba realmente, porque a veces el problema no es el código sino que estás haciendo demasiadas requests o fetches bloqueantes
Lo primero que revisaría es si estás usando Image de Next.js correctamente, porque las imágenes sin optimizar matan el rendimiento en móvil. También metería un buen vistazo a qué bundle size tenés con `next/bundle-analyzer` para ver qué librerías están hinchando demasiado tu app. Para el lag en navegación, probá activar `swcMinify` en next.config.js si no lo tenés ya, y revisá si hay requests innecesarias en el cliente - a veces los dynamic imports funcionan pero el contenido aún hace llamadas que podrías cachear con revalidation o ISR. Dependiendo de cuáles sean tus rutas más pesadas, también podría ayudarte precachear datos con `getStaticProps` en lugar de cargar todo en cliente.
lo primero que revisisaría es si estás usando Image de Next.js correctamente - muchas veces la gente carga imágenes enormes sin optimizar y eso mata el rendimiento, especialmente en móvil. además comprueba la bundle size con `next/bundle-analyzer` porque a lo mejor tienes librerías pesadas que no necesitas, y considera meter `swcMinify` en la config si no lo has hecho.
si la navegación va lenta entre páginas, el issue probablemente sea que estás haciendo queries pesadas en el servidor sin cachear nada - intenta usar `revalidateTag` o ISR para que no recalcule todo cada vez. y en general, revisaría qué está pasando en DevTools (pestaña Network y Performance) para ver exactamente dónde se atora.
Lo primero es revisar qué está haciendo lento tu app con las DevTools de Chrome (Network y Performance tabs) porque a veces no es Next.js sino que estás cargando recursos enormes o haciendo queries ineficientes. Después, además de dynamic imports, prueba Image Optimization (asegúrate de usar `next/image` en serio, no `<img>`), activa `swcMinify` en next.config.js si no está, y revisa si tienes bundle bloat con `npm run build` y el análisis de bundle size - muchas veces importas librerías que podrías reemplazar por algo más ligero o que no necesitas en el cliente.
En móvil el problema suele ser más brutal, así que también mata Javascript innecesario: si una sección no interactúa, hazla estática con `generateStaticParams` o reduce al mínimo lo que mandas al cliente. Si el lag es durante la navegación, probablemente sea un problema de API calls o cálculos pesados - considera mover eso a un Route Handler o Server Action para no bloquear el cliente.
Lo primero que revisaría es si estás usando `Image` de Next.js correctamente (con width/height definidos y formatos modernos) porque una app lenta en móvil generalmente es un quilombo de imágenes sin optimizar. Después de eso, mete un vistazo a tu bundle con `next/bundle-analyzer` para ver qué librerías te están hinchando el código, porque a veces traes dependencias que podrías reemplazar con algo más ligero, y también asegurate de que estés haciendo server-side rendering donde tiene sentido en lugar de cargar toda la lógica en el cliente.
Iniciar sesiónpara responder.
