Description
Link to the code that reproduces this issue
https://github.com/Temzasse/nextjs-draft-mode-bug
To Reproduce
This bug is not reproducible locally as it is related to CDN caching on Vercel.
- Go to the deployed site: https://nextjs-draft-mode-bug.vercel.app/
- Open "Network" tab in browser devtools and see that the HTML doc has
X-Vercel-Cache: HITheader.
- If not refresh the page to populate the CDN cache.
- Click "Enter draft mode" button.
- You should be redirected back to the same page with
__prerender_bypasscookie set. - You will see "Draft Mode is OFF" even though it should now be turned on.
Current vs. Expected behavior
Currently draft mode is not being turned on if a page is being cached with Vercel-CDN-Cache-Control or CDN-Cache-Control header. This is likely because the CDN cache is not correctly bypassed when the __prerender_bypass cookie is set in getServerSideProps.
Expected behaviour would be to get a fresh non-cached page that has the draft mode on.
Verify canary release
- 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 23.1.0: Mon Oct 9 21:28:31 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T8112
Binaries:
Node: 18.17.0
npm: 9.6.7
Yarn: N/A
pnpm: N/A
Relevant Packages:
next: 14.0.4-canary.28
eslint-config-next: 14.0.3
react: 18.2.0
react-dom: 18.2.0
typescript: 5.3.2
Next.js Config:
output: N/AWhich area(s) are affected? (Select all that apply)
Not sure
Additional context
In the project where this issue was detected we were able to use the __prerender_bypass cookie as a CDN cache key on AWS CloudFront which allowed us to bypass the cache when (former) Preview Mode was turned on. But after moving to Vercel and updating the Next.js version to 14.0.1 we noticed that preview mode was not turned on correctly anymore as the page got returned from CDN cache. We tried to migrate to Draft Mode but that seems to have the exact same problem.
I would assume that Vercel CDN uses the __prerender_bypass cookie as a CDN cache key automatically. The docs mention this:
Good to know: You shouldn't set the Cache-Control header when using Draft Mode because it cannot be bypassed. Instead, we recommend using ISR.
But that doesn't really explain much as one would expect to be able to use CDN caching with pages router while using draft mode.