vercel / vercel/next.js

Link prefetch calls generateMetadata when streaming

Open
#80,583 2 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dynamic Routes Linking and Navigating Loading UI and Streaming Metadata Runtime
Dominant language
JavaScript
Stars
142k
Forks
32.5k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/awesome-meninsky-hv2k2r?workspaceId=ws_Wn1etLdni3NB1TGjgQrK6W

To Reproduce

Here are the key steps of what the reproduction link does:

  1. Create a dynamic page with a loading.tsx and generateMetadata
  2. Add links to this dynamic page
  3. Run production server
Current vs. Expected behavior

The current behavior shows that generateMetadata is called for every link in the viewport. This causes a lot of data to be fetched.

Expected behavior:
Only loading.tsx should be prefetched.

Provide environment information
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 65304
  Available CPU cores: 32
Binaries:
  Node: 22.14.0
  npm: 10.9.0
  Yarn: 1.22.22
  pnpm: 10.10.0
Relevant Packages:
  next: 15.3.3 // Latest available version is detected (15.3.3).
  eslint-config-next: 15.3.3
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.6.2
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Runtime, Metadata, Loading UI and Streaming, Dynamic Routes, Linking and Navigating

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

next start (local), Other (Deployed)

Additional context

A workaround for now is to set prefetch to false for dynamic routes and then set it to true on onMouseEnter. This will still fetch the metadata, but not for every link on the entire viewport.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Run the linked CodeSandbox reproduction with a production server, using the dynamic page, loading.tsx, generateMetadata, and viewport links described in the issue. Trace the prefetch path and metadata handling, then verify that viewport link prefetching fetches only loading.tsx and does not call generateMetadata for every link.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react
Domain
frontend, performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.