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
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