use cache doesn't work properly with dynamic routes
Link to the code that reproduces this issue
https://github.com/cantemizyurek/next-js-dynamic-io-bug-report
To Reproduce
Create a dynamic route [id] and put this code inside and try to build application. Throws error I think it should not be throwing. And works as expected in dev mode.
'use cache'
import { DisplayId } from './components'
import { Suspense } from 'react'
export default async function Page({
...props
}: {
params: Promise<{ id: string }>
}) {
return (
<Suspense fallback={<div>Loading...</div>}>
<DisplayId params={props.params} />
</Suspense>
)
}
Current vs. Expected behavior
Not to throw errors when building
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.1.0: Thu Oct 10 22:05:53 PDT 2024; root:xnu-11215.41.3~5/RELEASE_ARM64_T6030
Available memory (MB): 36864
Available CPU cores: 12
Binaries:
Node: 22.11.0
npm: 10.9.0
Yarn: N/A
pnpm: 9.6.0
Relevant Packages:
next: 15.0.4-canary.3 // Latest available version is detected (15.0.4-canary.3).
eslint-config-next: 15.0.4-canary.3
react: 19.0.0-rc-66855b96-20241106
react-dom: 19.0.0-rc-66855b96-20241106
typescript: 5.6.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
dynamicIO
Which stage(s) are affected? (Select all that apply)
next build (local), Vercel (Deployed)
Additional context
No response
I had the same error and was able to fix encapsulating the page with Suspense:
export default async function Page({ params }: { params: Promise<{ slug: string }>
}) {
return (
<Suspense>
<SuspensedPage params={params}></SuspensedPage>
</Suspense>
);
}
async function SuspensedPage({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params
return <h1>Blog Post: {slug}</h1>
}
Could you add the error message that you're getting to the issue description? That helps us see if we're reproducing the issue correctly.
I'm getting this, is this also what you're seeing?
Error: Filling a cache during prerender timed out, likely because request-specific arguments such as params, searchParams, cookies() or dynamic data were used inside "use cache".
(The full log is basically the same, repeated a couple times)
Error: Filling a cache during prerender timed out, likely because request-specific arguments such as params, searchParams, cookies() or dynamic data were used inside "use cache".
at Timeout._onTimeout (/Users/owoce/code/repros/dynamicio-error-GH-72529/.next/server/app/[id]/page.js:1:12951)
Error while saving cache key: 1:07b:["bjajj3JYcv-tKi1bC0nRs","c06884aa80d8f7d7e15c48645a39a67e3d0c1432e4",[{"params":"$@1","searchParams":"$@2"},"$undefined"]] Error: Filling a cache during prerender timed out, likely because request-specific arguments such as params, searchParams, cookies() or dynamic data were used inside "use cache".
at Timeout._onTimeout (/Users/owoce/code/repros/dynamicio-error-GH-72529/.next/server/app/[id]/page.js:1:12951)
Error occurred prerendering page "/[id]". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Filling a cache during prerender timed out, likely because request-specific arguments such as params, searchParams, cookies() or dynamic data were used inside "use cache".
at Timeout._onTimeout (/Users/owoce/code/repros/dynamicio-error-GH-72529/.next/server/app/[id]/page.js:1:12951)
at listOnTimeout (node:internal/timers:573:17)
at process.processTimers (node:internal/timers:514:7)
Export encountered an error on /[id]/page: /[id], exiting the build.
No update on this? Is it expected that use cache just isn't compatible with dynamic routes?
No update on this? Is it expected that use cache just isn't compatible with dynamic routes?
You have to use generatestaticparams so that next js will know what to prerender at build time. Dynamic routes are not known at build time so they cannot be prerendered