Chapter 7. Building the server

 

This chapter covers

  • Setting up Node.js with Express
  • Writing Express middleware
  • Using React Router on the server to handle view routing
  • Rendering React on the server with the renderToString function
  • Fetching data on the server using Redux
  • Implementing a static method on your components to handle data fetching

This chapter is all about the code that needs to happen on the server. I’ll cover server-specific topics including using Express and using your component and routing code on the server. For example, you’ll learn how to declare the actions of your application in a way that allows the server to fetch them automatically on every page render.

Yes, you read that correctly: you’re going to run your React, React Router, and Redux code on the server. React and React Router each provides server-specific APIs to make this work. Redux needs only minor changes—mostly you’ll call actions from the server. Figure 7.1 illustrates how this works.

Figure 7.1. The main differences between server and browser code for React and React Router

To get the code shown in figure 7.1 working, you need to do the following things:

  • Set up app routing with Express
  • Handle specific routes (for example, the cart and products routes) with React Router using the match function
  • Render your React components on the server using renderToString
  • Fetch the data for your components on the server
  • Respond to requests with the rendered app

renderToString vs. render

7.1. Introduction to Express

7.2. Adding middleware for view rendering

7.3. Adding Redux

Summary

sitemap