Async `generateMetadata` cause infinite loading in dynamic route after update to 14.1

[chungweileong94]

Link to the code that reproduces this issue

https://github.com/chungweileong94/next-infinite-loading-bug

To Reproduce

1. Run the Next App with pnpm dev (or pnpm build && pnpm start)
2. Navigate to / page
3. Click on "Go to item 1", this will navigate to the /items/[id] page for the first time.
4. Once the page is loaded, click on the "Go to item 2", this will navigate to the same /items/[id] again, but with different id

Current vs. Expected behavior

It should navigate to the /items/[id] page, but instead It keep showing loading.tsx endlessly, and you will see infinite network requests.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:59:33 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T8112
Binaries:
  Node: 18.19.0
  npm: 10.2.3
  Yarn: 1.22.21
  pnpm: 8.14.1
Relevant Packages:
  next: 14.1.1-canary.6 // Latest available version is detected (14.1.1-canary.6).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

App Router, Metadata (metadata, generateMetadata, next/head), Routing (next/router, next/navigation, next/link)

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

next dev (local), next start (local)

Additional context

The bug only occurs after update to 14.1, even the latest canary version 14.1.1-canary.6.

There are couple of workarounds I can apply, but none of them are suitable:

• Enable ppr, this somehow fixed the issue, but I don't want to use it my production, it's experiment feature.
• Remove loading.tsx, maybe fallback to manual suspense (but I haven't tested if this will work tho).
• Remove all async calls in generateMetadata.

[chungweileong94]

Very sorry that if it feels like I'm keep spamming the issue, as I already created the same issue for the 3rd times, FYI #61017 & #61016.

Let me explain myself, I created the first issue #61016, the bot closed the issue and said that my repro is invalid, I thought that it's probably because I wasn't using the repro template, so I quickly remove the old repro and recreate a new repro with proper template. However, my second issue #61017 got closed for the same reason, which got me thinking maybe there's a bug in the bot, and I submitted a PR #61026 to fix the bot.

And now, one of my issues #61016 is reopening, but it's the first issue with the repro link that I already removed, plus the conversation is locked, and I can't change or mention anything in the issue.

It's a bit frustrating, but I hope you can understand that.

[mcabs3]

I am experiencing the same issue in a sample (and simple) project I'm working on.

I have an async call in my metadata, the same async call in my async page component (same file). It causes an endless loop and is showing the loading.tsx at the /app/loading.tsx.

[enfermero-dev]

Hello! After spending quite a few hours isolating the issue, I've identified a problem in my project. Specifically, there's a call to a 'server action' within the generateMetadata function, using await. The local layout of the section serving as the project's control panel, I use a loading template (loading.tsx). The issue manifests as an infinite loop, with numerous requests being sent from the asynchronous generateMetadata.

The problem ceases if I either remove loading.tsx or modify the values in generateMetadata to static ones. This behavior exclusively occurs when transitioning between pages using Link. Interestingly, if I refresh the page or revisit it before hitting 'refresh,' the page loads normally. It's worth mentioning that the infinite requests include a 'Cache-Control: no-store, must-revalidate' header.

I was going really crazy...

[chungweileong94]

Yeah, basically if you perform a client-navigate to that page, it the bug will occur consistently.

[enfermero-dev]

Here is my recreation of the bug, using a similar setup of what i have on my project and after creating a blank one, and this one using a server action, fetch from jsonplaceholder and a little delay to simulate data fetching time.

https://github.com/MarceloAndresMendoza/nextjs_issue_infinite_loading_bug

[dclark27]

It's a lot easier to see this bug if you enable fullUrl logging in next.config.js. Without, it just looks like your app is stalled.

const nextConfig = {
	logging: {
		fetches: {
			fullUrl: true,
		},
	},
};

But yeah, also going through this.

[RomkaLTU]

Thank god I'm not crazy; same here.

[remorses]

Tried [email protected] and it still has the issue

[eijil]

When I use fetch requests for the same data in both page and generateMetadata simultaneously, my loading does not work, and during navigation, the page may freeze.

[psikoi]

This is a pretty serious issue, I believe this has caused my "Function execution" usage on Vercel to go up considerably (200-300%). This is really troublesome as it'll definitely cause me to go over the limits of the Pro plan.

[denisb97]

Had the exact same issue in NextJs 14.1.0 - update for the canary (at the moment it is 14.1.1-canary.52) fixed the problem!

[derek-rein]

Confirming that 14.1.1-canary.52 as mentioned by @denisb97 fixes this.

[syntaxlexx]

Confirming that 14.1.1-canary.52 as mentioned by @denisb97 fixes this.

Confirmed also for v14.1.1-canary.72

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.