Skip to content

Revalidate broken with top-level await #58321

@sinasab

Description

@sinasab

Link to the code that reproduces this issue

https://github.com/sinasab/next-revalidate-bug-repro

To Reproduce

  1. locally build & start the app (bug doesn't occur in dev)
  2. 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.
image

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:

  1. npx create-next-app@canary
  2. replace the contents of app/page.tsx with below
  3. update tsconfig.json's target to es2017

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>
		</>
	);
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue was opened via the bug report template.lockedstaleThe issue has not seen recent activity.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions