nextjs - 💡(How to fix) Fix Navigation to routes is blocked/delayed until prefetch requests complete in Next.js 16 with CacheComponents [1 comments, 2 participants]

Link to the code that reproduces this issue

https://github.com/jperezr21/next-16-issue

Problem

On the home page, the navigation bar contains links to various pages, with the first link being /c/brands. When the home page loads, multiple prefetch requests are triggered for /c/brands?_rsc=, which can take more than 5 seconds to complete. If a user clicks the brands link before the prefetch request completes, navigation is blocked until the prefetch request finishes, resulting in a poor user experience.

Reproduction Steps

1. Build the application: pnpm build
2. Start production server: pnpm start
3. Navigate to home page (/)
4. Open browser DevTools Network tab
5. Filter for requests containing _rsc=
6. Observe multiple prefetch requests for /c/brands?_rsc=
7. Click the brands link before prefetch completes
8. Notice navigation is delayed until prefetch finishes

Current vs. Expected behavior

Expected Behavior

• Links should be prefetched once when they enter the viewport or on hover
• Navigation should be immediate when a user clicks a link, regardless of prefetch status
• Prefetch requests should not block user navigation

Actual Behavior

• Multiple prefetch requests are triggered for the same route (e.g., /c/brands?_rsc=)
• Prefetch requests can take 5+ seconds to complete
• Clicking a link before prefetch completes blocks navigation until prefetch finishes
• This creates a noticeable delay and poor UX

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 16043
  Available CPU cores: 8
Binaries:
  Node: 22.16.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 16.0.3 // Latest available version is detected (16.0.3).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.8.3
Next.js Config:
  output: standalone

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

Linking and Navigating, Partial Prerendering (PPR), Loading UI and Streaming

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

next build (local)

Additional context

• This issue was identified after upgrading from Next.js 15 to 16
• The issue affects both local production builds (next start) and Vercel deployments
• The problem is more noticeable on slower network connections
• The brands page (/c/brands) is particularly affected due to its complexity and data requirements