Opt-out of client cache

[Enngage]

Goals

Our app is quite dynamic & personalized and we can't successfully use router.refresh because it only revalidates current page. We can't really call router.refresh on every single route change, can we?

Most, if not all, issues could be solved if you gave us the option to disable client cache and just let every route change go to server.

Background

There are no alternatives. We might as well disable soft navigation and rely on hard navigation only. But then there is little point in using Next.js.

Proposal

Add a configuration setting 'disableRouterCache' to instruct Next.js to fetch every page from server rather than looking to client cache.

[JoeyKhd]

+1

[jikdo]

Give as an option to opt out per client component too

[don-esteban]

Did everybody read and follow this discussion? #54075

[am-unklown]

#54075 (comment)

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 0,
      static: 180,
    },
  },
}

module.exports = nextConfig

[leerob]

Following up here: the Client Router Cache no longer caches Page components by default.

You can opt into the previous Client Router Cache behavior by setting the following configuration:

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};
 
module.exports = nextConfig;

[hiep294]

I set like that, but, if I change the router fast, the Client Route sometime still caches

[paulschuetz]

It think it would be awesome if this was documented better. I have a next js 14 app router project and if I search the v14 caching documentation (see https://nextjs.org/docs/14/app/building-your-application/caching) for "30" I only get information about the Link component. I think it should state very clearly that

Routing via router.push will show cached page data on the client for up to 30 seconds. This could lead to outdated pages on the client even tho pages are configured for dynamic SSR with "force-dynamic". If you want to make sure no cached page data is displayed either configure globally via staleTimes or on demand and more specific via revalidatePath.