The idea of this PR would be to provide a nice way to transfer ngrx store state from server to client.
Still some of these ideas I am not entirely sure they are the proper way to do it. So comments and discussion is probably needed.
The concept is simple :
1 ) Server sets some state on the store (just like the browser does)
2 ) That state is cached (in the ngAfterViewChecked lyfecicle hook) since this would be (I am guessing) a place where we know the app is fully bootstraped and ready to be sent to the browser
3 ) Browser registers ngrx store module but since window['TRANSFER_STATE'] contains state inside it starts the store with the server's state as the initialState of the reducer.
4 ) Browser bootstraps normally.
The concept of the use case in this PR is simple, just to showcase how the transfer is done.
The counter reducer has a initial state which is random, if we wouldn't transfer that state from the server to the browser the browser would start with a counter value different from the one on the server. Since we transfer that state from the server the value is kept from server to client.
Three main points for discussion in my opinion.
1 ) Where should we snapshot and save the store state? ngAfterViewChecked of the root component?
2 ) the window['TRANSFER_STATE'] needs to be registered before the script that has the app is registered. I am adding it to the header, this definitely needs to be changed. My guess would be to add a placeholder for it in index.html and add it there instead of the body.
3 ) Should the reducer have a single initial state and check for the window object? sounds a bit harsh and error prone maybe for more complicated use-cases. Open for suggestions here.
The idea of this PR would be to provide a nice way to transfer ngrx store state from server to client.
Still some of these ideas I am not entirely sure they are the proper way to do it. So comments and discussion is probably needed.
The concept is simple :
1 ) Server sets some state on the store (just like the browser does) 2 ) That state is cached (in the ngAfterViewChecked lyfecicle hook) since this would be (I am guessing) a place where we know the app is fully bootstraped and ready to be sent to the browser 3 ) Browser registers ngrx store module but since window['TRANSFER_STATE'] contains state inside it starts the store with the server's state as the initialState of the reducer. 4 ) Browser bootstraps normally.
The concept of the use case in this PR is simple, just to showcase how the transfer is done.
The counter reducer has a initial state which is random, if we wouldn't transfer that state from the server to the browser the browser would start with a counter value different from the one on the server. Since we transfer that state from the server the value is kept from server to client.
Three main points for discussion in my opinion.
1 ) Where should we snapshot and save the store state? ngAfterViewChecked of the root component? 2 ) the window['TRANSFER_STATE'] needs to be registered before the script that has the app is registered. I am adding it to the header, this definitely needs to be changed. My guess would be to add a placeholder for it in index.html and add it there instead of the body. 3 ) Should the reducer have a single initial state and check for the window object? sounds a bit harsh and error prone maybe for more complicated use-cases. Open for suggestions here.