Performance
Partial hydration
Partial hydration is attaching JavaScript behavior to only the components that need it, leaving the rest of the server-rendered HTML as plain markup. The page arrives complete and only the interactive parts pay a script cost.
How it is measured
Count hydrated components and the JavaScript they pull. In Astro, only components with a `client:*` directive hydrate, and everything else ships zero JS. Look at the Network panel for per-component chunks, and at Lighthouse's Total Blocking Time and 'Reduce JavaScript execution time'.
In the DOM, hydrated islands appear as wrapper elements such as `<astro-island>`, with props serialized into attributes. Use the Performance panel to see when each island wakes up under `client:load`, `client:idle`, or `client:visible`.
Worked example
A documentation site built with Astro has a 600-word article, a code sample with a copy button, a collapsible left nav, and a feedback widget. Hydrating the whole React tree would ship 142 KB of JS. Partial hydration, with the nav on `client:idle` and the copy button and widget on `client:visible`, ships 31 KB.
TBT on a throttled mobile run falls from 540 ms to 90 ms. The article text, which is 90% of the page, never needed any script.
How it differs
Partial hydration wakes selected pieces. Full hydration wakes the whole component tree after the HTML arrives, re-running render logic in the browser. Islands architecture is the design pattern; partial hydration is the mechanism that makes it work. Islands are the boundaries, and hydration is what happens inside them.
Common errors
Marking every component `client:load` and gaining nothing. Sharing state between islands through a global store, which drags the framework back in. Hydrating below-the-fold widgets eagerly. Forgetting that a button clicked before its island wakes does nothing. Never testing with JavaScript disabled.
In practice
List the components on your top template and ask one question of each: does it respond to input? If not, render it static. For the rest, prefer visible or idle over load. Rebuild, then compare JavaScript transferred and TBT in a lab run.