A data fetching example
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 with regard to its configuration.
However, in a real-world application, we will likely want to load some data instead of a static React component such as the 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 5, Proper Data Fetching, we looked at how we can use componentDidMount
to fire the data loading. That wouldn't work on the server because components do not get mounted on the DOM and the lifecycle hook never gets fired.
Using hooks that are executed earlier, such as componentWillMount
, will not work either, because the data fetching operation is async while the renderToString
is not. For that reason, we have to find a way to load the data beforehand and...