Search code examples
node.jsreactjsfluxible

What does « dehydrate » and « rehydrate » stand for in Fluxible?


I'm working on a minimal app which work with fluxible. Pretty much everything seems clear but one thing : the concept of dehydrate and rehydrated state.

I've understood that it's what's needed to sync the store between the client and the server, but I don't know why. This line is very unclear to me :

 var exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';

In server.js (https://github.com/yahoo/fluxible/tree/master/examples/react-router)

I would really appreciate if you could tell me in « simpler word » what it means.


Solution

  • In the context of Fluxible, dehydrating your application means extracting its state into an object. Rehydrating your app is using that same object to reinject state in your application. The object representing the state of your application should be serializable in order to send it over the network.

    Say I want to pre-render my app on the server, serve the html to the client, then re-render my app on the client. This would be trivial if my app only consisted of static data. However, my app is stateful: it retrieves data from my API before the initial render and stores it. By extracting the state of my app on the server, sending it along with the HTML, then reinjecting it on the client, I avoid making two requests to my API.