bug: Ionic 8.6 update - SSR Hydration Issue: ionic-header and other components not hydrated despite stencil/core update

[tuhinkole]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

After upgrading to Ionic 8.6, I noticed that several Ionic components such as ion-header, ion-toolbar, and others are not being hydrated properly during SSR. Despite the latest Stencil/core version being merged with Ionic 8.6 (as per changelog), hydration still fails for many key UI components.

Expected Behavior

I expected that with the Stencil core update in Ionic 8.6, SSR hydration issues would be resolved. Components like ion-header should fully render on the server and then hydrate on the client. This would ensure correct SEO rendering and client-side interactivity.

Steps to Reproduce

1. Create a new Ionic Angular project:

ionic start ssr-hydration-test blank --type=angular
cd ssr-hydration-test

2. Install SSR support:

ng add @angular/ssr

3. Add Ionic UI components in src/app/app.component.html:

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>SSR Hydration Test</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <p>This is a test for SSR hydration</p>
  </ion-content>
</ion-app>

4. Update main.ts for hydration:

import { provideClientHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(),
    ...
  ]
});

5. Run the SSR server:

npm run dev:ssr

6. Open the app in the browser and inspect the DOM:

• ion-header, ion-toolbar, ion-title are present as tags
• But they are not hydrated
• No hydrated class
• Shadow DOM content is missing
• No interactivity

Code Reproduction URL

https://github.com/ionic-team/ionic-framework/issues

Ionic Info

Ionic:

 Ionic CLI                     : 7.2.1
 Ionic Framework               : @ionic/angular 8.6.0
 @angular-devkit/build-angular : 18.2.19
 @angular-devkit/schematics    : 18.2.12
 @angular/cli                  : 18.2.12
 @ionic/angular-toolkit        : 11.0.1

Capacitor:

 Capacitor CLI      : 6.2.0
 @capacitor/core    : 6.2.0

System:

NodeJS : v22.12.0
npm    : 10.9.0
OS     : Linux 6.14

Additional Information

This hydration issue affects SEO and accessibility.