La carga perezosa y la hidratación de la aplicación interactúan de una manera compleja y a menudo conflictiva, principalmente porque la hidratación requiere ejecutar el código de aplicación con entusiasmo, lo que socava los beneficios de la carga perezosa.
Cómo funciona la hidratación y su impacto en la carga perezosa
La hidratación es el proceso por el cual una página HTML renderizada por el servidor está "activada" en el lado del cliente al ejecutar JavaScript para adjuntar a los oyentes de eventos, restaurar el estado de componentes y hacer que la página sea interactiva. Este proceso implica ejecutar los componentes de la aplicación que comienzan desde la raíz y atravesando el árbol de componentes para comprender el estado, los enlaces y los manejadores de eventos.
Debido a que la hidratación debe visitar cada componente en el árbol de renderizado actual para determinar si necesita ser interactivo, obliga a todos estos componentes a cargar y ejecutar con entusiasmo. Esto significa que incluso si marca algunos componentes para la carga perezosa, la hidratación aún hará que se carguen de inmediato si son parte del árbol de renderizado inicial. La hidratación es secuencial y no puede omitir los componentes intermedios para hidratar directamente los componentes infantiles, por lo que todos los componentes principales deben hidratarse primero [1] [6].
Por qué la hidratación sabotea la carga perezosa
- Ejecución ansiosa: la hidratación requiere ejecutar todos los componentes en el árbol de renderizado, lo que evita que la carga perezosa diferir la carga de código para estos componentes.
- Dependencias de componentes: los componentes infantiles dependen de los accesorios de los componentes principales, por lo que los padres deben hidratarse primero, lo que obliga a una cadena de carga ansiosa.
- Handlers y estado de eventos: la hidratación también debe configurar los oyentes de eventos y restaurar el estado, lo que requiere ejecutar el código de componente por adelantado.
- Carga del desarrollador: para lograr una carga perezosa durante la hidratación, los desarrolladores deben administrar manualmente la captación previa y la división de código, lo que puede ser complejo y propenso a errores [6] [7].
Cuando la carga perezosa funciona a pesar de la hidratación
La carga perezosa aún puede ser efectiva para componentes que no forman parte del árbol de renderizado inicial y, por lo tanto, no se visitan durante la hidratación. Los ejemplos incluyen:
- cuadros de diálogo o modales que se abren en la interacción del usuario
- Componentes en diferentes rutas que no se representan inicialmente
En estos casos, los componentes pueden ser realmente cargados porque la hidratación no obliga a su ejecución inmediata [6].
técnicas para optimizar la hidratación y la carga perezosa
Algunos marcos y bibliotecas modernos intentan optimizar esta interacción mediante la implementación de la hidratación perezosa o la hidratación selectiva, donde los componentes se hidratan solo cuando es necesario, como cuando se vuelven visibles en la ventana gráfica:
-Las bibliotecas como `Next Lazy-Hydration-on-Scroll` en Next.js permiten diferir la hidratación hasta que un componente se desplace a la vista.
- Usando la API IntersectionOBServer, los componentes pueden ser cargados e hidratados solo cuando ingresan a la ventana gráfica.
-En Vue/Nuxt, las técnicas de hidratación perezosa y los complementos (por ejemplo, `nuxt-perlazy-hydrate`) permiten que la hidratación se retrase hasta que el hilo principal esté inactivo o el componente sea visible, lo que mejora el tiempo de las métricas de retraso de entrada interactiva y de la primera de entrada [4] [5].
Resumen
La hidratación y la carga perezosa están fundamentalmente en desacuerdo porque la hidratación requiere una ejecución ansiosa de los componentes en el árbol de renderizado, lo que evita que la carga perezosa aplazara la ejecución del código. Sin embargo, la carga perezosa sigue siendo efectiva para componentes fuera del alcance de hidratación inicial. Las técnicas emergentes como la hidratación perezosa apuntan a conciliar este conflicto diferiendo la hidratación misma, mejorando el rendimiento y la experiencia del usuario.
En esencia, la hidratación sabotea la carga perezosa durante la carga inicial de la página, pero con cuidadosas opciones de arquitectura y herramientas especializadas, los desarrolladores pueden optimizar cuándo y cómo se hidratan los componentes para recuperar los beneficios de la carga perezosa [1] [6] [7].
Citas:
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-andlazy-loading- ona- incompatible
[3] https://github.com/vercel/next.js/discussions/29751
[4] https://www.wisp.blog/blog/lazy-loading-in-nextjs-the-future-of-resource-optimization
[5] https://vueschool.io/articles/vuejs-tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-performance/
[6] https://www.builder.io/blog/hydration-sabotages-lazy-loading
[7] https://www.linkedin.com/posts/misko-hevery-3883b1_lazy-loading-is-like-exercise-everyone-activity-7115086933935984641-5oxk
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading