vercel / next.js

The React Framework

Home Page:https://nextjs.org

Repository from Github https://github.comvercel/next.jsRepository from Github https://github.comvercel/next.js

Delayed Suspense transition/update when using fetch on server

hamidrezahanafi opened this issue · comments

Link to the code that reproduces this issue

https://github.com/hamidrezahanafi/next-fetch-suspense

To Reproduce

  • Start the app on dev mode
  • Click on Page 1 with fetch this is initiate a request with a fetch awaited on server
  • Check the logs on browser console
    the last
ClientComponent rendering (timestamp)
SuspenseComponent unmounting (timestamp)
ClientComponent mounting (timestamp)
  • You will notice there is around 200~300 ms delay between the suspense children being rendered and to the time that suspense fallback being unmounted and start painting to the screen
  • Repeat the same thing with Page 2 with timeout which doesn't do a fetch and just await a timeout on the server
  • You will notice that suspense fallback unmounts immediately and contents being painted on the screen

Current vs. Expected behavior

Current:
There is around 200~300 ms delay between the suspense children being rendered and to the time that suspense fallback being unmounted and start painting to the screen. The 300ms frame of nothing happening is visible from the screenshot from chrome performance tab

Image

Expected
When receiving a RSC payload from the server, suspend should resolve and client should immediately paint the content

I attached two chrome performance traces showing the delay clearly after the RSC payload is received. The trace with promise wait doesn't have this issue and paint immediately.

Trace-Promise-Wait.json
Trace-With-Fetch.json

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:22 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6041
  Available memory (MB): 49152
  Available CPU cores: 14
Binaries:
  Node: 22.13.1
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 15.3.0-canary.30 // No Next.js version data was found.
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.2
Next.js Config:
  output: N/A

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

Performance

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

next dev (local)

Additional context

No response

Update: having a very short timeout like 50ms have the same result as fetch so it seems that suspense wait for at least 300ms to update

Looks like it is related to this upstream issue? facebook/react#31819