Skip to content
DocsErrorsMissing Suspense boundary with useSearchParams

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.

'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
      <Search />

This will ensure the page does not de-opt to client-side rendering.


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:

module.exports = {
  experimental: {
    missingSuspenseWithCSRBailout: false,

This configuration option will be removed in a future major version.