Caching not working locally (revalidate and unstable_cache) and cannot avoid stale cache data in prod.

[AshConnolly]

Link to the code that reproduces this issue

https://github.com/AshConnolly/cache-bug

To Reproduce

1. Start the application using dev
2. See that the revalidate caching & unstable_cache does not work locally at all (it will show "loading" on each reload)
3. When deployed to vercel - https://cache-bug-five.vercel.app/ see that it never shows "loading" at all, and stale data is shown after 5 seconds (stale-while-revalidate is never skipped)

Current vs. Expected behavior

There are three aspects to this issue: dev and prod being behaving differently, caching not working locally, and stale data being returned in prod

Caching in local dev:
Expected: cache works locally for next: revalidate and unstable cache
Current: It does not cache locally at all in dev mode, always showing "loading" in suspense

Caching in prod / skipping stale while revalidate:
Expected: I would expect in prod when using unstable_cache that when the cache has expired, it would not show stale data, but show "loading" and fetch fresh data
Current: it shows stale data

I want to:

• Fetch data from an endpoint in a server component
• Use suspense to show "loading" when fetching (streaming)
• then cache the fetched data (for 5 seconds in this issue example)
• if a user visits in under 5 seconds - show stale data
• after 5 seconds do not show stale data, show loading and refetch fresh data
• and this work in both dev and prod

This is my unstable_cache component:

import { unstable_cache } from 'next/cache'

const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
const currentReadableTime = () => {
  const now = new Date()
  return now.toLocaleTimeString()
}
const url = 'https://jsonplaceholder.typicode.com/posts/1'

const getPosts = unstable_cache(
  async () => {
    const res = await fetch(url)
    const data = await res.json()
    await delay(2000)
    return {
      time: currentReadableTime(),
      post: data,
    }
  },
  ['temperature-data'], // Cache key
  { revalidate: 5, tags: ['temperature'] } // Expire after 5 seconds
)

export const PostUnstable = async () => {
  const { post, time } = await getPosts()

  return (
    <div>
      <p>post:</p>
      <div>{time}</div>
      <div>{JSON.stringify(post)}</div>
    </div>
  )
}

Used like this:

<Suspense fallback={<div>Loading...</div>}>
     <PostRevalidate />
</Suspense>

Note: I have another component that uses next:revalidate, but this is currently behaving the same way as the unstable cache component.

Prod always shows stale data on new visit (I visited at 58 mins past):

Locally caching does not work, every reload shows suspense "loading":

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 23.11.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 9.7.0
Relevant Packages:
  next: 15.3.2 // Latest available version is detected (15.3.2).
  eslint-config-next: 15.3.1
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

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

Use Cache

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

next dev (local), Vercel (Deployed)

Additional context

No response