Link to the code that reproduces this issue

https://github.com/kachkaev/next-link-scroll-with-suspense-mwe

To Reproduce

1. Open http://localhost:3000/
2. Click on /products#category-42
3. Observe <h2 id="category-42"> within the viewport (as expected)
4. Go back to /
5. Click on /products-with-suspense#category-42 (same page, but categories load inside Suspense boundary with a 100ms delay)
6. Observe the top of the page, unlike previously (unexpected)

Interestingly, navigating to /products-with-suspense#category-42 for the second time works correctly (i.e. it scrolls like /products#category-42). This is because of caching. When browser-side cache for /products-with-suspense expires, scrolling to anchor is skipped again.

Current vs. Expected behavior

I’d expect /products#category-42 and /products-with-suspense#category-42 to work the same way. If <h2 id="category-42"> shows while Suspense ‘islands’ get ‘resolved’, a user should be scrolled to the hash.

Perhaps, scrolling should be smooth in this case (otherwise, there will be a ‘flash’ of the top of the page and the transition to the anchor will be confusing). Alternatively, <Link> / router.push would not replace the old page until the #category-42 has appeared in the DOM or until all Suspense boundaries have been resolved. Either way, not observing any scrolling seems like a bug.

This bug can emerge as a regression after refactoring. Imagine we have a product catalog that has been working for years and we’ve added <Suspense> around the list of products to show page skeleton ASAP. Users will no longer be able to navigate to a specific category and this may remain unnoticed by devs without e2e tests.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.11.1
  npm: 10.5.0
  Yarn: 4.0.0
  pnpm: 8.10.5
Relevant Packages:
  next: 14.3.0-canary.70 // Latest available version is detected (14.3.0-canary.70).
  eslint-config-next: N/A
  react: 19.0.0-beta-04b058868c-20240508
  react-dom: 19.0.0-beta-04b058868c-20240508
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Navigation, Partial Prerendering (PPR)

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

next dev (local), next start (local)

Additional context

No response