'use cache' and cacheLife are not using stale data while revalidating in server-rendered (dynamic) routes

[diego-aquino]

Link to the code that reproduces this issue

https://github.com/diego-aquino/next-js-dynamic-io-stale-while-revalidate-bug

To Reproduce

1. Build the application with pnpm build
2. Start the application with pnpm start
3. Click the link "Static page" to go to the page /static
4. Refresh the page a few times until you see server logs like:

   2025-01-14T20:52:30.701Z [static] Fetching data...
   2025-01-14T20:52:32.703Z [static] Data fetched.
   

5. Click the link "Return"
6. Click the link "Dynamic page" to go to the page /dynamic
7. Again, refresh the page a few times until you see server logs like:

   2025-01-14T20:53:27.647Z [dynamic] Fetching data...
   2025-01-14T20:53:29.647Z [dynamic] Data fetched.
   

Current vs. Expected behavior

Following the steps, I expected the caching behavior to be the same in static or dynamic routes, specifically showing stale data while revalidating in background.

The two pages, /static and /dynamic, use the same server component PageContent, which takes 2 seconds to render, simulating a slow fetching operation. It is cached with:

https://github.com/diego-aquino/next-js-dynamic-io-stale-while-revalidate-bug/blob/3b411bc79339f05041a7336e620470c7b3ee9046/app/PageContent.tsx#L9-L10

After building the application in step 1, /static was prerendered as static content and /dynamic is server-rendered.

Route (app)                              Size     First Load JS
┌ ƒ /dynamic                             179 B           112 kB
└ ○ /static                              179 B           112 kB

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

In step 4, the loading component is not shown even if I constantly refresh the page /static. I consider this as expected because the cached output is stale and being revalidated in background, as indicated by the server logs "[...] Fetching data..." and "[...] Data fetched".

However, the behavior is different when the same component is mounted in a dynamic route. The page /dynamic calls await headers(); to make it server-rendered. Differently from the static page, refreshing the dynamic page in step 7 shows the loading component after the cached output becomes stale, blocking the page until the component is rendered on the server. I expected the page to show the stale data while revalidating, as with the static page.

recording-2025-01-14_18.32.38.mp4

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #52~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Mon Dec  9 15:00:52 UTC 2
  Available memory (MB): 15910
  Available CPU cores: 12
Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 9.12.3
Relevant Packages:
  next: 15.2.0-canary.9 // Latest available version is detected (15.2.0-canary.9).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
Next.js Config:
  output: N/A

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

dynamicIO, Runtime

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

next start (local)

Additional context

No response