Angular universal flickring with Transfer state

Question

I am using angular 7 and nodejs express for backend API, I am using angular universal for server-side rendering for SEO perspective After SSR website is flickering, I am using JWT token-based authentication and sending token in every Http request for check token is valid or not

For remove flickering, I have tried multiple ways to avoid flickering

1. Using Transfer state for manage caching and avoid duplicate https request, it's working perfectly but the problem is I am not getting token from local storage on server-side call so its not working not on reloading the page or hard refresh and still I was facing small flickering issue like it shows home page first and then after 1 second load correct content
2. Using Angular happiness universal https://github.com/hapinessjs/ng-universal-module I have also tried angular happiness modules to avoiding flickering, but this library also used the same concept of TransferState and caching, facing the same problem
3. Angular Preboot https://github.com/angular/preboot With angular preboot, I avoid 80% flickring issue but still, it shows home page first and then load the visited page, it looks weird

Answer 1

What you can do is use TransferState as you already do but use cookies to store the JWT instead of localstorage. That way you'll have access to your cookies when using angular universal.

We used the ngx-cookie to handle cookies both client and server side for angular.

This way you should have exactly the same content displayed on initial page load and when angular takes over client side

Answer 2

RouterModule.forRoot(routes, { initialNavigation: 'enabledBlocking' }),