#MRE: After adding angular/ssr, the header component styles went missing

26 messages · Page 1 of 1 (latest)

marsh knot
#

https://github.com/folsze/styles-break-after-adding-ssr

this is the MRE

the header shows up fine in the first commit but in the last commit, after SSR was added, it's missing styles

this is the relevant code:

I am prerendering all routes. Somehow the CSS goes missing...

For the sake of completeness, here is my full SO post:
https://stackoverflow.com/questions/79947387/after-changing-from-csr-to-ssr-with-ionic-angular-app-ionic-styles-do-not-apply

Some relevant code here, but really the whole app is relevant:

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: '**',
    renderMode: RenderMode.Prerender
  }
];
GitHub
GitHub - folsze/styles-break-after-adding-ssr: After adding angular...

After adding angular/ssr, the header component styles went missing - folsze/styles-break-after-adding-ssr

umbral nacelle
#

Ionic Angular is built on web components. I don't think web components are supported with hydration.
Ionic is a framework primarily built for making apps and you really should not use SSR there.

marsh knot
#

@umbral nacelle Are you sure? Before going in that direction I researched a lot and there is suprisingly little info on it not being allowed (I even created a SO post 1 year ago, noone said it was impossible https://stackoverflow.com/questions/79613846/can-you-use-ionic-angular-with-angular-ssr?noredirect=1#comment140959457_79613846).

This comment even states the opposite, apparently having made it work (?):
https://forum.ionicframework.com/t/how-to-get-ionic-angular-ssr-to-work-in-new-project/239741/6

In case of X/Y problem:
It's all cause the website of my ionic-capacitor app (https://www.geochamp.app) could really use some SEO improvement, it's not getting noticed and I wanna make each course / topic be its own search result, like it is for seterra:

Ionic Forum
How to get Ionic Angular SSR to work in new project?

Here is a working demo of Ionic Angular app with SSR using standalone components. It is built by initiating an Angular project with @angular/ssr package, followed by adding Capacitor and then Ionic. It also supports multi-locale using native @angular/localize package. There is a custom index.html handling client-side locale redircetion for iOS/...

#

Thank you for taking your time to investigate this btw, very helpful as I'm alone maintaining the free app + website and tend to get stuck hard sometimes

umbral nacelle
#

If you absolutely need SSR you'll have to do it without hydration

#

This is not really Angular specific, Web Components are just a client-side technology, so as-is they are fundamentally incompatible with SSR.

umbral nacelle
#

I am by no means a SEO expert, however a sitemap may already help you.

marsh knot
#

Hmm ok thanks. So best approach would probably be to drop the ionic/angular completely? Afaik capacitor works without ionic

#

Ok maybe a sitemap will do lol

umbral nacelle
#

I would drop Ionic - Angular itself can do SSR with hydration just fine

#

And for a webapp you don't need Capacitor

marsh knot
#

Don't wanna doubt what you said, just trying to understand what exactly they are doing and if that could be of use for me

Removing ionic would be an insane amount of work for me I think. tabs, navigation all depend on it and I like the native ionic tabs which are far better than angular/material behavior tabs in terms of UX, since they mirror the native tab behavior

umbral nacelle
#

That doesn't do any more or less than what your repo does. It does the same limited SSR that you can do

marsh knot
#

Ok danke für deine Antworten.

Muss mir denke ich erstmal erstmal überlegen, wo ich mit dem Projekt primär nach oben will, im App Store+Play Store oder im Web. So wie's aussieht, eignet sich native-mobile rein vom technischen her besser für meine App, vor allem weil sich ionic/angular sehr schwer rausholen lässt mit dem jetzigen Konzept.

Eventuell ist es sowieso schon zu spät, um irgendwo nach oben zu kommen, weil der Geographie-App Markt schon zu saturated ist. Schwer herauszufinden

Keine Ahnung, was für eine große Rolle SSR/SSG für SEO spielt, um im Web nach oben zu kommen. Aber nachdem was ich grad getestet habe, verwenden alle meine Website Competitors SSR. Die haben aber auch massiv Backlinks und Popularity also keine Ahnung, wie sehr es dann wirklich am SSR liegt

Aber der Tipp mit den Sitemaps ist schonmal super, werd die direkt rein machen, nachdem ich meine Routen parametrisiert habe.

umbral nacelle
#

After looking at it again, there is some difference. For some reason in your version the Ionic Web Components (really it's Stencil, their Web Components framework thingy) does not attach the "constructed style sheets" properly. In your version they don't show up and just show as "undefined" in the DOM tree.
I do not know why.

#

Good luck to you

marsh knot
#

Thanks

cedar grail
marsh knot
umbral nacelle
#

In terms of SEO it doesn't matter. But it isn't great for initial app performance, because:

  1. the browser will download the pre-made HTML from the server
  2. the browser will render that HTML
  3. the browser will download and execute your Angular App's JavaScript
  4. Angular will destroy the entire DOM from step 2 and rebuild it.
marsh knot
# umbral nacelle In terms of SEO it doesn't matter. But it isn't great for initial app performanc...

Ok thanks a lot! So I understand that adding SSR here will have pros (for SEO) & cons (for performance).

I will probably focus on growing the mobile app first anyways and maybe see what happens in the future with this issue:
https://github.com/angular/angular/issues/52275

GitHub
Support for client hydration for Web Components hydrated in the ser...

Which @angular/* package(s) are the source of the bug? platform-browser, platform-server Is this a regression? No Description First of all, a huge thanks for your continuous efforts in improving SS...

cedar grail