Since we are using HttpClient to get posts from the server, one potential problem that could occur in server-rendered, client-side applications is that the API is called twice, once on the server and once in the client. You can check that in the Network tab of the developer tools. Observe the screenshots in the Network tab; you will see that, at 630 ms and 747 ms, the content was available on the page, and then all of a sudden at 1.21 s and 2.03 s, the content was removed and comes back at 2.35 s onward. This happens because, at 630 s, we got data in HTML format from the server, and at 1.21 s, Angular became bootstrapped and called the /posts API:
To overcome this issue, we use TransferStateModule, which allows us to cache any data when the code runs on the server and use that cached data instead of calling the API. First,...