Disabling Default 30-Second Caching for Server Components Accessed via Soft Navigation

[brain1401]

Goals

1. Provide an option to disable the default 30-second caching for server components when accessed through the Link component and soft navigation.

2. Allow developers to have more control over caching behavior in scenarios where caching may not be desirable.

Non-Goals

1. Modifying the caching behavior for server components accessed through hard refresh or direct URL access.

Background

In Next.js, when a server component's route is accessed via the Link component and soft navigation, a default 30-second caching is applied to the server component's response. However, it's important to note that this default caching behavior does not occur when a user performs a hard refresh on a specific page.

While caching can be beneficial for performance optimization, there are scenarios where the default 30-second caching for soft navigation may not be suitable, such as:

1. Real-time data: When a server component relies on real-time data that needs to be fetched and displayed on each request, the default caching can lead to stale data being shown to the user.
2. User-specific content: If a server component generates content that is specific to each user based on their session or authentication status, caching the response can result in showing the wrong content to different users.
3. Dynamically generated content: In cases where the server component generates dynamic content based on request parameters or other variables, caching the response may not be appropriate as the content can vary for each request.

Currently, there is no straightforward way to disable the default 30-second caching specifically for server components accessed through soft navigation using the Link component.

Proposal

I propose adding a configuration option or a way to disable the default 30-second caching for server components when they are accessed via the Link component and soft navigation.

One possible implementation could be introducing a new prop for the Link component, such as disableCaching, which would indicate that the server component accessed through that specific link should not have the default caching applied.

Here's an example of how it could be used:

<Link href="/server-component" disableCaching>
  Server Component
</Link>

Alternatively, a configuration option could be added to next.config.js to globally disable the default caching for server components accessed via soft navigation.

It's important to emphasize that this proposed change would only affect the caching behavior for server components accessed through soft navigation using the Link component. The caching behavior for server components accessed through hard refresh or direct URL access would remain unchanged.

By providing an option to disable the default caching for soft navigation in specific scenarios, developers would have more flexibility and control over the caching behavior of their server components, allowing them to handle real-time data, user-specific content, and dynamically generated content more effectively.

Thank you for considering this proposal. I look forward to discussing it further with the community and the Next.js team.

[wantpinow]

Just a heads up, you can achieve this by setting the following Next config:

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

and then setting prefetch={false} on any link you don't want to cache:

import Link from "next/link"

export function ExampleLink() {
    return <Link href="/example" prefetch={false}>Click me</Link>
}

I don't love having to do this and agree that a simple disableCaching flag would be preferable, but this should work for the time being.