I am working on a project where I’m fetching data on the server for components and passing it down via props to other components. If data is needed in the client component, I wrap the main page component with the context of that component, say PropertyContext.

However, I’m facing a problem where I need to fetch data when the user clicks the "View Details" button on the dashboard tours request page. I can't fetch the data on the server side, so I have to fetch it on the client side. I'm looking for the recommended approach. I tried to find a solution in the docs but couldn't find one. Should I use a reactive way of fetching data on the client side with useSWR or maybe React Query?

There’s one more thing worth mentioning: I’m using Suspense to wrap data fetching because I’m fetching data in two components—one at the page level for user data and authorization (to allow access based on specified criteria), and the other in the main component for fetching the data needed for that page.

For example, on the dashboard properties page, I fetch user data to determine if they have the right privileges to visit the page. Then, in the main properties component, I fetch data for the properties (e.g., for the properties table). To give the user a nice experience, I’m using Suspense in two different places: first, at the page level with loading.tsx, which triggers the skeleton for the entire page, and second, for the main component, where it triggers the skeleton for the dashboard properites table.

But on the dashboard properites table , I also have a "View Details" button. When the user clicks it, a drawer opens to show details of the selected property, but I need to fetch that data from server actions at that point. This is my main problem. It will also trigger the table Suspense if I use state there to hold the selected property data, so I have to use useTransition here too.