[App router] Always reload a page when clicking on a <Link>

[ZoranRavic]

Summary

Next.js caches pages that you have opened.

Clicking on <Link> shows an old cached version of a page, if that cached version was loaded less than 15 seconds ago.
In that case there are no http requests when you move between pages.

I couldn't find documentation on this, but in nextjs v 14.2.1 the time limit seems to be 15 seconds.
If you find documentation for this then please share a link.

My problem is that I have some pages that often change, meaning that they have to be reloaded every time the user opens them.

Is anyone familiar with how to tell it to disable cache?

For now my workaround is to use <a> instead of <Link>, since <a> always does a full page refresh.
But I would rather use <Link> to avoid resetting everything.

Additional information

To be clear I tried using revalidatePath and a bunch of other things that I seen mentioned in the docs,
but none of it seems to have any effect.
Maybe I missed something?

---

This discussion seems similar, but isn't #48312
They say that getServerSideProps gets new data, but it is not rendered, while in my case new data is never loaded.

[icyJoseph]

Here are the docs:

• https://nextjs.org/docs/app/building-your-application/caching#router-cache
• And, an experimental API to control that https://nextjs.org/docs/app/api-reference/next-config-js/staleTimes

And to opt-out, https://nextjs.org/docs/app/building-your-application/caching#opting-out-3

You'd need an onClick handler on the Link, which calls router.refresh() I guess. For people without JS, it doesn't matter because the Link, would just work as a regular a.

[ZoranRavic]

Thanks. That experimental API is what I needed.

I set the stale time for dynamic routes to zero and now it always loads new page data.

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 0,
    },
  },
}

---

One thing I can't figure out is if I put revalidatePath('/', 'layout') on all pages why does it not clear stale cache?

I feel like that function call is just ignored. Is it not enough to call revalidatePath from server components?

---

As for using router.refresh() that would result it multiple page loads in case nextjs doesn't use stale data.

Also it needs to be refreshed with a dalay eg: onClick={() => setTimeout(() => router.refresh())} otherwise it will refresh the old url, instead of the new url.

[icyJoseph]

Yeah, funnily enough, I ended up noticing that 14.2.x has a bug:

• https://nextjs-queryparams.vercel.app/

Reported by others, and a partial fix seems to be setting staleTimes dynamic to zero. Which might indicate, that the introduction of that API is what messed things up to begin with:

• Page won't rerender when initial searchparam is removed #65030
• Discrepancy in searchParams between server and client after clicking Link #64170

[ZoranRavic]

Nice catch. That bug will probably catch many people off guard.