DEV Community: masiaf

Next.js en el desarrollo: ¿Un cuello de botella?

masiaf — Wed, 02 Jul 2025 21:35:55 +0000

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 prefetch en el componente Link de 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.

Operadores lógico vs ternario en react

masiaf — Fri, 25 Nov 2022 14:53:44 +0000

El titulo tal vez sea vago, pero basicamente estas en una vista, usando un falsy/truthy con renderizado condicional && y ves un 0 colado.
ejemplo: {count && <div>Más de cero</div>}

Depende del contexto queras que aparezca el 0, ejemplo: un carrito de articulos, pero la mayoria es solo para mostrar o no mostrar x o y componente.

Habra gente que diria q usar operadores logico es mala practica, y que deberia usar un ternario, usando el anterior codigo de ejemplo: {count ? <div>Más de cero</div> : null} esto funciona, pero si lo ves muy verboso escribir, agregar null y a veces peor si vas a insertar otro ternario dentro de otro ternario, haciendo que sea mucho mas dificil de leer y en algunos casos aumentar la carga cognitiva.

¿Cual usarias un operador logico o ternario? Siguiendo la regla del yingyang ☯️ ambas dependiendo del caso, si vas a usar un falsy/truty en un operador logico para mostrar un elemento en react mayoria de los casos castearlo a un boolean ( da igual el metodo doble bang !! o el metodo Boolean() ) asi te aseguras q si el falsy es un number 0 no se mostrara en pantalla y si quieres mas explicito o no quieres castearlo usa un ternario como el ejemplo anterior donde falsy retorna null.

Inferir Tipado de Objetos

masiaf — Wed, 19 Oct 2022 18:08:03 +0000

No le han pasado que han declarado un objecto y luego ir agregando mas campo con el pasar del tiempo (ya sea por nuevo requerimientos, no era necesarios al comienzo o no sabian que iban a ser necesarios) y asi mismo ir actualizando tambien el tipado o dejar que Ts infiera, pero si necesitan la key del objecto? o el value?.

En mi dia a dia uso Ts y bastante objecto una de las ventajas que me gusta es el autocompletado/sugerencias en el editor de codigo que te da el tipado, si no te sale una opcion de elegir o no esperabas en el autocompletado/sugerencias sabes que no existe en ese objecto (al menos que la lib q usas por alguna razón no la incluyo en su propio tipado).

Una de las tecnicas que uso de Ts es typeof, keyof, combinacion de ambas aveces, veremos unos ejemplos de como se usa cada uno.

typeof, keyof

En el caso de los objectos una de las formas mas basica que hacemos es crear el tipado y luego tiparlo a la variable que vamos a crear.

este es otra alternativa que uso de vez en cuando, ya que el objecto es dinamico.

normalmente lo uso mucho en react cuando declaramos un estado inicial

Cool con el autocompletado verdad!! 😎.
ahora si tenemos una funcion que lo que hace es devolvernos el valor dependiendo de la llave que la pasamos, podriamos crear la funcion asi

No hay ningun problema crearlo asi, pero si queremos el autocompletado/sugerencias que nos diga que puede recibir como argumento a la hora de llamar la funcion no la tendriamos 😢 (aunque podriamos mentalmente saber que key pasar y recibir el valor, pero eso es cognitivamente estresante 🫠, para eso esta la tecnologia de nuestro lado!).

para tener el autocompletado/sugerencias y evitar pasar campos que no exista (una forma de protegernos y ahorrar tiempo y ver los errores en el editor, todo eso antes del runtime!!🫠) podemos usar la combinacion de typeof y keyof

Yayyyy!!! 🙌 tenemos autocompletado/sugerencias de nuevo!

Espero que esto le ayude en su dia a dia como desarrollador en Typescript y disculpa por la imagenes y calidad de redacció 👀.

aqui las documentacion:

typeof
keyof