stale data with router.replace() and searchParams

[K1NXZ]

Right now I am trying to build a page with several filter options and pagination in urlSearchParams. The data that is served, can be manipulated from other sources.

The issue:
The client will always serve stale data when using router.replace() or a next/link component. This can lead to skipping entire pages of data or having the same data on multiple pages of the pagination until the user refreshes it manually (or hard navigation). For now I am using a workaround by making the pagination links a normal <a> tag which result in hard navigation with refreshed data. The router.replace() issue is worked around with an additional call to router.refresh() for now, but sadly it does result in 2 requests being performed instead of just 1.

My suggestion would be to combine the calls and have an options parameter for router.replace() something like this:

router.replace(`${pathname}?${searchParams.toString()}`, {
  refresh: true,
})

which would invalidate the client side cache before actually replacing. This should only perform one request.
same goes for next/link.

<Link href="/dashboard/posts?page=2" refresh>
  Next Page
</Link>

[bestickley]

@K1NXZ, did you ever resolve this? I'm facing this issue too.

[bestickley]

I ended up just running a server action that runs revalidatePath whenever i change the searchParams on same route. Not ideal though.