He trabajado con React por más de cinco años, y después adopté Next.js, que se ha convertido en mi framework principal tanto en proyectos laborales como en esos pequeños "weekend throwaway projects".
Sin embargo, me he topado con un problema recurrente: la lentitud en la compilación de páginas y rutas durante el desarrollo, especialmente en proyectos grandes. En ocasiones, los tiempos de compilación superaban los 10 segundos (¡sí, leíste bien, más de 10 segundos!). Si a esto le sumaba Sentry, el tiempo podía duplicarse. Al principio, pensé que era una "skill issue" o que mi máquina (una MacBook M1) ya no daba la talla.
Para descartar esto, reviví mi vieja PC de escritorio con Pop!_OS. Aunque ya tiene sus años, cuenta con un Ryzen 7 y una GPU 1060. Creí que el desarrollo en Next.js sería más fluido, y sí, los tiempos de compilación mejoraron a entre 3 y 5 segundos. No obstante, seguía sin ser lo ideal, sobre todo si lo comparo con la experiencia casi instantánea que ofrece Vite con React en cada cambio que hago. En Next.js, la espera por la compilación continuaba siendo una constante.
Investigando un poco, me di cuenta de que no era el único con este problema. Encontré discusiones similares en Reddit y GitHub:
Esto era, en cierto modo, de esperarse. Next.js compila tanto en el servidor como en el cliente, incluso por el más mínimo cambio de línea. Si bien los tiempos de carga de la página una vez compilada y generada estáticamente pueden ser menores a 200ms, el verdadero dolor de cabeza es cada vez que inicias el desarrollo, pues el proceso de compilación debe ejecutarse de nuevo (aclaro, esto sucede en modo desarrollo).
¿Qué hice para mejorar los tiempos de compilación en desarrollo?
Para intentar reducir estos tiempos y mejorar mi "Developer Experience" (DX), implementé algunas optimizaciones:
-
Desactivar
prefetchen el componenteLinkde Next.js: Por defecto, esta propiedad intenta precargar recursos de manera anticipada. Desactivarla puede reducir la carga en el proceso de compilación. - Limitar Sentry o cualquier herramienta de observabilidad a producción: Estas herramientas son cruciales, pero su impacto en el rendimiento de la compilación en desarrollo puede ser significativo. Es mejor activarlas solo cuando sea estrictamente necesario.
- Activar Turbopack: Este bundler, desarrollado por Vercel, está diseñado para ser mucho más rápido que Webpack y puede mejorar drásticamente los tiempos de compilación en Next.js, puedes consultar si esta listo para prod o dev areweturboyet.
Puedes encontrar más detalles sobre estas optimizaciones en la Guía de desarrollo local de Next.js.
¿Es Next.js la opción correcta para todos los proyectos?
Al final, si tu aplicación es "heavy" y no dependes en gran medida del SEO (o tienes un servidor separado), me inclinaría por Vite. La velocidad de desarrollo que ofrece es incomparable.
Top comments (2)
Yes! The speed difference between Vite and Next.js in dev honestly shocked me too. Have you noticed any real-world improvement with Turbopack lately, or is it still not quite there for big projects?
Turbopack has improve a little bit but still slow in development, i want to clarify only in development, once is static render it fast on prod, hope it help!