Refactor Dynamic CustomerId API Route Handler to a React Server Component
By converting our dynamic customerId Route Handler to a React Server Component we'll be able to get the benefits of streaming data to our application.
This means we will be able to split our data loading into different Suspense boundaries that can render when each receives the data it needs.
Instructor: [0:00] We can come into our customer ID route and we see that we're using React query here. Let's go ahead and remove all the React query code. We can remove the useClient
[0:13] Here, all we need to do is come into our API handler for our customer ID. We can get all of the logic here. Under invariant, we can copy all of this and then we can actually just remove our route handler here.
[0:31] We can delete this customer ID route handler and then on our page let's paste that logic. Here, we need to make our page an async server component. Then let's change our customer ID props to be data, and we'll just set it to the data.
[0:52] Now, let's come to our customer ID page in here. Let's change this to data, and we can remove all of these properties that we destructured because we're not using React Query anymore. We'll set this to data.
[1:05] Then, we need to get the properties here off of our data, so we can paste them in here. Then, we can remove the code that we were using from React Query. Now, we want to remove this data, so now we can save this page. We can save our actual page itself.
[1:20] Let's come back to our app, and we can refresh. We're still getting our customers now. Let's go to a customer ID page, and we're still getting our ID page.
[1:31] Now, we can also refactor this customer ID page as we did our customer layout to use a React Server Component that loads the data rather than passing it down as props. You'll notice that we have a couple different areas where we're using different data.
[1:47] Here we're using customer info, and then here we're using our customer details. Let's go ahead and work on moving both of those to their own components. We can grab our customer info, and we're going to create an async component and call it customer info. Then, we can grab the table elements, and we can create another component, and we will call it customer details.
[2:25] Then, instead of destructuring our customer info here, we can actually remove this, and we can remove the props. Then if we come back into our page, and instead of passing our data, let's pass our customer ID. Let's grab all of our logic, and let's just pass our customer ID.
[2:43] We can save this and we come back into our ID page, and we'll have a customer ID. We can paste here what we want to use in our components. We're going to use our getCustomer info function here and then in our customer details component, we're just going to use the customer details.
[3:05] Then we just want to pass this prop down so customer ID. We had our customer info component first and then our customer details. Then we need to pass that customer ID to both. Here, we need to use that same expect an error.
[3:25] We'll use that same one for our customer details. Now, if we come back to our code and let's go to our customers route, we're going to still get this error. This is that Prisma error that's throwing because we're trying to use it in the browser.
[3:44] As we migrate all of our API routes to server components, this should go away. After we've done invoices and deposits, this error should no longer be here.
[3:53] If we just click out of it for now and we click on Michael Scott, we see his information has loaded. If we scroll down, let's click on a Kevin here. And so, we see we get the customer info here and then the customer details is loading.
[4:05] In review, using server components and suspense, we were able to move all of the loading logic for our customer ID information for customer info and customer details to their own server components and then wrap those in a suspense boundary. This gives us a nice streaming effect in our application.