next.js icon indicating copy to clipboard operation
next.js copied to clipboard

use cache doesn't work properly with dynamic routes

Open cantemizyurek opened this issue 1 year ago • 4 comments

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

cantemizyurek avatar Nov 09 '24 01:11 cantemizyurek

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>
}

Trewqa avatar Dec 18 '24 16:12 Trewqa

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.

lubieowoce avatar Jan 17 '25 12:01 lubieowoce

No update on this? Is it expected that use cache just isn't compatible with dynamic routes?

benkingcode avatar May 05 '25 12:05 benkingcode

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

Chibuike-web avatar Dec 09 '25 07:12 Chibuike-web