React cache from app router docs does not work

[steebchen]

Link to the code that reproduces this issue

https://github.com/steebchen/chaininfo

To Reproduce

1. pnpm install
2. pnpm build && pnpm start
3. put MORALIS_API_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJub25jZSI6IjhkYTVhNjk4LTZlZDEtNGQzOC1hMTdkLTJiMzU2NDJlZmY5ZSIsIm9yZ0lkIjoiMTA2NTExIiwidXNlcklkIjoiMTA2MTU3IiwidHlwZUlkIjoiZTIwY2I5ZGItNjUyMC00YThhLWI5NTAtZDJhYjllNzJjYjJkIiwidHlwZSI6IlBST0pFQ1QiLCJpYXQiOjE2ODQ5NDQ5NzMsImV4cCI6NDg0MDcwNDk3M30.wNw62dF_sZK6lvjAb7siGhKSeIB21zClq1PdvuX3NVo (temp access key) in .env.production.local
4. IMPORTANT: replace x with getAddressDataCache https://github.com/steebchen/chaininfo/blob/main/app/address/%5Bslug%5D/page.tsx#L20
5. pnpm start
6. go to http://localhost:3000/address/0x1f9090aaE28b8a3dCeaDf281B0F12828e676c326
7. reload the same page & see the logs

Current vs. Expected behavior

Nothing gets cached. From the logs if you refresh multiple times

render address page
getAddressData 0x1f9090aaE28b8a3dCeaDf281B0F12828e676c326
render address page
getAddressData 0x1f9090aaE28b8a3dCeaDf281B0F12828e676c326
render address page
getAddressData 0x1f9090aaE28b8a3dCeaDf281B0F12828e676c326

The getAddressData is not supposed to be logged multiple times, as I set the revalidate. It works fine with unstable_cache from next, but it does not with cache from react.

Relevant code:

https://github.com/steebchen/chaininfo/blob/f6df81e62acbb2c3e7072df73154bebfde1f39df/data/address-cache.ts#L4-L9

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
Binaries:
  Node: 18.16.0
  npm: 9.5.1
  Yarn: 1.22.19
  pnpm: 8.6.3
Relevant Packages:
  next: 13.5.3-canary.3
  eslint-config-next: 13.5.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

App Router

Additional context

I followed the docs for this: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#example

[GavOutdoors]

I'm seeing the same issue. While investigating why I'm getting timeouts on basic pages, I put logs in to time the performance of queries. Functions that are meant to be cached, written as per the docs, are not being cached at all. https://github.com/vercel/next.js/discussions/63124