99906416fc
### What Remove `missingSuspenseWithCSRBailout` and always treate the conditions where it was used as `true`. ### Why This was an intended behavior introduced in 14.1, which requires users to always add suspense boundaries if it's using any hook that could bail out to client rendering. `missingSuspenseWithCSRBailout` as `true` was the default behavior and you could disable it with `missingSuspenseWithCSRBailout: false` in next config. Now after the removal you will not be able to opt-out it.
77 lines
1.9 KiB
Text
77 lines
1.9 KiB
Text
---
|
|
title: Missing Suspense boundary with useSearchParams
|
|
---
|
|
|
|
#### Why This Error Occurred
|
|
|
|
Reading search parameters through `useSearchParams()` without a Suspense boundary will opt the entire page into client-side rendering. This could cause your page to be blank until the client-side JavaScript has loaded.
|
|
|
|
#### Possible Ways to Fix It
|
|
|
|
Ensure that calls to `useSearchParams()` are wrapped in a Suspense boundary.
|
|
|
|
```tsx filename="app/search.tsx" switcher
|
|
'use client'
|
|
|
|
import { useSearchParams } from 'next/navigation'
|
|
import { Suspense } from 'react'
|
|
|
|
function Search() {
|
|
const searchParams = useSearchParams()
|
|
|
|
return <input placeholder="Search..." />
|
|
}
|
|
|
|
export function Searchbar() {
|
|
return (
|
|
// You could have a loading skeleton as the `fallback` too
|
|
<Suspense>
|
|
<Search />
|
|
</Suspense>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/search.js" switcher
|
|
'use client'
|
|
|
|
import { useSearchParams } from 'next/navigation'
|
|
import { Suspense } from 'react'
|
|
|
|
function Search() {
|
|
const searchParams = useSearchParams()
|
|
|
|
return <input placeholder="Search..." />
|
|
}
|
|
|
|
export function Searchbar() {
|
|
return (
|
|
// You could have a loading skeleton as the `fallback` too
|
|
<Suspense>
|
|
<Search />
|
|
</Suspense>
|
|
)
|
|
}
|
|
```
|
|
|
|
This will ensure the page does not de-opt to client-side rendering.
|
|
|
|
#### Disabling
|
|
|
|
> Note: This is only available with Next.js version 14.x. If you're in versions above 15 please fix it with the approach above.
|
|
|
|
We don't recommend disabling this rule. However, if you need to, you can disable it by setting the `missingSuspenseWithCSRBailout` option to `false` in your `next.config.js`:
|
|
|
|
```js filename="next.config.js"
|
|
module.exports = {
|
|
experimental: {
|
|
missingSuspenseWithCSRBailout: false,
|
|
},
|
|
}
|
|
```
|
|
|
|
This configuration option will be removed in a future major version.
|
|
|
|
### Useful Links
|
|
|
|
- [`useSearchParams`](https://nextjs.org/docs/app/api-reference/functions/use-search-params)
|