Learning React, 2nd Edition

Chapter 12. React and the Server

So far, we’ve built small applications with React that run entirely in the browser. They’ve collected data in the browser and saved the data using browser storage. This makes sense because React is a view layer; it’s intended to render UI. However, most applications require at least the existence of some sort of a backend, and we will need to understand how to structure applications with a server in mind.

Even if you have a client application that’s relying entirely on cloud services for the backend, you still need to get and send data to these services. There are specific places where these transactions should be made and libraries that can help you deal with the latency associated with HTTP requests.

Additionally, React can be rendered isomorphically, which means that it can be in platforms other than the browser. This means we can render our UI on the server before it ever gets to the browser. Taking advantage of server rendering, we can improve the performance, portability, and security of our applications.

We start this chapter with a look at the differences between isomorphism and universalism and how both concepts relate to React. Next, we’ll look at how to make an isomorphic application using universal JavaScript. Finally, we’ll improve the color organizer by adding a server and rendering the UI on the server first.

Isomorphic Versus Universal

The terms isomorphic and universal are often used to describe applications that work on both ...