Link does not scroll to anchor if it is within Suspense boundary #65960
Labels
bug
Issue was opened via the bug report template.
Navigation
Related to Next.js linking (e.g., <Link>) and navigation.
Partial Prerendering (PPR)
Related to Partial Prerendering.
Link to the code that reproduces this issue
https://github.com/kachkaev/next-link-scroll-with-suspense-mwe
To Reproduce
mwe-screencast.mp4
/products#category-42
<h2 id="category-42">
within the viewport (as expected)/
/products-with-suspense#category-42
(same page, but categories load inside Suspense boundary with a 100ms delay)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
The text was updated successfully, but these errors were encountered: