search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.23k stars 27.02k forks source link

Fast Refresh waits for the Suspense Boundary to finish. #43093

Open jakubsobel opened 2 years ago

jakubsobel commented 2 years ago

Verify canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Wed Mar 2 00:30:59 UTC 2022
Binaries:
  Node: 16.14.2
  npm: 8.5.0
  Yarn: 1.9.4
  pnpm: N/A
Relevant packages:
  next: 13.0.4-canary.5
  eslint-config-next: 13.0.4
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 107.0.5304.107

How are you deploying your application? (if relevant)

No response

Describe the Bug

If there is any <Suspense> boundary with an async component inside, then any changes to the page outside of <Suspense> will be updated after the time it takes to render the async component.

Expected Behavior

The changes outside of the <Suspense> boundary should be immediately shown.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/jakubsobel/nextjs13-fast-refresh-issue

To Reproduce

  1. Run npm run dev,
  2. Go to http://localhost:3000/
  3. Wait 10 seconds for the Test component to load and then edit any text outside of the <Suspense> (e.g. content of the <p> just above the <Suspense>).
  4. Save the file.
  5. "Fast Refresh" will update the page after another 10 seconds, because of the Suspense below, instead of doing it immediately.
Jordaneisenburger commented 1 year ago

Also experiencing this issue