Partial Hydration

In the Hydration blog we have read that Hydration is expensive because It hydrate the entire DOM, even static parts.

demo

<App>
 ├── Header [static]
 ├── Article [static]
 ├── Comments [interactive]
 └── Footer [static]

So what if we can only hydrate the Interactive part. which can significantly reduces the load on CPU or less JS bundles, overall leads to less expensive. It optimizes both performance and interactive features according to needs.

Definition:

It's a technique to hydrate only the Interactive component in web app.

Partial Hydration => what to Hydrate

The fun part is that React or Next.js do not completely solves this partial hydration that said of course this can be partially achieved through RSC or Selective Hydration (when to hydrate), lazy loading (code splitting) etc.

• RSC can achieve a similar effect to partial hydration

• but RSC is not the same architecture as islands/partial hydration

because Hydration happens for client components, but the tree is still one React app.

Header → Server Component (no hydration)
Article → Server Component (no hydration)
Comments → Client Component (hydrated)
Footer → Server Component (no hydration)

So in React with Next.js:

• Server Components → never sent as JS → no hydration

• Client Components → sent as JS → hydrated

RSC = server/client component split
Islands = multiple independent hydration roots

To achieve the partial Hydration, framework/library must have the Island architecture. Islands architecture is basically the design pattern that enables partial hydration.

but writing the code for partial generation and Island architecture are different

Islands architecture
→ explicit islands

Partial hydration
→ compiler-generated islands

Progressive Hydration

what if all the components are interactive but they don't need at the moment. So instead of initializing the entire application at once, the hydration step begins at the root of the DOM tree, but the individual pieces of the server-rendered application are activated over a period of time.

demo from google video

In React ecosystems, progressive hydration is usually implemented using:

• React.lazy()

• Suspense

• dynamic import()

• viewport triggers

• idle callbacks

Partial hydration is the extension of the idea of the Progressive Hydration

Conclusion

Partial Hydration improves performance by hydrating only the interactive parts of a webpage instead of the entire DOM. While React and Next.js reduce hydration cost through Server Components, they still maintain a single React tree. True partial hydration is best achieved through Islands Architecture, where independent UI islands hydrate separately.