...
\n}\n```\n\n**Push \"use client\" as far down the tree as possible.** The boundary should be at the leaf, not the root.\n\n---\n\n## Phase 2: Data Fetching & Caching\n\n### Data Fetching Hierarchy (Prefer Top โ Bottom)\n\n1. **Server Component direct fetch** โ simplest, most performant\n2. **Server Actions** โ for mutations and form submissions\n3. **Route Handlers** โ for webhooks, external API endpoints\n4. **Client-side fetch (SWR/React Query)** โ for real-time/polling data only\n\n### Fetch Configuration\n\n```tsx\n// Static data (cached indefinitely, revalidated on deploy)\nconst data = await fetch('https://api.example.com/data', {\n cache: 'force-cache' // Default in App Router\n})\n\n// Revalidate every hour\nconst data = await fetch('https://api.example.com/data', {\n next: { revalidate: 3600 }\n})\n\n// Always fresh (no cache)\nconst data = await fetch('https://api.example.com/data', {\n cache: 'no-store'\n})\n\n// Tag-based revalidation\nconst data = await fetch('https://api.example.com/products', {\n next: { tags: ['products'] }\n})\n// Then in a Server Action:\nimport { revalidateTag } from 'next/cache'\nrevalidateTag('products')\n```\n\n### Caching Strategy by Data Type\n\n| Data Type | Cache Strategy | Revalidate | Tags |\n|-----------|---------------|------------|------|\n| CMS content | ISR | 3600s (1h) | `['cms', 'posts']` |\n| Product catalog | ISR | 300s (5m) | `['products']` |\n| User profile | No cache | โ | โ |\n| Pricing/inventory | No cache | โ | โ |\n| Static assets | Force cache | On deploy | โ |\n| Analytics/dashboards | ISR | 60s | `['analytics']` |\n| Auth tokens | No cache | โ | โ |\n\n### Database Queries (No fetch API)\n\n```tsx\nimport { unstable_cache } from 'next/cache'\nimport { db } from '@/lib/db'\n\n// Cache database queries with tags\nconst getProducts = unstable_cache(\n async (categoryId: string) => {\n return db.query.products.findMany({\n where: eq(products.categoryId, categoryId)\n })\n },\n ['products'], // Cache key parts\n {\n revalidate: 300,\n tags: ['products']\n }\n)\n```\n\n### Parallel Data Fetching\n\n```tsx\n// โ
CORRECT: Parallel fetches\nexport default async function DashboardPage() {\n const [user, stats, notifications] = await Promise.all([\n getUser(),\n getStats(),\n getNotifications()\n ])\n return \n
Dashboard
\n {/* Fast: renders immediately */}\n
\n \n {/* Slow: streams in when ready */}\n
}>\n
{/* Async Server Component */}\n \n \n
}>\n
\n \n