Angular material and angular SSR == slow performance / high CLS

[elgerm]

Is this a regression?

• No, but since angular ssr is a first class citizen now, it does matter more

Description

Using angular material with angular SSR will lead to degraded performance. Because it will render from server AND re-render in the browser. Leading to large layout shifts and generally slower performance than no ssr at all.

From what I see in the source code the following components are skipped from hydration:

• drawer
• sidenav
• menu
• tab-group
• table
• autocomplete
• select
• stepper
• table
• chip-listbox

Encapsulating components like sidenav, drawer and tab-group should not be skipping hydration.

Reproduction

Gifthub example repo: here
Steps to reproduce:

1. Add SSR
2. Add Material

Expected Behavior

no re-rendering

Actual Behavior

components don't get hydrated

Environment

• Angular: 17
• CDK/Material: 17
• Browser(s): all of them

[Ozzcer]

Is there any reason why these components are automatically skipped? Checking the docs it seems to be either i18n or direct dom manipulation that get skipped. Do these components rely on direct DOM as the project has no internationalisation set up. The sidenav is a killer as its essentially the entire application being skipped. Can anyone figure out a way for forceably override it, I'd like to see if allowing hydration causes any issues.

[muchbetterug]

+1 its a big stopper from being awesome

[jwittekind]

+1 I'm confused by the log message "1 component(s) were skipped" even when i did not use ngSkipHydration anywhere.
Additionally i'd like to know what exact components got skipped and why. How can i make sure all components get hydrated properly.

I noticed a huge difference in client hydration performance as soon as any component get's skipped during hydration.
On pages where i have skipped components the final hydration log message appears few seconds later than on other pages where all components are hydrated.

Please add Information to the log message.

EDIT: Actually i'm using Angular Material components. Possibly these may get skipped. But there's has not been any information about which exact components are skipped.

[mmalerba]

This should be fixed in 17.1, see: #28356 #28382 #28366 #28343 #28260

[angular-automatic-lock-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.}