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
    <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 14 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:

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

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

Useful Links

• useSearchParams