seo Question posted in
Some basic information to get you started with this can be found here.

Angular universal flickring with Transfer state – SEO

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
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0 
    RouterModule.forRoot(routes, { initialNavigation: 'enabledBlocking' }),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search