Next 16.0: "Use cache" is ignored in dynamic routes

[leo-cheron]

Link to the code that reproduces this issue

https://github.com/leo-cheron/next16-cache

To Reproduce

1. Create a Next.js 16 app with dynamic routes (e.g., app/[locale]/page.tsx)

File: app/[locale]/page.tsx

'use cache'

import {fakeAwait} from '@/utils/fakeAwait';

const Home = async ({ params }: { params: { locale: string } }) => {
  params = await params;
  await fakeAwait(2000);

  return (
    <div>
      <h1>locale: {params.locale}</h1>
    </div>
  )
}

export default Home;

2. Add the 'use cache' directive at the top of the page or layout component
3. Include async data fetching or delays to observe caching behavior
4. Run locally with bun run dev:
   • Navigate to /en, /fr, etc.
   • Refresh the page multiple times
   • ✅ Expected: After first load, subsequent refreshes use cached data (instant load)
   • ✅ Actual: Cache works correctly, pages load instantly on refresh
5. Build and deploy to production
6. Navigate to the same dynamic routes in production: https://next16-cache.vercel.app/en-us
7. Refresh the page multiple times
   • ✅ Expected: Cached data should be used, instant load times
   • ❌ Actual: Every refresh re-executes the entire component, ignoring the cache completely

Current vs. Expected behavior

Local Development (npm run dev): ✅ Works as expected

• Cache is respected
• Subsequent page loads are instant
• fakeAwait(1000) delay only happens on first load

Production Build: ❌ Broken

• Cache is ignored
• Every page refresh re-executes the page
• fakeAwait(1000) delay happens on every refresh
• Suspense fallbacks are shown on every navigation/refresh

Provide environment information

- **Next.js Version**: 16.0.0
- **React Version**: 19.2.0
- **Node Version**: 22
- **Deployment Platform**: Vercel

Which area(s) are affected? (Select all that apply)

Dynamic Routes

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

No response

[rshaul]

For what it's worth I think this is a known limitation called out in the docs.

Avoid passing dynamic inputs
You must not pass dynamic or runtime data into use cache functions unless you avoid introspecting them. Passing values from cookies(), headers(), or other runtime APIs as arguments will cause errors, as the cache key cannot be determined at pre-render time.

Can work around with generateStaticParams

params prop - This is runtime data unless you provide at least one example value through generateStaticParams. When provided, those specific param values are treated as static for prerendered paths, while other values remain runtime

However being able to "use cache" with dynamic params seems like it would be incredibly helpful and the lack of this feature will stop any attempt at me moving my multi tenant app over to cache components.

[leo-cheron]

For what it's worth I think this is a known limitation called out in the docs.

Avoid passing dynamic inputs
You must not pass dynamic or runtime data into use cache functions unless you avoid introspecting them. Passing values from cookies(), headers(), or other runtime APIs as arguments will cause errors, as the cache key cannot be determined at pre-render time.

I thought only the use of cookies(), headers(), connection(), and searchParams would force / require a dynamic context.

The Next team just updated the documentation, but it's sill unclear to me if "use cache" is supposed to be incompatible with dynamic routes. I've added the "use cache: remote" directive here for testing: it is massively slow compared to 'use cache'.

Can work around with generateStaticParams

params prop - This is runtime data nless you provide at least one example value through generateStaticParams. When provided, those specific param values are treated as static for prerendered paths, while other values remain runtime

Using generateStaticParams is ok when you have a few pages. In real world context (eg e-commerce), you can't really afford to prerender thousands of pages on every single build, and must rely on ISR. Before cacheComponents, we used segment config export const dynamic = 'force-static' on dynamic routes to generate on-demand static cache. Segment config not being compatible with cacheComponents, this is no longer an option.

[rshaul]

Yeah I agree with you 100%, left my feedback on "use cache: remote" here

#85239 (comment)

[mdj-uk]

Does it work if you return an empty array from generateStaticParams?

