Hydration trong Angular SSR là gì? Non-destructive hydration hoạt động thế nào?

Hydration là quá trình Angular "gắn" app client vào HTML đã được server render (SSR), thay vì xóa và render lại từ đầu. Non-destructive hydration (stable từ Angular 16) tái sử dụng DOM có sẵn → tránh flicker, giữ nguyên nội dung, cải thiện Core Web Vitals (LCP/CLS).

// app.config.ts
provideClientHydration()

Trước v16: hydration "destructive" — Angular xóa toàn bộ server HTML rồi render lại → nháy màn hình.

Incremental hydration (Angular 17+, enhancement) cho phép hoãn hydrate từng @defer block đến khi cần (vd scroll vào viewport) — tốt cho SSR page lớn nhiều "island":

provideClientHydration(withIncrementalHydration())

@defer (hydrate on viewport) { <app-comments /> }

Angular queue và replay event xảy ra trước khi block hydrate xong.