Qué es la hidratación

La hidratación es el proceso mediante el cual la aplicación Angular del cliente reutiliza el HTML renderizado por el servidor y añade listeners de eventos y estado al DOM existente, en lugar de descartarlo y volver a renderizarlo.

El SSR antiguo utilizaba una hidratación destructiva: el cliente eliminaba el DOM del servidor y volvía a renderizarlo desde cero. Esto provocaba un parpadeo visible y desperdiciaba el trabajo del servidor.

Angular moderno realiza una hidratación no destructiva: recorre el DOM existente, lo relaciona con el árbol de componentes y reutiliza los nodos. No hay parpadeo, se necesita menos trabajo y se obtiene un mejor rendimiento.

Reutilizar el HTML del servidor mantiene renderizado el contenido más grande, lo que ayuda al LCP, y evita los cambios de diseño provocados por volver a renderizar, lo que ayuda al CLS. La aplicación se vuelve interactiva sin redibujarse.

Fase uno: el servidor renderiza el HTML y lo envía. Fase dos: el navegador descarga JavaScript, inicia Angular e hidrata el marcado existente para volverlo interactivo.

La hidratación presupone que el árbol de componentes del cliente produce la misma estructura que generó el servidor. Si difieren, Angular informa de una discrepancia de hidratación.

La manipulación directa del DOM, las ramas exclusivas del navegador que cambian el marcado, un anidamiento HTML no válido y el contenido no determinista (como Math.random() o Date.now() en las plantillas) provocan discrepancias.

No manipule el DOM de forma imperativa (por ejemplo, con innerHTML fuera de Angular) durante SSR. Deje que Angular controle el DOM para que el cliente y el servidor coincidan.

Si un componente realmente no puede hidratarse (por ejemplo, un widget de terceros que modifica el DOM), exclúyalo mediante ngSkipHydration; Angular volverá a renderizar únicamente ese subárbol.

La hidratación solo se aplica cuando hay HTML renderizado en el servidor que se puede reutilizar. Una aplicación CSR pura no tiene nada que hidratar; la hidratación es la parte del cliente en el modelo de SSR.

La hidratación puede ser completa (se hidrata toda la aplicación al cargar) o incremental (las partes se hidratan según se necesitan). Elegir la estrategia adecuada es clave para el rendimiento, un tema que se aborda en lecciones posteriores.

Compruebe cuánto entiende sobre la hidratación.

La hidratación reutiliza de forma no destructiva el HTML del servidor en el cliente, lo que mejora LCP y CLS. Las discrepancias surgen por modificaciones manuales del DOM o por marcado no determinista; use ngSkipHydration como último recurso. La hidratación es la parte del cliente en el modelo de SSR.