Just looking for general guidance and community opinions.

I understand that I can use my server component to fetch initial data for my client components (using react-query with a hydration boundary). This works great, and now I am left with the question of best practices for updating data when a client changes the search params.

Is it generally considered better to update the search params and run Router.replace to send a new request to the server to re-render the server component and update the new data. This works, though confuses me a bit because I would assume this would refresh the whole page but it seems to only update components that rely on that changing data while respecting existing state of the rest of the page. This is great, and again works well.

But obviously the other pattern would be to just have the client do the update. Assuming I could update the search params without causing an actual refresh, I could just have react-query do the update itself. Obviously the downside of this is double duty in having to keep the data fetching that the server component does and the fetching the client does would need to be in sync.

I would lean towards the latter pattern, as I imagine it would be quicker, since cleint side is worse at initial load but faster on subsequent xhr requests. So I could get the best of both worlds, have the server component fetch the initial data, and have the client handle subsequent updates/requests. I'm assuming this is a typical pattern but its not outlined anywhere in the docs to learn tutorials.

Edit: It seems like app router doesn't support shallow routing so not entirely sure how to do the latter approach.

Double edit: window.history.pushState() can be used to set the url without going to the server