690326:2212 Fixing Refactor ADR-019 Naming convention uuid #08

specs/99-archives/skills-backup/next-best-practices-original/suspense-boundaries.md

@@ -0,0 +1,67 @@
+# 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                   |