This
https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api

If you are expecting the change on server component, you should use router.replace

yes, i am currently using it. But behavior is weird.
I wanna make client side filtering using data fetched by third-party API. In order to filter i use page's searchParams in RSC page. But it re-fetches the exact same data on every url change which i dont need.

Pass the data down to a useState hook in client component and filtering it

Or is it possible to pass the searchParams to the third-party api

yes, its possible but it will be server side filtering 🙂 I just wanna fetch data in RSC once and just filter the data on client.

Data should be re-fetched only if its changed in db.

Yeah then you should pass the data to a useState hook

and filtering it client side, either with other useState hook or url params

What do you mean by passing data to a useState hook if its fetched in async RSC ?

Well, i need to provide some code

This is a function called in th RSC to fetch the data.

And second screen is a client component that changes URL search params.

Currently my UI is slowing down by fetching the whole data on every url's search params change

Pass the data from server component to a client component and put the data to a useState hook