Angular Ssr, Page Rerender Issue

I am new to Angular ssr, you can see code below Issue If I enter to client route directly, first it shows Rendered by server but quickly after that it rerenders page and shows:

Solution 1:

This is normal behaviour for angular universal. Here is the normal flow:

1. You make a request to the server
2. Angular universal creates and renders the components (including API calls) server side to generate the HTML content. The content is sent back to the client browser. (In your example, the HTML will contain "rendered by server")
3. The browser renders the HTML.
4. Once the page is rendered and the dom document loaded, the client side angular application is boostrapped.
5. The client side angular app creates and render components (and makes API calls). It will render "rendered by browser" in your case.

You do not really have to worry about this. In a real situation, you'd have your components make API calls. To prevent the client side making the same calls that have already been made server side, you can use angular TransferState to serialise the API data in the HTML generated server side, so that the client side can use that data straight away instead of making API calls again.

That way, the HTML generated by the client should be the same as the one that came from the server. (Unless of course you specifically display different data server and client side, like in your example)