Step 19: Partial Hydration

The Solution: Partial Hydration

Instead of hydrating all components at once, we can use partial hydration to hydrate components only when they're needed.

Notice how each card gets hydrated individually when hovered over.

Don't forget to enable provideClientHydration(withIncrementalHydration()) in app.config.ts!

Edefer (on hover) {
  <div class="card interactive">
    <!-- Interactive content -->
  </div>
} Eplaceholder {
  <div class="card non-interactive">
    <!-- Static content -->
  </div>
}