En el desarrollo web , la hidratación o rehidratación es una técnica en la que el JavaScript del lado del cliente convierte una página web HTML estática, entregada ya sea a través de alojamiento estático o renderizado del lado del servidor , en una página web dinámica adjuntando controladores de eventos a los elementos HTML. [1] Debido a que el HTML se renderiza previamente en un servidor, esto permite una "primera pintura con contenido" rápida (cuando se muestran por primera vez datos útiles al usuario), pero hay un período de tiempo después en el que la página parece estar completamente cargada e interactiva, pero no lo está hasta que se ejecuta el JavaScript del lado del cliente y se han adjuntado los controladores de eventos. [2]
Los marcos que utilizan hidratación incluyen Next.js [3] y Nuxt.js. [4] React v16.0 introdujo una función "hidratar", que hidrata un elemento, en su API . [ 5] [6]
La representación en tiempo real del lado del servidor permite enviar HTML en fragmentos que el navegador puede representar progresivamente a medida que lo recibe. Esto puede proporcionar una primera pintura rápida y una primera pintura con contenido, ya que el marcado HTML llega a los usuarios más rápido. [2]
En la rehidratación progresiva , las partes individuales de una aplicación renderizada en el servidor se "arrancan" con el tiempo, en lugar del enfoque común actual de inicializar toda la aplicación a la vez. Esto puede ayudar a reducir la cantidad de JavaScript necesario para hacer que las páginas sean interactivas, ya que la actualización del lado del cliente de partes de baja prioridad de la página se puede posponer para evitar bloquear el hilo principal. También puede ayudar a evitar uno de los problemas más comunes de la rehidratación de la renderización del lado del servidor, donde un árbol DOM renderizado en el servidor se destruye y luego se reconstruye inmediatamente, la mayoría de las veces porque la renderización sincrónica inicial del lado del cliente requería datos que no estaban del todo listos, tal vez esperando la resolución de la Promesa . [2]
La rehidratación parcial ha demostrado ser difícil de implementar. Este enfoque es una extensión de la idea de la rehidratación progresiva, donde las piezas individuales (componentes/vistas/árboles) que se rehidratarán progresivamente se analizan y se identifican aquellas con poca interactividad o ninguna reactividad. Para cada una de estas partes mayoritariamente estáticas, el código JavaScript correspondiente se transforma en referencias inertes y funcionalidad decorativa, reduciendo su huella del lado del cliente a casi cero. El enfoque de hidratación parcial viene con sus propios problemas y compromisos. Plantea algunos desafíos interesantes para el almacenamiento en caché , y la navegación del lado del cliente significa que no se puede asumir que el HTML renderizado por el servidor para las partes inertes de la aplicación estará disponible sin una carga de página completa. [2]
Un marco que admite la rehidratación parcial es Elder.js, que se basa en Svelte . [7]
La representación trisomórfica es una técnica que utiliza la representación en tiempo real del lado del servidor para las navegaciones iniciales/no JS y luego utiliza un trabajador de servicio para encargarse de la representación del HTML para las navegaciones después de que se haya instalado. Esto puede mantener actualizados los componentes y las plantillas almacenados en caché y permite navegaciones de estilo SPA para representar nuevas vistas en la misma sesión. Este enfoque funciona mejor cuando se puede compartir el mismo código de plantilla y enrutamiento entre el servidor, la página del cliente y el trabajador de servicio. [2]
Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y utilizadas de acuerdo con los términos descritos en la Licencia de Atribución Creative Commons 4.0, específicamente el artículo "Renderizado en la Web" de Jason Miller y Addy Osmani.