feat(Sidenav): Support hydration

[intellix]

Feature Description

Sidenav and various other components should support Clientside Hydration. When I deliver the initial HTML from the server, the client should be able to hydrate my entire site without having a flash of replaced and recreated content.

I've been fighting with enabling it and then started to investigate why 2x components are skipping hydration. I thought that it was strange because I never explicitly added it and now that I can see that it was 100% disabled for anything inside a Sidenav: https://github.com/angular/components/commit/1a6f924e2da852be6bd78445f43bac0275264b6e

The whole application exists within a Sidenav but Material completely disables it (I assume due to direct DOM manipulation). It would be great if material didn't disable hydration, so we can improve UX and SEO with better lighthouse scores.

Use Case

It would allow Material based websites to not suffer from poor lighthouse scores and flashing pages.

[alexcmoss]

This is also preventing me from moving to Angular 16. We use Angular Universal with the Preboot library to provide transition. Preboot is not maintained, and not supported by Angular 16 due to deprecation of Ivy. Sidenav is the single most important component for us to support hydration as it wraps most other elements in an application.

[elgerm]

Here a minimal example of a sidenav where you can see the issue

Clone and run project, open browser console, always see 1 component skipped hydration, which is the sidenav container component I guess.

edit just checked sidenav source and it has ngSkipHydration set everywhere, which is erm... very weird for the main encapsuling component. Especially when you think about how much the angular team has been hyping hydration for the last 2 versions.

[tsenguunchik]

Any updates on this?

[muchbetterug]

+1 would love to see this in the near feature, seo is killing me <3

[intellix]

is it possible that these changes will get backported to 16 at all? We can't migrate to MDC, probably ever, because our sites are dynamically built and someone hacked the hell out of the styles to un-opinionate them for about 15 sites that we have.

Its basically impossible for us to migrate and now we're stuck on 16 with no hydration. At this point it would be easier for us to just migrate to qwik.

The changes made to support hydration for each of the components are SO minimal that it doesn't make sense for us to spend months refactoring our app to move to MDC, just for everything to get removed again when we're forced to move to Material 3.

[crisbeto]

There are a couple of issues with backporting it:

1. This isn't really covered by our LTS policy. We primarily backport fixes related to security or accessibility.
2. Getting hydration to work in all components required some fixes in the framework that may have to be backported as well.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}