The page that looks ready and is not

Server-rendered markup arrives looking finished. Hydration is the framework re-running your component tree in the browser to attach event handlers to that existing markup, and it costs roughly in proportion to how many components there are rather than how much data they show. It runs on the main thread, so while it happens the page is painted and deaf: clicks queue, inputs drop characters, and users conclude the site is broken rather than slow.

This is the gap between a good largest-contentful-paint score and a bad interaction-to-next-paint score, and it is why teams chasing one metric sometimes make the other worse. Moving work to the server improves paint and can leave the same hydration cost behind, because the tree still has to be reconstructed on the client.

The fixes are architectural, not numerical. Hydrate fewer things by shipping static regions as markup only and making the interactive parts islands. Defer hydration of anything below the fold until it is near the viewport. Or move the component to the server entirely so its output is text and it never re-runs. Code splitting alone does not fix this. It changes when the cost is paid, not whether.