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.