Dynamic pages and search params causing latency

[JohnMarsden24]

We utilise URL search params to manage some state in our app, for example if a search filter is applied. However we noticed a delay when updating the search params as it has to fetch a new RSC payload of the page. I created a minimal repo next-search-params-latency to see for yourselves. The component used to change the search params is taken straight from the Next docs.

I can understand why this is happening because the search params get passed to the page as a prop but is there any way to opt out of this? For example we're adding a multi-select filter which will push multiple params in quick succession and we're finding the latency is causing params to be missed

[astrodomas]

This is expected, as Nextjs app router is server-centric, meaning that searchParams, useSearchParams is tightly coupled with the server. This means, that when you use any of these mentioned things (and other things too), you will always call the server to retrieve a payload (in this case RSC), meaning, that it will perform your page.tsx logic.

[astrodomas]

Also, you can check this feature request #71057.

[astrodomas]

Also, forgot to mention, probably your usecase for filtering should be:

• SSR -> fetch data in respect to filters
• Once client-side takes over, on filter click - rerender your page (on the client) based on params selected via fetch api and use shallow routing docs for history manipulation to mutate window url searchParams.

[JohnMarsden24]

Hey thanks for your speedy help! Shallow routing was the word I was looking for thank you, that lead me to finding this in their docs which is exactly what we want to do

[astrodomas]

Don't forget that useSearchParams() opts you in to use <Suspense> and perform streaming even if you just want to use search params on the client-side.