Durante más de seis años, un desarrollador independiente trabajó en un proyecto de acortador de URL basado en Next.js, una popular herramienta para construir aplicaciones web modernas con React. Sin embargo, con el tiempo, la complejidad y el peso del código causado por la acumulación de componentes y dependencias comenzaron a ser una carga más que una ayuda. El proyecto había evolucionado, y aunque Next.js ofrecía ventajas, la necesidad de mantener una base de código cada vez más grande y compleja impactaba negativamente la productividad y la experiencia de desarrollo.
La razón principal de este reto radicaba en que Next.js, aunque potente, conlleva un alto costo en términos de gestión de dependencias, tiempos de compilación y mantenimiento constante del código para adaptarse a las actualizaciones del framework y del ecosistema. La curiosidad y la reflexión llevaron al desarrollador a cuestionarse si todo este proceso era realmente necesario para el tipo de funcionalidades y experiencia que quería ofrecer a sus usuarios. En especial, se planteó una pregunta sencilla pero crucial: si Next.js realiza renderizado del lado servidor para enviar contenido HTML, ¿por qué no enviar directamente el HTML sin complicaciones intermediarias? Esta idea llevó a la exploración de alternativas menos pesadas, enfocadas en el uso de HTML puro combinado con Htmx, una biblioteca ligera que amplía HTML con capacidades dinámicas sin necesidad de JavaScript complejo.
La transición de Next.js a Htmx no fue un camino sencillo ni inmediato. Significó reestructurar la forma en que la aplicación respondía a las interacciones del usuario y cómo se actualizaba el contenido dinámicamente. Sin embargo, en vez de depender de una arquitectura basada en componentes de React y estados globales manejados con JavaScript, se optó por una solución sencilla y efectiva que aprovecha los atributos específicos de Htmx para realizar peticiones AJAX, intercambiar fragments de HTML y actualizar partes de la página sin recargar. Este cambio radical eliminó la necesidad de pasos de construcción o compilación, acelerando así el ciclo de desarrollo.
Sin procesos de transpiling o bundling, el tiempo de construcción se redujo a cero. Además, la reducción en la cantidad de dependencias era notable. De tener inicialmente una lista de 24 dependencias, el proyecto se redujo a solo 3, disminuyendo drásticamente la complejidad y riesgo de incompatibilidades o fallos por actualizaciones. Con Htmx, la lógica principal permanece en el servidor, fungiendo como fuente única y confiable de verdad, mientras que el cliente recibe directamente HTML listo para ser insertado en el DOM. Esto no solo simplifica la arquitectura sino que también hace que el comportamiento del frontend sea más predecible y fácil de depurar.
La reducción en el tamaño del sitio web fue igualmente impresionante. Mientras que la versión con Next.js pesaba alrededor de 800 kilobytes, la nueva versión con Htmx ocupó apenas unos 100 kilobytes. Este cambio tiene un impacto directo en la velocidad de carga y la experiencia del usuario, especialmente para quienes acceden desde dispositivos móviles o conexiones lentas. Al escribir menos código y depender menos de bibliotecas externas, la mantenibilidad del proyecto mejoró sustancialmente.
El desarrollador registró una disminución del 17% en líneas de código escritas, pasando de aproximadamente 9500 a 7900 líneas. Sin embargo, debido a la reducción en el peso y la cantidad de dependencias, la reducción real del código en conjunto superó el 50%. Desde una perspectiva de experiencia del usuario, la navegación y las interacciones se volvieron más fluidas y rápidas, gracias a la respuesta directa y eficiente del HTML cargado dinámicamente. Además, la simplicidad en el frontend permitió eliminar el agotador ciclo de fatiga asociada con cargas pesadas de JavaScript, un fenómeno conocido como "fatiga de JavaScript", que a menudo impacta la calidad del desarrollo y la experiencia final. Este enfoque, que combina el poder del servidor con la simplicidad del cliente, representa un regreso a lo esencial pero con una solución moderna y pragmática para sitios web que requieren interacción dinámica sin las complejidades innecesarias de frameworks pesados.
En resumen, migrar de Next.js a Htmx en este caso real mostró que es posible crear aplicaciones web eficientes, rápidas y fáciles de mantener con menos código, menos dependencias y sin procesos pesados de construcción. Esta experiencia invita a repensar las estrategias tradicionales en desarrollo web y considerar soluciones que prioricen la simplicidad y la eficiencia sin sacrificar funcionalidades o experiencia. Para desarrolladores que buscan optimizar sus proyectos y reducir la carga de mantenimiento, la opción de utilizar HTML enriquecido con Htmx puede ser la clave para construir sitios web más ágiles, resistentes y amigables con los usuarios, demostrando que la innovación a veces pasa por redescubrir métodos sencillos y efectivos del desarrollo web.
