I’m building a dashboard with lots of dropdown / select functionality. I have a single server page that renders a tree of client components with all of the actual code. My outermost page uses “use server” so that I can utilize nextJS automated caching for fetches made from server components. Then I pass that data down the tree of client components. The state variables that handle the dropdown values selected will be used as query params in the GET request to grab data based on these values. The difficulty here is that its a single page dashboard just with a lot of client side interactivity so I cant use “use server” anywhere besides the top level page.

From where I sit it seems like I have two options:

1. I some how get this state variable to the outermost server page using some sort of global state manager that works with server components (Sounds terrible).

2. I fetch the data directly from the client component (but the fetch request should still come from the server, not the client) using a server action with a GET request. This isnt great either because NextJS doesnt cache data from server actions. Is there any way to force server actions with GET methods to cache the data? I actually dont need the data to be cached here since I’ll get it once from a button click then wont need it again till the button is clicked. So maybe this is my best option?

Also – passing some of the data down through the client components from the server page isnt great. Each component has like 8 props and it just feels odd.

I’ve tried reading through all available articles and NextJS documentation but haven’t found anything very useful.