Hi,

I'm currently working on a project using the App Router and noticed unexpected behavior when using Next.js' instant navigation with prefetching.

My goal is to prefetch the shell and possibly cache the initial data for a short period (e.g., 30 seconds), but not indefinitely. However, I’m experiencing an issue where the data appears to be permanently cached after prefetching and doesn't update on subsequent navigations — unless I do a full page reload.

Here's the configuration I tried in next.config.ts:

Kopieren
Bearbeiten
import type { NextConfig } from "next";

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

export default nextConfig;

To reproduce the issue:

Navigate to / (which prefetches /test).
Then navigate to /test — the data remains stale and never updates.
If I reload /test directly, the data is correctly fetched fresh every time.


Repo: https://github.com/timootten/NextJS-Instant-Navigation

My question:

Is there a way to configure prefetching so that it only fetches the shell (not the data)?
Alternatively, can I limit the cache duration of prefetched server-rendered data to something like 30 seconds?
I’d appreciate any clarification on how the new experimental staleTimes and caching layers interact with prefetching in this context.

Thanks in advance!
Timo