1# Suspense Boundaries
2 
3Client hooks that cause CSR bailout without Suspense boundaries.
4 
5## useSearchParams
6 
7Always requires Suspense boundary in static routes. Without it, the entire page becomes client-side rendered.
8 
9```tsx
10// Bad: Entire page becomes CSR
11'use client'
12 
13import { useSearchParams } from 'next/navigation'
14 
15export default function SearchBar() {
16  const searchParams = useSearchParams()
17  return <div>Query: {searchParams.get('q')}</div>
18}
19```
20 
21```tsx
22// Good: Wrap in Suspense
23import { Suspense } from 'react'
24import SearchBar from './search-bar'
25 
26export default function Page() {
27  return (
28    <Suspense fallback={<div>Loading...</div>}>
29      <SearchBar />
30    </Suspense>
31  )
32}
33```
34 
35## usePathname
36 
37Requires Suspense boundary when route has dynamic parameters.
38 
39```tsx
40// In dynamic route [slug]
41// Bad: No Suspense
42'use client'
43import { usePathname } from 'next/navigation'
44 
45export function Breadcrumb() {
46  const pathname = usePathname()
47  return <nav>{pathname}</nav>
48}
49```
50 
51```tsx
52// Good: Wrap in Suspense
53<Suspense fallback={<BreadcrumbSkeleton />}>
54  <Breadcrumb />
55</Suspense>
56```
57 
58If you use `generateStaticParams`, Suspense is optional.
59 
60## Quick Reference
61 
62| Hook | Suspense Required |
63|------|-------------------|
64| `useSearchParams()` | Yes |
65| `usePathname()` | Yes (dynamic routes) |
66| `useParams()` | No |
67| `useRouter()` | No |
68