Hidratación (desarrollo web)

La renderización en tiempo real del lado del servidor permite enviar HTML en fragmentos que el navegador puede renderizar progresivamente a medida que los recibe. Esto puede proporcionar una primera visualización rápida y una primera visualización con contenido, ya que el marcado HTML llega a los usuarios más rápidamente. ^{[ 2 ]}

En la rehidratación progresiva , las partes individuales de una aplicación renderizada en el servidor se "arrancan" gradualmente, 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 necesaria para que las páginas sean interactivas, ya que la actualización del lado del cliente de las 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 renderizado del lado del servidor, donde un árbol DOM renderizado en el servidor se destruye y luego se reconstruye inmediatamente, generalmente porque el renderizado síncrono inicial del lado del cliente requería datos que no estaban del todo listos, tal vez esperando la resolución de una Promesa . ^{[ 2 ]}

La rehidratación parcial ha demostrado ser difícil de implementar. Este enfoque es una extensión de la idea de rehidratación progresiva, donde se analizan las piezas individuales (componentes/vistas/árboles) que se rehidratarán progresivamente y se identifican aquellas con poca interactividad o sin reactividad. Para cada una de estas partes mayormente estáticas, el código JavaScript correspondiente se transforma en referencias inertes y funcionalidad decorativa, reduciendo su huella en el lado del cliente a casi cero. El enfoque de rehidratación parcial presenta sus propios problemas y compromisos. Plantea algunos desafíos interesantes para el almacenamiento en caché , y la navegación del lado del cliente implica 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 completa de la página. ^{[ 2 ]}

Un marco que admite la rehidratación parcial es Elder.js, que se basa en Svelte . ^{[ 7 ]}

La renderización trisomórfica es una técnica que utiliza la renderización en tiempo real del lado del servidor para las navegaciones iniciales (sin JavaScript) y, posteriormente, emplea service workers para renderizar el HTML de las navegaciones una vez instalado. Esto permite mantener actualizados los componentes y plantillas en caché y habilita las navegaciones de estilo SPA para renderizar nuevas vistas en la misma sesión. Este enfoque funciona mejor cuando se puede compartir el mismo código de plantillas y enrutamiento entre el servidor, la página del cliente y el service worker. ^{[ 2 ]}