The example in the previous section should explain clearly how to set up a universal application in React. It is pretty straightforward, and the main focus is on getting things done.

However, in a real-world application, we will likely want to load some data instead of a static React component, such as App in the example. Suppose we want to load Dan Abramov's gists on the server and return the list of items from the Express app we just created.

In the data fetching examples in Chapter 6, Managing Data, we looked at how we can use useEffect to fire the data loading. That wouldn't work on the server because components do not get mounted on the DOM and the life cycle Hook never gets fired.

Using Hooks that were executed earlier will not work either because the data fetching operation is async, while renderToString is not. For that reason, we have to find a way to load the data beforehand and pass it to the component as props.

Let's look at how we...