The Full Hydration Problem
Measure the cost of hydrating an entire React SPA and understand why static pages don't need it.
What Is Hydration
Hydration is the process where React takes server-rendered HTML and attaches JavaScript event listeners to it. The server sends the initial HTML (fast), then the browser downloads the JavaScript bundle and React "hydrates" the static HTML to make it interactive. Until hydration completes, the page looks interactive but is not.
Traditional SPA Hydration Cost
A traditional single-page application sends the entire JavaScript bundle to the browser. React must download it, parse it, execute it, and then attach event listeners to every component in the tree. For large applications, this process can take several seconds on mid-range mobile devices.