Angular 22 marca un punto de inflexión: provideZonelessChangeDetection() es el default, lo que significa que el framework ya no depende de Zone.js para detectar cambios. Menos overhead, menos bugs por eventos no trackeados, y un bundle inicial más liviano.
Sin Zone.js, el change detection se dispara solo cuando un signal cambia, un evento del template se dispara, o markForCheck() se llama manualmente. Esto hace que el rendering sea más predecible y más rápido.
La hidratación incremental ( @defer con trigger hydrate ) permite que ciertos componentes se carguen como HTML estático desde el SSR y solo se hidraten cuando es necesario — por ejemplo, cuando el usuario interactúa o el componente entra al viewport.
Un problema real que encontramos: las animaciones CSS de entrada (fade-up) se reproducían dos veces. La primera vez al renderizar el HTML prerenderizado, y la segunda cuando Angular hidrataba y reconstruía el DOM.
La solución fue usar afterNextRender() + doble requestAnimationFrame para agregar las clases de animación directamente al DOM con classList.add , después de que la hidratación terminó. Angular no sabe sobre estos cambios, así que no hay change detection que pueda reiniciar la animación.
Otro detalle clave: provideClientHydration() con hidratación incremental significa que los componentes @defer no bloquean el primer paint. El hero se muestra inmediatamente, y las secciones pesadas (skills, projects, testimonials) se hidratan progresivamente.
El resultado: LCP optimizado, animaciones que se reproducen una sola vez, y un 117kB transferido en el bundle inicial. Angular 22 sin Zone.js es la combinación que hace que el SSR+animaciones finalmente funcione sin fricción.