admin
68 lines
1.4 KiB
Markdown
68 lines
1.4 KiB
Markdown
# 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 |
|