Hidratación incremental con @defer
Hidratar partes de la página bajo demanda
Hidratación incremental con @defer es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 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.
El coste de la hidratación completa
La hidratación completa inicia todos los componentes de antemano. La hidratación incremental, en cambio, hidrata partes de la página según se necesitan y aplaza el JavaScript de las secciones hasta ese momento.
Basada en defer
La hidratación incremental utiliza el bloque @defer con los activadores especiales hydrate. El servidor sigue renderizando el contenido, pero el cliente solo lo hidrata cuando se activa un activador.
@defer (hydrate on viewport) {
<app-comments />
}Activarla
Actívela de forma explícita con withIncrementalHydration() en el proveedor de hidratación. Esto habilita los activadores hydrate en las plantillas.
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
providers: [provideClientHydration(withIncrementalHydration())]hydrate on viewport
El activador más habitual hidrata un bloque cuando entra en la ventana gráfica. El contenido que está por debajo del pliegue permanece inactivo, lo que ahorra trabajo de JavaScript hasta que el usuario llega a él.
@defer (hydrate on viewport) {
<app-related-products />
}hydrate on interaction
Hidrata el bloque cuando el usuario interactúa con él (mediante un clic o un keydown). Es perfecto para widgets visibles pero poco utilizados, como un panel expandible.
@defer (hydrate on interaction) {
<app-share-menu />
}hydrate on idle y timer
Use hydrate on idle para hidratar cuando el navegador esté libre, o hydrate on timer(2s) para hidratar después de un retraso. Es adecuado para regiones no críticas.
@defer (hydrate on idle) {
<app-newsletter />
}hydrate never
hydrate never mantiene estático el HTML renderizado en el servidor: se muestra, pero nunca envía JavaScript para ese bloque. Es ideal para contenido puramente visual y no interactivo.
@defer (hydrate never) {
<app-footer-links />
}Diferencia con un defer normal
Un @defer normal en un contexto CSR muestra un marcador de posición hasta que se carga. Con la hidratación incremental, el contenido ya está renderizado en el servidor y visible; el activador solo controla cuándo comienza la interactividad (la hidratación).
Combinar activadores
Puede combinar activadores para que un bloque se hidrate cuando ocurra el primero de ellos, equilibrando la disponibilidad con el ahorro de recursos.
@defer (hydrate on viewport; hydrate on interaction) {
<app-map />
}Menos JavaScript inicial
Al aplazar la hidratación de componentes pesados o situados por debajo del pliegue, disminuye el JavaScript inicial necesario para la interactividad, lo que mejora el tiempo hasta la interactividad y el INP en la ruta crítica.
Elegir bien los activadores
Hidrate de forma ansiosa o durante el tiempo de inactividad los elementos interactivos situados sobre el pliegue; aplace hasta la ventana gráfica o la interacción los widgets que estén por debajo del pliegue o se utilicen rara vez. Mida los resultados para confirmar las mejoras.
Comprobación rápida
Compruebe cuánto sabe sobre la hidratación incremental.
Resumen
Utilizó @defer (hydrate ...) con withIncrementalHydration() para hidratar al entrar en la ventana gráfica, mediante interacción, durante el tiempo de inactividad, con un temporizador o nunca. Esto reduce el JavaScript inicial y mejora la interactividad al aplazar la hidratación de bloques situados por debajo del pliegue o que se utilizan rara vez.
Preguntas frecuentes
¿La lección «Hidratación incremental con @defer» es gratis?
Sí — el texto completo de «Hidratación incremental con @defer» 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 «Hidratación incremental con @defer»?
Hidratar partes de la página bajo demanda 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 3 de 4.
¿Cuánto tiempo toma la lección «Hidratación incremental con @defer»?
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
- Qué es la hidratación
- Activar la hidratación completa
- Hidratación incremental con @defer
- Medir las Core Web Vitals