angular/universal-starter

Page rendered both from server and browser

Closed this issue · 1 comments

I have a situation where the page is being rendered both from the server and both from the browser. I am doing an HTTP call to get content from server.

getContent(): Observable<someObject> {
    console.log(`Getting content by ${this.platformId}`);
    return this.http.get<someObject>('someurl');
  }

When I hit the page, I am able to see "Getting content by server" and "Getting Content by browser". This is causing me an issue whenever I hit the page directly ("CTRL+ F5") because on the browser I am caching the response. Thus, if the value on the server is changed, I will first receive the updated server-side content and then it will switch to the cached content of the browser, causing an undesired flickering effect on the page.

How could I avoid such a situation?

I managed to solve this issue by using TransferHttpCacheModule.