0Pricing
Angular Academy · Lesson

Incremental Hydration with @defer

Hydrate parts of the page on demand.

The Cost Of Full Hydration

Full hydration boots every component up front. Incremental hydration instead hydrates parts of the page on demand, deferring JavaScript for sections until they are needed.

Built On defer

Incremental hydration uses the @defer block with the special hydrate triggers. The server still renders the content, but the client hydrates it only when a trigger fires.

@defer (hydrate on viewport) {
  <app-comments />
}

All lessons in this course

  1. What Is Hydration
  2. Enabling Full Hydration
  3. Incremental Hydration with @defer
  4. Measuring Core Web Vitals
← Back to Angular Academy