On-demand revalidated prerendered pages show old data after React hydration

Verify canary release

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

Provide environment information

Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000 Binaries: Node: 14.18.1 npm: 6.14.15 Yarn: N/A pnpm: N/A Relevant packages: next: 12.2.3-canary.8 eslint-config-next: 12.2.2 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

Edge/Chrome

How are you deploying your application? (if relevant)

npx vercel --prod

Describe the Bug

Any pages that are specified in getStaticPaths() will revert to the old data once the page is hydrated if on-demand revalidation has been executed on the path.

Minimal reproduction: https://github.com/jmotes/nextjs-ondemand-caching-bug

Deployed here: https://nextjs-ondemand-caching-bug.kairosdxp.com/

The generated HTML has the correct data, but the fetch for the the index.json?site=nextjs-ondemand-caching-bug.kairosdxp.com file returns the old cached response:

curl 'https://nextjs-ondemand-caching-bug.kairosdxp.com/_next/data/qeYGj4VSRQRyCHVLMprrF/index.json?site=nextjs-ondemand-caching-bug.kairosdxp.com' \
  -H 'authority: nextjs-ondemand-caching-bug.kairosdxp.com' \
  -H 'accept: */*' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'referer: https://nextjs-ondemand-caching-bug.kairosdxp.com/' \
  -H 'sec-ch-ua: " Not;A Brand";v="99", "Microsoft Edge";v="103", "Chromium";v="103"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: same-origin' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.51' \
  -H 'x-nextjs-data: 1' \
  --compressed

I’ve noticed that removing the x-nextjs-data: 1 header causes the request to return the new data, if that helps trace the bug.

Note that the bug is only reproducible on the homepage of the minimal reproduction since that’s the only pre-rendered/static path. See line 38:

https://github.com/jmotes/nextjs-ondemand-caching-bug/blob/main/pages/_sites/[site]/index.tsx#L38

Expected Behavior

Page should always show new data after an on-demand revalidation.

Link to reproduction

https://github.com/jmotes/nextjs-ondemand-caching-bug

To Reproduce

1. Go to https://nextjs-ondemand-caching-bug.kairosdxp.com/.
2. Note the Revalidated Time.
3. Click Revalidate Page.
4. Refresh the page.
5. Observe the new Revalidated Time briefly shows before reverting back to the previous date.
6. Now click on Documentation, then click “Next.js” to return to the homepage.
7. Observe the revalidated time is now correct (client side navigation works correctly, pulling the new data).

[jmotes]

It’s working! Thanks so much @ijjk!

[ijjk]

Hi, a related fix for this has now been landed, please re-deploy your project and give it a try!