04: Adding suspense list

In this final step, we want to show Comments below the Post detail and above the related posts.

• We start by adding the api method to api.js
• Then we add the new data dependency to our route config.
• We create the Comments component and read() in the data

The comments api is slower than the related posts api but because comments is shown above the related posts and because the comments are more important than related posts we want to control the order in which they are revealed.

To do this, we wrap them in a SuspenseList component. When given the prop revealOrder="forwards" it will alway wait for comments to be ready before showing related posts.

03: Use the lazy loaded data

To use the lazy loaded data we need to update our page components.

To do that we call the .read() method on the data providers passed in by the router.

The Detail page also shows how even though our data dependencies were defined together and the requests are triggered at the same time, we can still prioritise the displaying of the data individually. So the post content can be displayed even though the relatedPosts have not finished loading.

We do this by rendering relatedPosts inside a nested <Suspense> boundary in the Detail page.

02: Lazy load our data

Next we want to lazy load our data in parallel with our code.

To achieve this we declare our data dependencies in the route config.

We also need to wrap our fetch API calls in a way that will work with suspense.

Note: at this point the code will be broken. We need to update our page components to use the prefetched data.

01: Code Splitting

We start by replacing react-router with one which supports concurrent mode.

React Router will probably support this soon but at the time of writing this is not available.

We then update our route config to have the router lazy load the page components as needed.

Finally, we add a top level Suspense boundary in App.js

00: Starting point

At this point, we have an example application built with create-react-app.

It uses React Router for routing and chakra-ui for its components.

When the app renders we have various loading states showing and we have very little control over how and when they resolve.

The entire code for our app is in a single bundle. We'll start by splitting our code up per page.