Building Isomorphic JavaScript Apps

Chapter 10. Serializing, Deserializing, and Attaching

Jason Strimpel

In Chapter 8 we added the ability to execute the request/reply lifecycle on the client. In Chapter 9 we created isomorphic abstractions for getting and setting cookies and redirecting user requests. These additions took our application framework from a server-only solution to a client-and-server solution. These were great strides toward a more complete solution, but we are still missing a key component of an isomorphic JavaScript application: the ability to seamlessly pick up on the client where things left off on the server.

Essentially, the application should take the server-rendered markup and bind itself to the markup just as if it had been rendered on the client like an SPA. This means that any data used to render the controller response on the server should be available on the client, so that when a user starts interacting with an application she is able manipulate the data, e.g., via a form. Any DOM event handlers will need to be bound as well, to facilitate user interaction. In order to “rehydrate” on the client, four steps must be completed:

1. Serialize the data on the server.

2. Create an instance of the route handler controller on the client.

3. Deserialize the data on the client.

4. Attach any DOM event handlers on the client.

Defining Rehydration

You will see the term “rehydration” used throughout the rest of this chapter and in other isomorphic JavaScript references. Rehydration in the context of ...