Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
λ npx next info
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:51:50 PDT 2023; root:xnu-8796.121.2~5/RELEASE_X86_64
Binaries:
Node: 19.6.0
npm: 9.4.0
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.4.7-canary.1
eslint-config-next: 13.4.6
react: 18.2.0
react-dom: 18.2.0
typescript: 5.1.3Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue or a replay of the bug
https://codesandbox.io/p/sandbox/fervent-snowflake-9fzx7p?file=%2Fapp%2Flayout.tsx%3A9%2C19
To Reproduce
Implement the NavigationEvents component exactly as it's described in the docs into a new Next app. It causes errors unless I unwrap the Suspense boundary.
Describe the Bug
I'm using the NavigationEvents component straight out of the docs.
When I wrap the component in a Suspense boundary, as is recommended, it throws a hydration error. In prod builds, it seems to work fine, but it throws React error #419 silently in the console. If I take away the Suspense boundary, then everything seems to work fine and I get no errors. However, the docs seem to imply that the parenting server component is going to rerender on search param updates if I useSearchParams in a static render without the boundary. I would want the NavigationEvents to be in the layout, and this would mean that all search param changes trigger full rerenders.
Expected Behavior
Suspense boundaries should not throw hydrations errors in dev or silent React errors in prod.
Which browser are you using? (if relevant)
Chrome 114.0.5735.133 (Official Build) (x86_64)
How are you deploying your application? (if relevant)
Local & Vercel