Angular Academy · Lección

Activar la hidratación completa

Activar la hidratación para evitar volver a renderizar

Activar la hidratación completa es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Activar la hidratación

La hidratación completa se habilita añadiendo provideClientHydration() a los proveedores de la aplicación. El esquema ng add @angular/ssr lo añade automáticamente.

import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

Dónde se coloca

Debe colocarse en los proveedores de appConfig del navegador, la misma configuración que se usa para iniciar el cliente. La configuración del servidor se combina encima mediante provideServerRendering().

Qué significa completa

La hidratación completa (ansiosa) hidrata todo el árbol de componentes en cuanto se carga JavaScript y se inicia Angular. Todos los componentes se vuelven interactivos a la vez.

Reproducción de eventos

Active withEventReplay() para capturar y reproducir después las interacciones del usuario que ocurran antes de que termine la hidratación, evitando que se pierdan clics en dispositivos lentos.

import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

providers: [provideClientHydration(withEventReplay())]

Caché de transferencia HTTP

Con la hidratación activada, las respuestas GET de HttpClient procedentes del servidor se almacenan de forma predeterminada en TransferState, por lo que el cliente no vuelve a solicitar los mismos datos después de iniciarse.

provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))

Verificar la hidratación

Abra la consola en modo de desarrollo. Angular registra estadísticas de hidratación (componentes hidratados y nodos reutilizados). Si no aparecen advertencias de discrepancias, la hidratación se realizó correctamente.

// Angular hydrated 24 component(s) and 187 node(s)

Corregir discrepancias

Si ve errores de discrepancia NG0500, busque plantillas no deterministas o modificaciones manuales del DOM. Haga que el marcado sea determinista para que las salidas del servidor y del cliente coincidan.

Proteger las API del navegador

El código que accede a window o localStorage durante el renderizado inicial puede cambiar el marcado entre el servidor y el cliente. Protéjalo con isPlatformBrowser o ejecútelo después de inicializar la vista.

if (isPlatformBrowser(this.platformId)) {
  this.width = window.innerWidth;
}

Compromiso de la hidratación completa

La hidratación completa es sencilla, pero descarga y ejecuta de antemano todo el JavaScript de los componentes. En aplicaciones grandes, esto puede retrasar la interactividad, un problema que aborda la hidratación incremental.

i18n e hidratación

La hidratación funciona con la i18n de Angular, pero debe asegurarse de que el contenido traducido sea determinista. Las configuraciones regionales diferentes entre el servidor y el cliente provocan errores de hidratación.

Comprobación en producción

Antes de publicar, compile para producción, sirva la salida de SSR y confirme en la red y en la consola que la hidratación se ejecuta sin discrepancias y que la caché de transferencia evita solicitudes duplicadas.

Comprobación rápida

Compruebe cuánto sabe sobre la hidratación completa.

Resumen

Activó la hidratación completa con provideClientHydration(), añadió withEventReplay() para los clics previos a la hidratación, utilizó la caché de transferencia HTTP, protegió las API del navegador y verificó que la hidratación se realizara correctamente. La hidratación completa es sencilla, pero carga todo el código JS de antemano.

Preguntas frecuentes

¿La lección «Activar la hidratación completa» es gratis?

Sí — el texto completo de «Activar la hidratación completa» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Activar la hidratación completa»?

Activar la hidratación para evitar volver a renderizar Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Activar la hidratación completa»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy