How do you debug hydration performance not just hydration errors?

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