-
Notifications
You must be signed in to change notification settings - Fork 29k
Description
Link to the code that reproduces this issue
https://github.com/sinasab/next-revalidate-bug-repro
To Reproduce
- locally build & start the app (bug doesn't occur in dev)
- observe that the page doesn't revalidate when refreshing (if it was revalidating the rendered date would be updating on refreshes)
(steps to go from fresh create-next-app to repro are below)
Current vs. Expected behavior
Expected behavior is for the page to revalidate every 1 sec, and for refreshes of the page to periodically pull the fresh version of the page.
I have the current timestamp rendering on page load, which should update on each revalidation, but you can see that it remains the same.
You can also go into the response headers and see the cache control maxage set to a large number, rather than the 1 second that I'm attempting.
Removing the top-level await seems to fix the issue.
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:12 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T8103
Binaries:
Node: 20.9.0
npm: 10.1.0
Yarn: N/A
pnpm: 8.10.2
Relevant Packages:
next: 14.0.3-canary.2
eslint-config-next: 14.0.1
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
This seems to work properly when deployed on vercel, but fails locally and on other "serverful" deployment environments (tested on railway.app).
This can be trivially repro'd locally via the create-next-app CLI tool:
npx create-next-app@canary
- replace the contents of
app/page.tsx
with below - update
tsconfig.json
's target toes2017
Now running npm run build && npm start
should give you the repro as described above.
// app/page.tsx
export const revalidate = 1;
const response = await fetch("https://www.randomnumberapi.com/api/v1.0/random");
const randVal = await response.json();
export default async function Page() {
return (
<>
<div>{new Date().toString()}</div>
<div>{randVal}</div>
</>
);
}