Make server side fetch depend on client side select input

[sour geyser]

First up, I'm new to Next and I'm using Next 13.1 with the app directory.

I need a select input in my application that is used to switch between the different years of data I'm looking at.
The data of the entire application (content, side navigation bar, top navigation bar) depends on the selected year, because I need to fetch data from different paths depending on which year is selected.

Currently I am fetching all the data server side, and I am setting a searchParam when the select input value changes. Because the search params can only be accessed in Page components on the server side, I'm converting the search param to a request header so the backend can access it. This leads to a complete reload of the page every time a link is clicked.

My question is: How do I implement the functionality described above? I am obviously doing something wrong, but I'm new to client / server components and therefore don't know the best design practices.

[sour geyser]

I don't understand why next.js is making this so difficult to be honest. All I need is that a client-side action triggers a server-side refetch, with access to the information what has changed

[thorny crane]

You can fetch it server side initially, pass it to something like react query as initialdata and continue the subsequent fetches on the client

[sour geyser]

but the components that need the re-fetch are server-side for now, so by that logic i could just use react query for everything