Refactor Customer GET Route Handler to Server Component in Next.js 13 App Router
Up to this point we have only created a few server components. Outside of these few server components our app is primarily a client side app that just happens to use the app router.
By moving our customers GET route handler into a server component we start to make use the app router architecture.
Instructor: [0:01] In your brilliant detective mind, you may be thinking, "Can't we move some of the API routes that we just moved to the app router to be server components?" I would say to you, "That, detective, is the right question to 'iRobot.'"
[0:17] If we come into our API routes and we look at customers, let's look at this Customers route. We see we have a GET request. For now, we're going to focus on just GET requests, POSTs, and mutations we'll focus on in the future.
[0:33] If we're trying to get the most use out of server components in the app router, we can actually just get rid of this GET request. All we need from this is this await GET customers list item. Let's just take that.
[0:44] We can remove our GET requests. Now, let's come into our sales customer's layout. Here, we can go ahead and make this an async function. We'll await gets a recession and then we can go ahead and get our customers. Import the GET customer's list.
[1:02] Then we want to pass the customers down as a prop. We need to come into our customer layout component and we need to go ahead and remove all of the React Query code and then we can just get the customers.
[1:20] This is going to be this same type here. It'll just be an array. Let's remove data.
[1:29] Now, we have our customers and let's save that and we can save our layout. Come back to our app. Let's refresh and we are still getting our customers.
[1:39] Now, this isn't optimal because we have no indication that it's loading. Over the next few lessons, we will be working with adding suspense and breaking our server component down to where we fetch only where we need data. Then we can get loading states with React suspense.