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.

Hydration is the process where Angular "attaches" the client app to the server-rendered HTML (SSR) instead of destroying and re-rendering it. Non-destructive hydration (stable since Angular 16) reuses the existing DOM → avoids flicker, preserves content, improves Core Web Vitals (LCP/CLS).

// app.config.ts
provideClientHydration()

Before v16: hydration was "destructive" — Angular wiped the server HTML and re-rendered → screen flicker.

Incremental hydration (Angular 17+, an enhancement) defers hydrating individual @defer blocks until needed (e.g. on viewport) — great for large SSR pages with many "islands":

provideClientHydration(withIncrementalHydration())

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

Angular queues and replays events that occur before a block finishes hydrating.