Isolate Data Fetching and Add Suspense to a React Server Component in Next.js App Router
The benefits of client side libraries like react-query are that they provide different states when fetching data.
By moving data fetching into an isolated server component we can wrap that server component in a suspense boundary and provide similar user experiences in our application
Instructor: [0:00] Before we add suspense, we need to do a little bit of refactoring. First, we can come down and see where we are using anything that we want to be a client component. We have this link which uses this variable, which makes use of usePathName.
[0:16] Let's create a new component. We'll just call it CustomerLink. We want to return a link. Then we can bring in that variable and usePathName.
[0:38] Last, we need our customer. We'll just add our customer. This will be the same type we have here, but just the ID. This here.
[0:50] We can save this and let's import our CustomerLink. We need the customer. Then we need to make sure we made this a client component and come back, and we can look at our customers. Everything still works as expected.
[1:06] Now, where we are mapping over our data, we can pull this out and create another React Server Component, where we fetch the data and it's isolated to that component rather than loading it in our Customer layout and passing it down as props.
[1:20] Let's grab this div. Pull that out and let's create a new function, customers. We can just return that div. Then here, we need to come back into our Customers layout. We can just grab this where we're getting our customers, and we can remove the customers as props.
[1:39] Let's come back to our Customer layout, make sure we remove those as props. We can come into our Customers Component now and get our customers. Then we need to make sure we make this just a Server Component. Now we just need to add our customers into the return markup of our Customer layout.
[1:59] We're going to get an error because this is an async component. For now, we can just add this @ts-expect-error. Now if we save and we come back, we're still getting our customers and everything is fine. Ignore this error for now. We'll deal with it in the next lesson.
[2:15] The last thing we want to do is add suspense. We've wrapped our async component in suspense. As our async component is fetching, we can give suspense our fallback to show a loading UI. We're just going to give it that customer skeleton, and then we need to import suspense. Now if we save, you see for that brief moment, we had our loading UI.
[2:36] In review, in this lesson, we refactored our Customer layout to only do the data fetching in the part of our layout that needs it. Then we wrapped that in a suspense bound.