Link navigation with Suspense is not instant

net commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
Binaries:
  Node: 19.8.1
  npm: 9.5.1
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.3.5-canary.4
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://github.com/net/next-13-suspense-issue

To Reproduce

Note that I disabled SSR in the reproduction in _app.js with

const NoSSRFragment = ({ children }) => <>{children}</>
const NoSSR = dynamic(() => Promise.resolve(NoSSRFragment), { ssr: false })

as SSR and Suspense don't play great together.

The reproduction uses pages/ and does not use the new app router.

Load page. Suspense fallback component <div>Loading...</div> will show while data for the page is being fetched.
Navigate to another page. URL will change, but nothing within or outside the Suspense boundary will change until data has been fetched.

Screen Recording 2023-05-02 at 23 20 57

Describe the Bug

Suspense during client-side navigation causes the page update to wait until after data has been fetched.

Expected Behavior

The content outside the Suspense boundary (<Nav /> in the reproduction) should update immediately, and the Suspense boundary should immediately display its fallback until data has been fetched. This happens on initial page load, but not during client-side navigation with <Link />

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

net commented 1 year ago

mc-petry commented 5 months ago

Next.js 14.2.3 Still the same issue

Related issues:

vercel / next.js