En las versiones más recientes, Angular ofrece un rendimiento mejor que nunca. El renderizado desde el servidor (SSR) permite generar páginas con el estado inicial de un componente directamente en el servidor y enviarlas al navegador, lo que resulta en una carga inicial más rápida y mejor optimización para los motores de búsqueda (SEO). Con la llegada de la hidratación incremental en Angular v19, los desarrolladores pueden definir qué partes de una página se hidratan y en qué orden de prioridad, lo que reduce el tamaño del bundle y el tiempo hasta la interactividad (TTI). Esto proporciona al usuario final una mejor experiencia.

Configuración inicial

Para empezar, debes agregar provideClientHydration(withIncrementalHydration()) a la configuración de la aplicación. Luego, podrás utilizar bloques @defer() con dde hidratación como hydrate on, hydrate when o hydrate never, para definir qué eventos deben indicarle a Angular cuándo cargar e hidratar contenido diferido.

Los desencadenadores

¿Qué es hidratación?

Normalmente, para poder visualizar una página web, tu navegador necesita descargar el código HTML y el código JavaScript en archivos separados.

En las SPA tradicionales (Single Page Applications), el tamaño de los archivos JavaScript ha ido creciendo cada vez más debido al aumento del uso de librerías y funcionalidades complejas. Esto provoca que la carga inicial de la aplicación sea más lenta, ya que se debe descargar y procesar mucho código antes de mostrar algo útil al usuario.

Una forma de mitigar este problema es cargando primero solo el HTML y, en un segundo momento, descargar el JavaScript necesario para que los elementos visibles funcionen. Este proceso se llama hidratación.

Con la hidratación, se puede mostrar una página rápidamente, porque solo es HTML renderizado en el servidor (SSR), y luego, poco a poco, activar sus partes para que funcionen. Por ejemplo, un botón se verá en pantalla desde el inicio, pero solo empezará a responder a eventos como click (en un botón previamente renderizado) cuando Angular descargue y conecte el JavaScript correspondiente.

Este enfoque mejora la experiencia del usuario al reducir el tiempo de espera antes de ver algo útil en pantalla y permite que las interacciones se activen de forma progresiva.

Este ejemplo muestra cómo aplicar hidratación incremental:

• El componente raíz App usa @defer (hydrate on interaction) para diferir la carga de la parte .js del componente Dashboard hasta que el usuario interactúe. En ese momento, Angular descarga los archivos .js y ejecuta la hidratación del componente.
• Dentro de Dashboard, se usa un Signal llamado isHydrated como una flag reactiva que indica si el componente ya está hidratado.
  • Antes de la hidratación, el contenido se muestra con estilo apagado.
  • Una vez hidratado, cambia a un estilo colorido, indicando que ya es interactivo.

Caso práctico

Supongamos que tienes una página de producto o landing page con mucho contenido visual y explicativo, y al final de la misma incluyes un formulario complejo.

Este formulario contiene validaciones, lógica reactiva, bindings y eventos, lo que implica una carga de JavaScript significativa para su hidratación. Sin embargo, en la mayoría de los casos, el usuario no interactúa con él hasta que ha leído parte del contenido.

En este caso, puedes envolver el componente del formulario con:

@defer (hydrate on interaction) {
  <app-contact-form />
}

Esto indica que el HTML prerrenderizado del formulario se mostrará estáticamente, pero su comportamiento interactivo no se activará hasta que el usuario interactúe con él, por ejemplo al hacer foco en un campo.

• Mejora el rendimiento inicial, ya que evita hidratar componentes que no son inmediatamente necesarios.
• Reduce el JavaScript descargado y ejecutado en el arranque, beneficiando el Time to Interactive (TTI).
• Mejora la experiencia de usuario, ya que el componente es visualmente accesible desde el principio y se vuelve interactivo solo cuando es relevante.

Bloque @defer(hydrate when)

La opción hydrate when de un bloque @defer() permite hidratar un componente solo cuando se cumple una condición personalizada. Es decir, Angular cargará y activará el comportamiento interactivo del componente únicamente cuando la condición que definida se vuelva verdadera.

La condición debe estar en el componente padre y el bloque @defer no debe estar dentro de otro bloque @defer sin hidratar. Si el padre no está hidratado, Angular no puede evaluar la condición todavía.

Ejemplo
Imagina que tienes un componente "ActionsController" que contiene botones para ejecutar algún código con muchas instrucciones. Se desea que ese componente solo se hidrate cuando el usuario haya aceptado los términos y condiciones:

@Component({
  selector: 'app-root',
  imports: [FormsModule, ActionsController],
  template: `
    <input type="checkbox" [(ngModel)]="acceptedTerms" />
    <label>Acepto los términos y condiciones</label>

    @defer (hydrate when acceptedTerms()) {
      <app-actions-controller />
    }
  `,
})
export class App {
  acceptedTerms = signal(false);
}

• El componente <app-actions-controller /> no se hidrata mientras acceptedTerms sea false.
• Cuando el usuario marca la casilla, acceptedTerms cambia a true, y Angular hidrata el componente, y este se vuelve interactivo.

Perfecto, aquí tienes la explicación en español, con otras palabras y un ejemplo realista para hydrate never:

Bloque @defer(hydrate never)

La opción hydrate never dentro de @defer indica que el contenido del bloque no debe hidratarse nunca durante la carga inicial del contenido renderizado desde el servidor (SSR). Es decir, ese componente se renderiza como HTML estático, sin comportamientos interactivos en la primera carga.

Esto es útil cuando quieres mostrar contenido puramente visual (como una imagen, un resumen o una estructura estática como un footer) y evitar completamente el coste de hidratación.

Ejemplo
Supongamos la aplicación tiene un componente <app-legal-notice> que muestra un aviso legal extenso. Este componente no tiene botones, formularios ni ningún tipo de lógica o interacción: solo muestra texto.

No tiene sentido hidratarlo (activar sus eventos o lógica en Angular), ya que su único propósito es ser leído.

@defer (hydrate never) {
  <app-legal-notice />
}

• En la carga inicial desde el servidor (SSR), Angular renderiza solo el HTML estático del aviso legal.
• No se hidrata el componente (ni sus posibles hijos), lo cual reduce el coste de JavaScript y mejora el rendimiento.

Conclusión

La hidratación incremental en Angular marca un avance significativo en la optimización del rendimiento de aplicaciones web modernas. Al permitir controlar con precisión qué componentes se hidratan, cuándo y bajo qué condiciones, los desarrolladores pueden reducir drásticamente el tamaño del JavaScript inicial, acelerar el Time to Interactive (TTI) y mejorar la experiencia del usuario. Gracias a herramientas como @defer(hydrate on interaction), hydrate when y hydrate never, es posible priorizar lo que realmente importa: mostrar contenido útil rápidamente y hacer interactivos solo los elementos necesarios en el momento justo. Con esta capacidad, Angular no solo se mantiene competitivo en el ecosistema frontend, sino que también se convierte en una opción más eficiente para construir interfaces web escalables, rápidas y centradas en el usuario.