Chapter 8. Isomorphic view rendering

 

This chapter covers

  • Creating an entry point for the browser code that renders your React components
  • Serializing the data so the browser code can start up (bootstrap) with the state from the server
  • Deserializing the data in the browser to hydrate your code
  • Including information from the original server request in your serialized data to maintain a consistent state between the browser and the server
  • Transitioning to a single-page application (SPA) experience to handle user interactions in the browser

Throughout this chapter, you’ll build the browser portion of the isomorphic view render. You’re focusing on the lower half of the image in figure 8.1. You’ve seen this figure many times, but I’m revisiting it here to give context to this chapter.

Figure 8.1. This chapter focuses on the lower half of the flow, everything that happens after the server render (the browser render and the SPA logic).

All the code for this chapter is in the same GitHub repo that’s used in chapter 7, which can be found at http://mng.bz/8gV8. After you’ve pulled down this code, switch to chapter-8.1.1 (git checkout chapter-8.1.1), which has the code for the first section of the chapter. Each branch provided in a section includes the skeleton code needed from previous sections, but not what will be added in that specific section. The next section’s code will contain the complete code from previous sections. Each time you need to switch branches, I’ll let you know.

8.1. Setting up the browser entry point

8.2. Matching server state on the first render

8.3. Performing the first load

8.4. Adding single-page app interactions

Summary

sitemap