# Suspense Boundaries

Client hooks that cause CSR bailout without Suspense boundaries.

## useSearchParams

Always requires Suspense boundary in static routes. Without it, the entire page becomes client-side rendered.

```tsx
// Bad: Entire page becomes CSR
"use client";

import { useSearchParams } from "next/navigation";

export default function SearchBar() {
  const searchParams = useSearchParams();
  return <div>Query: {searchParams.get("q")}</div>;
}
```

```tsx
// Good: Wrap in Suspense
import { Suspense } from "react";
import SearchBar from "./search-bar";

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <SearchBar />
    </Suspense>
  );
}
```

## usePathname

Requires Suspense boundary when route has dynamic parameters.

```tsx
// In dynamic route [slug]
// Bad: No Suspense
"use client";
import { usePathname } from "next/navigation";

export function Breadcrumb() {
  const pathname = usePathname();
  return <nav>{pathname}</nav>;
}
```

```tsx
// Good: Wrap in Suspense
<Suspense fallback={<BreadcrumbSkeleton />}>
  <Breadcrumb />
</Suspense>
```

If you use `generateStaticParams`, Suspense is optional.

## Quick Reference

| Hook                | Suspense Required    |
| ------------------- | -------------------- |
| `useSearchParams()` | Yes                  |
| `usePathname()`     | Yes (dynamic routes) |
| `useParams()`       | No                   |
| `useRouter()`       | No                   |