Hydration can be correct but still slow. What measurements and architectural changes reduce hydration cost on real pages.
Sarah
Hydration can be correct but still slow. What measurements and architectural changes reduce hydration cost on real pages.
Sarah
Track long tasks and input delay during hydration, then cut the JS that hydrates on first paint by turning low-priority UI into lazy islands or client-only mounts.
new PerformanceObserver((list) => {
for (const e of list.getEntries()) {
if (e.duration > 50) console.log('long task', e.startTime, e.duration)
}
}).observe({ type: 'longtask', buffered: true })
BobaMilk
Profile first, not just long tasks: record which components hydrate when and how much JS they pull, because a small number of “always-on” providers or above-the-fold widgets often dominate more than the obvious lazy stuff.
WaffleFries
:: Copyright KIRUPA 2024 //--