@defer (hydrate never) leads to empty elements

I got a scenario where I want to try out the new incremental hydration feature in Angular 19, but I'm struggling to understand how it's supposed to work.

This is what I tried:

@defer (hydrate never) {
<app-block-hero [content]="block" />
}


Also using the new Signals API:

@Component({
selector: 'app-block-hero',
...
})
export class AppBlockHeroComponent {
readonly content = input.required<CMSBlockHero>();
}


Template:

<h1>{{ content().title }}</h1>
... and more...


I thought this would return static HTML from the server with all the component's elements already rendered as static content, while any Javascript for the hero would never be loaded to improve initial performance.

However, I get no content within the <h1>, which I find really odd.

I've added withIncrementalHydration as per the documentation:

provideClientHydration(
...
withIncrementalHydration()
),


Why do I get no content when I never hydrate the component?

Continue reading...