(Without cache components you can do this as an alternative to export const dynamic = 'force-static' to get ISR. https://nextjs.org/docs/app/api-reference/functions/generate-static-params#all-paths-at-runtime)

[leo-cheron]

Does it work if you return an empty array from generateStaticParams?

(Without cache components you can do this as an alternative to export const dynamic = 'force-static' to get ISR. https://nextjs.org/docs/app/api-reference/functions/generate-static-params#all-paths-at-runtime)

Only the routes returned in generateStaticParams will be static (generated at build time), other paths will stay dynamic (no ISR).
Static: https://next16-cache.vercel.app/en/generateStaticParams
Dynamic: https://next16-cache.vercel.app/en-test/generateStaticParams

[mdj-uk]

Actually this pattern works fine, see for instance app/product/[id]/page.tsx from https://github.com/aurorascharff/next16-commerce (deployed to https://next16-commerce.vercel.app/) which has 'use cache' on its data fetching function.

It seems the repro here works if you a) add generateStaticParams returning at least one entry and b) remove any suspense which wraps the page (including loading.tsx or suspense boundary in layout)

• just (b) means build fails
• just (a) works fine with a local prod build but not when deployed to vercel - the page is regenerated on every request taking 1s. Whereas locally you always get the loading state in the initial html response but you usually don't see it since the content streams in quickly. Edit: I think I'm wrong about this being different on vercel. Even on local build, adding something to ISR cache on first request fails if it's underneath a suspense boundary.

My fork: https://github.com/mdj-uk/next16-cache/tree/main, deployed at https://next16-cache-bice.vercel.app/en

Note 'en' is returned from gSP so is generated at build time. Change 'en' in url to anything else and it will be built on request then cached as expected.

export function generateStaticParams() {
    // other locales generated and cached on first request
    return [{ locale: 'en' }];
}

const Home = async ({ params }: { params: Promise<{ locale: string }> }) => {
    'use cache';
    cacheLife({ stale: 10, revalidate: 20 });
    cacheTag("page");
    
    const { locale } = await params;

    await fakeAwait(1000);
    //...
};

[rshaul]

Yes I think @mdj-uk is correct. Doing my own testing everything looks good with dynamic params and "use cache". You just need to return 1 value from generateStaticParams.

[leo-cheron]

Good catch. This is still an unituitive workaround that will expose 200 paths that shouldn't exist (if we don't want to dynamically fetch params in generateStaticParams).

Not being able to use Suspense with caching in dynamic routes would make most next16 innovations quite pointless on most websites, so let's hope this can be addressed 🙏

[rindev0901]

i tried to deploy a small project and use cache components it works fine on my server but vercel hosting works very bad slow uncached and not streaming content . i think vercel is not 100% compatible for this version 16

[perfectbase]

I also have a similar issue.
Will leave the details of my testing below.

On Next.js 15 with PPR and unstable_cache, I was able to get instant navigation for dynamic pages without showing any loading skeletons as shown in the example below.

• Next.js 15 (PPR + unstable_cache)
  • Demo
  • Code
  • Credentials: admin/admin

I wasn't able to replicate the same behavior on Next.js 16. I tried with unstable_cache and "use cache" at the page, component and function levels.
I also tried the generateStaticParams workaround, but it didn't work on this project.
I'm guessing that the cacheComponents flag doesn't work well with dynamic routes?

Here are some examples:

• Next.js 16 (PPR + unstable_cache)

  • Demo
  • Code
  • Credentials: admin/admin

• Next.js 16 (PPR + "use cache")

  • Demo
  • Code
  • Credentials: admin/admin

※ The logs from the cached functions are also shown on every request with different timestamps, so the cache doesn't seem to be working.

[ZarkoPernar]

Is this due to the fact that dynamic routes require "use cache: remote"? Seems like "use cache" is just for build time caching so unless you define getStaticParams() it cannot work for dynamic routes.

https://nextjs.org/docs/app/api-reference/directives/use-cache-remote

[mdj-uk]

@perfectbase it looks like you're hitting a vercel specific problem, your next 16 + 'use cache' code works as expected for me in a local prod build. i.e. the content of each page is cached server side after the first request, so if you return to a page you get an instant response and you don't see the loading state. (It's not cached client side, for that you need to set prefetch={true} on the link, or add generateStaticParams)