How to clear client side router cache without rerendering current page? (in App router)

[pomy4]

Summary

Hello, this is related to the App router.

I have read #54075, from which I have understood, that the only ways to clear the client side router cache are either with router.refresh() or revalidatePath('/'), both of which also rerender the current page.

I know you can turn off the client side router cache entirely in the nextjs config, but I like it, I just want to clear it (e.g. after a graphql mutation) without rerendering the current page, and preferably also without making a request.

I have included a stackblitz link to help illustrate the issue:
Go to the second page, click "Increment", and go back to the first page -> you should see the cached value.
However, if you click "Increment with router refresh" instead, you should see fresh data when going back the previous page, at the cost of each button click rerendering the whole current page, which is not desirable from a performance standpoint (also it can constrain the way you write other components).

I have thought of a solution, but haven't tested it yet, since it's not very elegant, and I'm hoping to find something better:
Wrap next/link (and router.push), so that it adds a query parameter to each href. The value (of the query parameter) is read from a global context, and when you want to clear the cache, update this global context with a random value, so that the following navigations are cache misses. You would also probably need an useEffect (somewhere up the render tree) to remove this query param from the current url, so that it's not visible to the user (however, it's possible he will still see it while the page is rendering).

I found this reddit comment, which says that with npm run dev you can just do window.nd.prefetchCache.clear(), but it didn't work for me.

So:

• Is there some better solution I'm missing?
• Or, possibly, where is the relevant code in Nextjs for clearing the client side router cache, so that I can patch Nextjs locally? I tried to find it, but unfortunately wasn't successful.
• Or, maybe, is the addition of this method on the roadmap? If not, please consider this a feature request.

Thank you for any help.

Additional information

No response

Example

https://stackblitz.com/edit/nextjs-5cvure?file=app%2FCounter.jsx

[andreygp5]

In Next.js 15 the dynamic pages caching is opt-out by default and can be configured with the experimental.staleTimes.dynamic variable - https://nextjs.org/docs/app/building-your-application/caching#opting-out-3

[pomy4]

Thanks, but I would like to keep the caching - I just want to clear it after e.g. a graphql mutation (without rerendering the current page).

[pau-not-paul]

I tried to find it, but unfortunately, I wasn't successful.

1. router.refresh() dispatches ACTION_REFRESH: source.
2. ACTION_REFRESH calls refreshReducer: source.
3. refreshReducer definition: source.

Essentially, we’d need something like clearCacheReducer, which would function as a subset of what refreshReducer currently does.

In development window.nd.cache.parallelRoutes.clear() works but gives some warnings in the console.

[daveycodez]

@leerob this is 100% needed otherwise we have to do hard redirects to clear middleware rewrites.

[zaynelovecraft]

If you need to do this from middlware I found a temp solution but it will log an error in the console.

Set response header Next-Router-State-Tree with value to encodeURIComponent(JSON.stringify(['refetch']))

[daveycodez]

Do I have to show up to Vercel ship to ask for this rip

[robinkarlberg]

nextjs can **** my **** balls