Pseudo SSR for Ionic Angular - is this a realistic alternative?

Hey there,

With the point that SSR and Ionic/Angular not working nicely (assumption!) - I was thinking of an alternative strategy to realise the following:

  • Fast loading of content to achieve fast FCP and TTI (so first pain and soon interaction)
  • SEO friendliness by having static content

And maybe not necessarily an SSR point - but an PWA point - create some landing page that explains the user if how and when she/he can install the app.

Which in turn also helps in surpassing the time until the beforeinstallprompt is fired for a clean install in Android.

So, I came up with the following repo that does a few things different compared to an out-of-the-box Angular-SPA with PWA:

  • There is lots of content in index.html which is shown if the app is not an PWA
  • The angular app is not bootstrapped until a useraction is done (or time passed) otherwise
  • Meanwhile a service worker is loaded anyway to start caching stuff, once the SPA is needed

Under the hood, two “magical” things happening:

  • index.html is communicating with main.ts via the window object to boostrap the SPA - so no automatic bootstrap
  • index.html manually loads the service worker. Afterwards, angular picks up

Here the repo - GitHub - Tommertom/pseudossrionicangular: An experiment to discuss pseudo SSR with Ionic and Angular

And here the demo -

All Ionic Angular folks out there - any thoughts on this experiment?

Lighthouse score:


Seems like a good score - I have another app (only SPA) with performance score 44 (maybe poor comparison)

Lghthouse scores of “Pseudo SSR” using a mid-tier phone…

Compared to the same app without “Pseudo SSR”.

Are we really gaining something here?

(earlier I had a lighthouse of 17 on mid-tier spa, but that score does not come up again - unfortunately :slight_smile: )

Btw, I wonder if I can achieve the same with a base-href in index.html next to a static site…