Hydration and Client Boundaries in RSC
Learn how React 19 treats hydration as targeted activation work, and how client boundaries control what wakes up, when, and why in a Server Component tree.
In React applications, hydration was treated as a necessary second step after server rendering. The server generated HTML to improve first paint, and then the client took over, attaching event handlers, initializing state, and preparing the entire component tree for interaction. From a distance, this seemed reasonable: render fast, then make it interactive.
The problem emerged gradually as applications became larger and more feature-rich. Hydration time started to rival, and sometimes exceed, initial rendering time. Entire trees of components were waking up on the client even when most of the UI was informational, static, or rarely interacted with. Code executed, state initialized, and listeners attached simply because a component might be interactive, not because it actually needed to be.
Teams tried to address this with partial solutions: aggressive code splitting, deferring script loading, and removing state where possible. Yet hydration remained a blunt instrument. Once hydration started, it swept across the entire rendered tree. There was no architectural way to say, “this section should stay server-only forever” or “this small widget is the only thing that needs JavaScript.”
React Server Components fundamentally change the default by allowing most of the UI to remain server-rendered and never hydrate. But this introduces a new coordination problem: how does React safely and predictably reintroduce interactivity without losing the benefits of server rendering? React 19 addresses this by making client boundaries explicit and turning hydration into a selective, opt-in activation process.
Above diagram shows a page rendered entirely on the server. Most sections are shaded to indicate static output. A few small regions are outlined as client boundaries. Hydration occurs only within those outlines, while the rest of the page remains unchanged and inactive on the client side.
From “hydrate everything” to “activate only what’s needed”
In React 19, hydration is no longer a single, global phase that applies to the entire page. Instead, it becomes localized work that happens only when React transitions from server-rendered output to client-managed behavior. That transition point is called a client boundary ...