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