Server Side Rendering

[jamesmarrs]

Wondering if anyone had a server side implementation of refluxjs and wanted to discuss more about it. I have a successful example working with react-router in an expressjs framework, but it seems a little wonky how I inject the data into the reflux component. Trying to refine a well thought out example. @BryanGrezeszak I know you mentioned in #462 that you were going to explore this soon, was wondering if you have played around with it more since then?

[kriscarle]

Hi @jamesmarrs I use refluxjs with an isomorphic app with server-side rendering. Not sure if you mean only server-side or isomorphic but I think this might help either way. The basic concept is you need to rehydrate store state from a persistent data store of some sort?

I discovered that you can do this to rehydrate a store from the parent component:

constructor(props) {
    super(props);
    Reflux.init(MyStore).setState({myData: this.props.myData});
  }

I have more notes here: https://github.com/maphubs/reflux-rehydrate

[jamesmarrs]

Thanks for the response @kriscarle , really helped me out. Reflux.init wasn't working for me, so I took a closer look at the source and I believe Reflux.initStore is what you were referring too?

Ultimately this worked for me:

Reflux.initStore(MyStore).setState({ myData: serverSideProps.myData });

Is there any specific reason why you are passing the props to the parent component before rehydrating the store of your isomorphic app? I took your suggestion and put it in my router (react-router), that way I don't ever have to pass any server side props to the parent components, and the stores would technically never get reinitiated when navigating to a parent component via routing solution if any modifications were made.

^ I think this depends on your implementation, as my entire app runs on the browser for anyone reading this.

Have you looked into any server side memory problems this could bring? I haven't personally looked into it at all, just trying to bring up any issues that could come up. Again, thanks for the response.

[kriscarle]

@jamesmarrs yes initStore is correct, I have a typo in my notes. initStore is documented here: https://github.com/reflux/refluxjs/blob/248991eda968948c3632154973d7a685b0b78640/docs/stores/README.md

I don't think it matters where you rehydrate the store as long as it happens before the first render. I'm not using react-router and have a custom isomorphic setup, so it just made more sense to be to put all the logic in the parent component.

No memory issues as far as I know, never needed to look into it. I've been using Reflux this way for a couple years now, recently updated everything to new ES6 version of Reflux.

[jamesmarrs]

@kriscarle Thanks for the info and response, really appreciate it.