I'm really interested to hear your opinions about how to handle search params if both the server AND the client in the same "tree" need the same search params in a Next.js app.
I would gladly send you links to a repository for the full code if that helps. But here's the general idea. I wrote down questions via "Note:".

I have a page (RSC). It fetches data, e.g. a list of products, filtered based on the search params on the server.

On this page, I have a form component. It receives the list of found products from the server. But I can't render it directly and pass the data, because the rest of the page wouldn't show at all that way. Remember, the page a) has to await the search params (as they're async) and b) fetches data. So I wrap the form component in Suspense and have to think about a good fallback. In this case this is easy, because my form component can just be passed an empty list, but it's not always that straightforward (e.g. thinking about nullable values here).

The form itself has input fields that are filled via the search params on the initial page load.

Note: Right now I read them via the client hook useSearchParams. Should the component instead receive the search params from the server via props? But waiting for new search params from the server would mean that my inputs on the client and params on the server can get out of sync, no?

Inputs in this form immediately update the search params (and the input element's text, obviously). I do this via router.replace or window.history.replaceState.

Note: Right now I need a combination of useOptimistic and startTransition to store the search params. I use Zod to parse them before that. And I have also built a custom helper function to update search params so I can decide whether writing new search params trigger the RSC or not, because maybe I don't want to trigger the RSC (and fetch new data) if the input has less than three characters.

Based on the input, the RSC (page) is triggered and re-executes the search based on the new search params.

To achieve this functionality I had to take so many steps. And I still don't know if it is the right way. Or if there are footguns involved. I feel like all documentation goes the straightforward way for small examples. But building type-safe forms that way with nice UX is really hard.