nextjs - 💡(How to fix) Fix Next 16.0: "Use cache" is ignored in dynamic routes [27 comments, 11 participants]

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;

1. Add the 'use cache' directive at the top of the page or layout component
2. Include async data fetching or delays to observe caching behavior
3. 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
4. Build and deploy to production
5. Navigate to the same dynamic routes in production: https://next16-cache.vercel.app/en-us
6. 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