(shallow routing) Updating search params causes server component to rerun.

[Tomekmularczyk]

I have a page that fetches initial data like:

export default async function PaymentPage() {
   const data = await fetchOrderData();

   return <PaymentFlow order={data} />
}

Now the problem is that when I update search params in URL to include something like step of current payment flow:

router.push('/payment-page?step=1')

It causes the PaymentPage component to rerun and refetch all the data again. This makes it moving between the steps much slower because of the unnecessary refetching.

Any way this can be fixed? In previous versions of nextjs I could use shallow routing, but it's not possible now.

"next": "13.4.1",

related discussion #48110

[Tomekmularczyk]

I noticed that the server code rerun only if I visit the URL for the first time:

1. I land on /event - server component fetches the data
2. I update search param event?step=1 - server component fetches the data
3. I update search param again event?step=2 - server component fetches the data
4. Now if I go back and forth between event?step=1 and event?step=2 the server component does not run anymore...

[BenMcD0nald]

Yeah, I noticed this as well, and it doesnt appear to be caching related either. I guess it's good that it doesn't seem to infinitely rerun but still way more fetches than necessary

[Chaptykov]

Hey! I have the same issue.

I want to keep form state in URL. But URL update triggers a page reloading.

[deviationist]

Got the same issue

[kimulchan]

Same Issue

[sorenhoyer]

Having to wait for all data to be fetched before the url changes is a bad user experience.

[ChristophWolfPCG]

same issue, a router.replace/push(xyz, {shallow:true}) would be great. I've heard there's already some code for that... ;-)

[gsdev01]

any update on this ? Do we have a clear answer here ?
I'm facing the same refetch server when router push, but in my case that is suiting my needs but don't want to do this over a (potential ?) bug. Is it by design ?
It could be a great thing for cases where we move state management within query params (eg: search bar feature), but I need on official statement on this.. thanks !

[psikoi]

If you want shallow routing, where URL search params change but server components do not re-render, you can use window.history.pushState, this way, you'll be able to pick up on these search param changes on client components via useSearchParams.

Example:
window.history.pushState(null, "", "?filter=hello");

[chan4est]

Worked like a charm! Thank you!!

[jose-vilasboas-rlabs]

I think I have a similar issue.

I have two different areas in a page that are affected by different searchParams.

Button A change the searchParam A that is filtering Area A.
Button B change the searchParam B that is filtering Area B.

I have a Suspense over Area A with searchParam A as a key.
I have a Suspense over Area B with searchParam B as a key.

If I click Button A, the page wil only respond when Area B ends its async processment.
If I click Button B. the page will only respond when Area A ends its async processment.
(At least it seems that this is the current behaviour)

The solution to get the page respond instantly (showing the Suspense fallback of the affected area) is to add both searchParams as the keys of both Suspense, but this will make both areas to load again even if their filter weren't changed.

Can we make a page to answer instantly if the Suspense keys on it doesn't change? Or at least add some kind of configuration to the Suspense in order to make it behave like that?

[pablojsx]

Yes it has a very unexpected behavior, in DEV it works fine for me, but in PROD push will rerender the whole page and lose state.

[timneutkens]

This has been solved for a while but apparently there were multiple issues/discussions asking for the same thing. Here's the docs: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api.

[sanneh2]

Hey @timneutkens I am using the window.history.pushState method (with wacky parameters like null and "" as suggested in the docs and the useSearchParams() hook is not reacting to the changes. The problem is that I have implemented progress and step recovery state in the URL with searchParams, because that seemed like the suggested pattern, yet everytime I use a simple router.push to change the queries the server blocks the actions for 200-500ms. This is yet another problem with the updated framework, while we appreciate the efforts, for example we are pushing the app router forward and getting embarrassed in production and high value clients. My suggestion is to keep the page router and not release features that are simply not working. I suggest you make a different product with whatever this is you're trying to do. Let me know if I made a mistake in using these features, thanks!