Usage with angular universal

[D34THWINGS]

I recently learned how to use Angular 2 after a long time using React in production with server side rendering and I wondered if I could reproduce the same stack in Angular 2. Server side rendering is important for SEO and performance on client side, bootstrap is a lot quicker when pre-rendered by server. In React I would do this by dumping my Redux state in the HTML and rehydrate on client side using redux-persist or something like this. But I don't know how to start with ngrx to reproduce this behavior. If you could provide an example to start, or some clues to follow, I would be glad to write an example in the documentation.

[robwormald]

We're holding off on any documentation on this until the universal migration into angular/core is complete, as APIs are likely to change.

That said, ngrx's initial state parameter was designed for this purpose - generally its just a question of doing the same thing you'd do in react/redux - dump the state into a global variable server side and hydrate ngrx's initial state with that.

[D34THWINGS]

Thanks for the advice, i'll dig into this and make some feed back for anyone wanting to do the same

[MarkPieszak]

@robwormald Would love to help with this as well, was looking into it on the Universal end and it'd be as easy as how we create the CacheService or Preboot strings on window, but wasn't sure how to access a snapshot of the Store when Angular stabilizes.

[MikeRyanDev]

@MarkPieszak Subscribing to the Store delivers the last value synchronously:

store.take(1).subscribe(state => {
  // state is available synchronously
});

[0radek]

What is your opinion of writing a function that will rehydrate the reducer initial state from a global window variable which holds the state from server? So instead of dispatching directly from ngOnInit(), use a function to call that which will check if the global variable exists and if so, rehydrate otherwise (on server) call the dispatch and update the initial state. That is what I'm doing right now (looked at @MarkPieszak repo for inspiration) but not sure that is correct approach.

Thanks

[templth]

I wonder how to get the current store content after the application is prerendered on the server side, so I can serialize it into the page to send back to the client...

Thanks very much for your help!

[0radek]

I'm rehydrating in my reducer files at the moment. It is working fine for me. I check if isBrowser then parse the json in the universal cache

[robwormald]

This is in the design for the V3 API, but the basic idea is more or less what @ScaryWolfMan describes - you'd (server-side) add your initial state to a global variable and pick it up on bootstrap.

[0radek]

@robwormald i saw design yesterday but do you think it is bad idea to rehydrate in the reducers by checking if the global var exists? in the new version it will be a service? would like to know so can updated the code i have. thx

[templth]

thanks very much @ScaryWolfMan and @robwormald for your explanations!

[dafabulousteach]

Any updates on this issue? @ScaryWolfMan Wouldn't the check for isBrowser fail in the reducer now that universal requires that the constructor complete an @Inject call with the PLATFORM_ID object?

[robwormald]

See ngrx/platform#101

[dafabulousteach]

I would like to know how ngrx/store can be used with Angular Universal. If we have a state that is dependent on the cache or localStorage, the PLATFORM_ID token cannot be injected since there is no constructor in our reducer file.