I have an Angular 17 application that uses server-side rendering. The state of the application is managed using ngrx.
When I access the page, I can see that the page comes pre-rendered (by viewing the source of the page, for example), but once the page loads, Angular seems to start from scratch.
For example, I have some labels that are obtained through an HTTP request. Initially I see the labels in the page, but then Angular starts and clears the state, rendering the labels blank. It then performs the HTTP request to fetch those labels and displays them again. The end-result is correct but there is a flicker when Angular takes over. From what I read it should be reusing the state from the server.
On the browser console, I can see the following:
Angular hydrated 12 component(s) and 98 node(s), 0 component(s) were skipped. Learn more at https://angular.io/guide/hydration.
This seems to indicate the Angular was able to hydrate all my components. I have the Redux dev tools, and by checking them it seems that it is the store that is not being hydrated, as the initial state corresponds to the default state of the store while I would expect it to start from the state that came from the server.
What do I need to do to preserve the state of the store?