Diagnose hydration cost in an SPA framework

Diagnose hydration cost in an SPA framework
Hydration (attaching JS interactivity to server HTML) runs as one big task that spikes TBT and delays INP readiness.

— Step 1: Performance panel — find the long task right after HTML parse; that's hydration.
— Step 2: Measure its duration. Over 200ms on mobile = a problem.
— Step 3: Cut shipped JS: islands/partial hydration so only interactive bits hydrate.
— Step 4: Defer below-fold component hydration until visible or idle.
— Step 5: Confirm INP input-delay drops (interactions blocked during hydration cause the worst INP).

Example: full-page hydrate 410ms -> islands 120ms, INP 320ms -> 140ms.

Takeaway: keep hydration under 200ms on p75 mobile or interactions stall behind it.