feat: biblioteca inteligente libs/ + 5 novas skills (20 skills total)
NOVAS SKILLS: - next-best-practices v0.1.0 (CLEAN) — Next.js App Router, RSC, caching, data - nextjs-patterns v1.0.0 (CLEAN) — Next.js 15: Server Actions, route handlers - vite v1.0.0 (CLEAN) — env vars, aliases, proxy, CJS compat - uncle-bob v1.0.0 (CLEAN) — Clean Code, SOLID, Clean Architecture - clean-code-review v1.0.0 (CLEAN) — naming, guard clauses, anti-patterns, refactoring - vue v1.0.0 (CLEAN) — Vue framework - vue-composition-api-best-practices v1.0.0 (CLEAN) — composables, Pinia, reactivity BIBLIOTECA INTELIGENTE libs/ (10 dominios, 11 arquivos): - typescript/ — TS safe + generics gotchas - react/ — Next.js App Router + Vite config - vue/ — Composition API + Pinia - linux/ — System diagnostic cheatsheet - database/ — PostgreSQL + MySQL patterns - browser/ — Chromium CLI + E2E testing - security/ — SAST audit (OWASP Top 10) - best-practices/ — Clean Code + SOLID + Clean Architecture - deploy/ — Docker multi-stack + OpenClaw ops - + INDEX.md como guia de navegacao .learnings/ — LRN-20260519-003 criado (biblioteca compartilhada)
This commit is contained in:
@@ -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 |
|
||||
Reference in New Issue
Block a user