Step 10: TransferState for optimal SSR

In this PR we finalize our SSR with TransferState – a module for optimal SSR performance that allows preventing the browser to repeat API requests just used by the server to render the page. Here’s a good article on how it works: https://medium.com/javascript-in-plain-english/build-faster-javascript-web-apps-with-angular-universal-a-transferstate-service-and-an-api-b7e4afd0fe9c

There’s also a little bit of refactoring and housekeeping. Our SSR gets fixed in this PR – we don’t actually cover SSR build with our end to end tests, should we add integration tests that run an actual production SSR build against the backend with a database? Hm.

The reason SSR got broken was upgrade to Angular 8 – we switched to using ngx-cookie-service, but it doesn’t support SSR it seems, so we’re reverting back to @ngx-utils/cookies, see package.json.

We’re keeping things DRY here by refactoring the 2 identical QR codes we have – one on user profile page and another one in the invoice popup, – into a reusable component, see qr-code.component.html:

The QR code rendering component ngx-kjua throws an exception on the server side, so we disable it with *ngIf.

Keeping things similarly DRY with the new CookieService – we switched the underlying package a few times already, so let’s abstract this away: our code will talk to our adapter service, and what’s under the hood here is not important to the outside. No more copy-pasting for { path: '/' } as well – we need this for all our cookies, so it stays encapsulated in the service. See cookie.service.ts:

TransferStateHttpInterceptor is where the new improvement is located mostly, see transfer-state-http-interceptor.service.ts:

The error handling functionality moved to the ApiService where it belongs, because it only applies to the API requests, see api.service.ts:

Things are shaping up nicely ๐Ÿ™‚

Cheers,
Andrew