Suspense boundaries with useSearchParams cause hydration errors in production.
The issue involves Suspense boundaries throwing React error 419 when used with useSearchParams in production builds, despite working in development. The problem is reproducible and affects multiple versions, but the exact fix requires understanding both Next.js server components and React's hydration behavior.
λ 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.3
No response
https://codesandbox.io/p/sandbox/fervent-snowflake-9fzx7p?file=%2Fapp%2Flayout.tsx%3A9%2C19
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.
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.
Suspense boundaries should not throw hydrati
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!