Incremental Hydration in Angular
summary
Explains incremental hydration for Angular (v19 pre‑release) with concrete config: add client hydration in providers and use withIncrementalHydration (which auto‑includes event replay). Shows server inlines NG_STATE JSON per component ID, a tiny blocking JS that records events via JS actions, and a queue that replays clicks in order after hydration. Live coding demos toggle a heart by incrementally hydrating that component only; the demo works and demonstrates measurable LCP and INP improvements and predictable risks to watch.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 1:10Incremental hydration in Angular
- 2:35Performance and user experience
- 4:20Introduction
- 5:03Reboot vs hydration
- 6:52Configuring incremental hydration
- 7:37Hydration phases explained
- 13:02Angular release strategy
- 14:09Performance metrics impact
- 16:38LCP and INP web vitals
- 19:52Event replay and JS actions
- 23:09JS actions and event recording
- 27:01Demo: JS actions and recording
- 30:56State hydration in Angular
- 33:23Demo: component state hydration
- 35:07Event replay final step
- 36:24Live demo: incremental hydration
- 38:57Configuring hydration triggers
- 39:40Demo: incremental hydration in action
- 40:21Summary
