import { cacheLife, cacheTag } from 'next/cache'

// Cached component with duration
async function CachedProducts() {
  'use cache'
  cacheLife('hours')
  cacheTag('products')
  return await db.product.findMany()
}

// Invalidate cache
import { revalidateTag } from 'next/cache'
revalidateTag('products')

// Static (cached indefinitely)
await fetch(url, { cache: 'force-cache' })

// Revalidate every 60 seconds
await fetch(url, { next: { revalidate: 60 } })

// Always fresh
await fetch(url, { cache: 'no-store' })

// Tag-based revalidation
await fetch(url, { next: { tags: ['posts'] } })

'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  const post = await db.post.create({ data: { title } })
  revalidatePath('/posts')
  redirect("/posts/" + post.id)
}

// app/posts/[slug]/page.tsx
export default async function PostPage({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ page?: string }>
}) {
  const { slug } = await params
  const { page } = await searchParams
  return <Post slug={slug} page={page} />
}

# Find component patterns
grep -r "Server Component" references/

# Search for data fetching strategies
grep -A 10 "Caching Strategies" references/data-fetching.md

# Find Server Actions examples
grep -B 5 "Progressive Enhancement" references/server-actions.md

# Locate routing patterns
grep -n "Parallel Routes" references/routing-patterns.md

async function CachedDashboard() {
  'use cache'
  const token = cookies().get('token') // Error: cookies() cannot be used inside 'use cache'
  const data = await fetchUserData(token)
  return <Dashboard data={data} />
}

async function DashboardPage() {
  const token = (await cookies()).get('token')?.value ?? ''
  return <CachedDashboard token={token} />
}

async function CachedDashboard({ token }: { token: string }) {
  'use cache'
  // token is now part of the cache key — each user gets their own entry
  const data = await fetchUserData(token)
  return <Dashboard data={data} />
}

async function Cached({ promise }: { promise: Promise<unknown> }) {
  'use cache'
  const data = await promise // Causes build hang — promise is not serializable
  return <div>{data}</div>
}

async function Parent() {
  const value = await getDynamicValue()
  return <Cached value={value} />
}

async function Cached({ value }: { value: string }) {
  'use cache'
  return <div>{value}</div>
}

// app/products/page.tsx
'use client' // Entire page is now a client component

import { useState, useEffect } from 'react'

export default function ProductsPage() {
  const [products, setProducts] = useState([])

  useEffect(() => {
    fetch('/api/products').then(r => r.json()).then(setProducts)
  }, [])

  return (
    <div>
      <h1>Products</h1>
      <ProductFilters />
      <ProductList products={products} />
    </div>
  )
}

// app/products/page.tsx — Server Component (default, no directive)
import { db } from '@/lib/database'
import { ProductFilters } from '@/components/ProductFilters'

export default async function ProductsPage() {
  const products = await db.product.findMany()

  return (
    <div>
      <h1>Products</h1>
      <ProductFilters />             {/* Client Component — leaf */}
      <ProductList products={products} /> {/* Server Component */}
    </div>
  )
}

// components/ProductFilters.tsx — only the interactive leaf is 'use client'
'use client'

import { useState } from 'react'

export function ProductFilters() {
  const [filter, setFilter] = useState('')
  return (
    <input
      value={filter}
      onChange={(e) => setFilter(e.target.value)}
      placeholder="Filter..."
    />
  )
}

'use client'

import React from 'react'

// DEPRECATED: React.FC adds implicit children and is removed from React 19 best practices
export const Button: React.FC<ButtonProps> = ({ children, onClick }) => {
  return <button onClick={onClick}>{children}</button>
}

// Also problematic: no return type annotation
export const Card = ({ title, body }: CardProps) => {
  return (
    <div>
      <h2>{title}</h2>
      <p>{body}</p>
    </div>
  )
}

'use client'

// PREFERRED: Function declaration with explicit return type
export function Button({ children, onClick }: ButtonProps): React.ReactNode {
  return <button onClick={onClick}>{children}</button>
}

// ALSO VALID: Arrow function without React.FC, with explicit return type
export const Card = ({ title, body }: CardProps): React.ReactNode => {
  return (
    <div>
      <h2>{title}</h2>
      <p>{body}</p>
    </div>
  )
}

'use client'

// React 19: ref is a regular prop — no forwardRef needed
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  ref?: React.Ref<HTMLInputElement>
}

export function Input({ ref, ...props }: InputProps): React.ReactNode {
  return <input ref={ref} {...props} />
}

// Usage
const inputRef = useRef<HTMLInputElement>(null)
<Input ref={inputRef} placeholder="Enter text..." />

'use client'

function TimestampBadge() {
  // Server renders one value, client renders another → mismatch
  return <span>{Date.now()}</span>
}

'use client'

import { useState, useEffect } from 'react'

function TimestampBadge() {
  const [time, setTime] = useState<number | null>(null)

  useEffect(() => {
    setTime(Date.now())
  }, [])

  return <span>{time ?? 'Loading...'}</span>
}

'use client'

function ScreenWidth() {
  // window is undefined on the server → crash or mismatch
  const width = window.innerWidth
  return <p>Width: {width}px</p>
}

'use client'

import { useState, useEffect } from 'react'

function ScreenWidth() {
  const [width, setWidth] = useState(0)

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth)
    handleResize()
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return <p>Width: {width}px</p>
}

// app/dashboard/page.tsx — Server Component
export default async function Dashboard() {
  const data = await getData()
  return (
    <ClientCard
      item={data}
      onClick={() => console.log('clicked')} // Functions cannot be serialized
      formatter={new Intl.NumberFormat('en-US')} // Class instances cannot be serialized
      icon={Symbol('star')} // Symbols cannot be serialized
    />
  )
}

// app/dashboard/page.tsx — Server Component
import { handleClick } from '@/app/actions' // Server Action

export default async function Dashboard() {
  const data = await getData()
  return (
    <ClientCard
      item={{ id: data.id, name: data.name, price: data.price }} // Plain object
      tags={['featured', 'sale']}  // Array of primitives
      isActive={true}              // Boolean
      onAction={handleClick}       // Server Actions ARE serializable
    />
  )
}

// components/ClientCard.tsx
'use client'

export function ClientCard({ item, tags, isActive, onAction }: ClientCardProps) {
  const handleLocalClick = () => onAction(item.id) // Call server action

  return (
    <div onClick={handleLocalClick}>
      <h2>{item.name}</h2>
      <p>{isActive ? 'Active' : 'Inactive'}</p>
    </div>
  )
}

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
}

export default nextConfig

// app/products/page.tsx
'use cache'

export default async function ProductsPage() {
  const products = await db.product.findMany()
  return <ProductList products={products} />
}

async function CachedSidebar() {
  'use cache'
  const categories = await getCategories()
  return <Sidebar categories={categories} />
}

async function getProducts() {
  'use cache'
  const res = await fetch('/api/products')
  return res.json()
}

async function UserProducts({ userId }: { userId: string }) {
  const getProducts = async (category: string) => {
    'use cache'
    // Cache key includes:
    // - userId (closure)
    // - category (argument)
    return fetch(`/api/users/${userId}/products?cat=${category}`)
  }

  return getProducts('electronics')
}

import { cacheLife } from 'next/cache'

async function getData() {
  'use cache'
  cacheLife('hours') // Built-in profile
  return fetch('/api/data')
}

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
  cacheLife: {
    blog: {
      stale: 3600,      // 1 hour client-side cache
      revalidate: 900,  // 15 min server revalidation
      expire: 86400,    // 1 day max age
    },
    products: {
      stale: 300,       // 5 minutes
      revalidate: 60,   // 1 minute
      expire: 3600,     // 1 hour
    },
  },
}

export default nextConfig

// app/blog/page.tsx
import { cacheLife } from 'next/cache'

export default async function BlogPage() {
  'use cache'
  cacheLife('blog') // Use custom profile
  // ...
}

import { cacheLife } from 'next/cache'

async function getAnalytics() {
  'use cache'
  cacheLife({
    stale: 3600,      // 1 hour until considered stale
    revalidate: 7200, // 2 hours until revalidated
    expire: 86400,    // 1 day until expired
  })
  return fetch('/api/analytics')
}

// app/data.ts
import { cacheTag } from 'next/cache'

async function getProducts() {
  'use cache'
  cacheTag('products')
  return fetch('/api/products')
}

async function getProduct(id: string) {
  'use cache'
  cacheTag('products', `product-${id}`) // Multiple tags
  return fetch(`/api/products/${id}`)
}

// app/actions.ts
'use server'

import { revalidateTag } from 'next/cache'

export async function updateProduct(id: string, data: ProductData) {
  await db.product.update({ where: { id }, data })

  revalidateTag('products')        // Invalidate all products
  revalidateTag(`product-${id}`)   // Invalidate specific product
}

import { updateTag, revalidateTag } from 'next/cache'

// Immediate update - cache cleared, next request fetches fresh
updateTag('cart')

// Stale-while-revalidate - serves stale, revalidates in background
revalidateTag('posts')

// BEFORE (Next.js 15) - Route segment config
export const dynamic = 'force-static'
export const revalidate = 3600

export default async function Page() {
  const data = await fetch('/api/data')
  return <div>{data}</div>
}

// AFTER (Next.js 16) - use cache directive
import { cacheLife } from 'next/cache'

export default async function Page() {
  'use cache'
  cacheLife('hours')
  const data = await fetch('/api/data')
  return <div>{data}</div>
}

// BEFORE (Next.js 15) - fetch options
async function getProducts() {
  const res = await fetch('/api/products', {
    next: { revalidate: 3600, tags: ['products'] }
  })
  return res.json()
}

// AFTER (Next.js 16) - use cache + cacheLife + cacheTag
import { cacheLife, cacheTag } from 'next/cache'

async function getProducts() {
  'use cache'
  cacheLife('hours')
  cacheTag('products')
  const res = await fetch('/api/products')
  return res.json()
}

// BEFORE (Next.js 15) - experimental_ppr
export const experimental_ppr = true

export default function Page() {
  return (
    <div>
      <Header /> {/* Static */}
      <Suspense fallback={<Skeleton />}>
        <DynamicContent /> {/* Dynamic */}
      </Suspense>
    </div>
  )
}

// AFTER (Next.js 16) - PPR is default with cacheComponents
// No config needed - PPR is automatic
export default function Page() {
  return (
    <div>
      <Header /> {/* Automatically prerendered */}
      <Suspense fallback={<Skeleton />}>
        <DynamicContent /> {/* Streams at request time */}
      </Suspense>
    </div>
  )
}

// BEFORE (Next.js 15)
await fetch('/api/data', { next: { tags: ['my-tag'] } })

// Server Action
import { revalidateTag } from 'next/cache'
revalidateTag('my-tag')

// AFTER (Next.js 16) - cacheTag inside use cache
import { cacheTag } from 'next/cache'

async function getData() {
  'use cache'
  cacheTag('my-tag')
  return fetch('/api/data')
}

// Server Action (same API)
import { revalidateTag } from 'next/cache'
revalidateTag('my-tag')

// app/blog/page.tsx
import { Suspense } from 'react'
import { cookies } from 'next/headers'
import { cacheLife, cacheTag } from 'next/cache'

export default function BlogPage() {
  return (
    <>
      {/* Static - automatically prerendered */}
      <Header />
      <Navigation />

      {/* Cached - included in static shell */}
      <BlogPosts />

      {/* Dynamic - streams at request time */}
      <Suspense fallback={<PreferencesSkeleton />}>
        <UserPreferences />
      </Suspense>
    </>
  )
}

// Cached: Shared by all users, revalidates hourly
async function BlogPosts() {
  'use cache'
  cacheLife('hours')
  cacheTag('posts')

  const posts = await db.post.findMany({
    orderBy: { createdAt: 'desc' },
    take: 10,
  })

  return (
    <section>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </section>
  )
}

// Dynamic: Personalized per user
async function UserPreferences() {
  const theme = (await cookies()).get('theme')?.value || 'light'
  const bookmarks = (await cookies()).get('bookmarks')?.value

  return (
    <aside className={`theme-${theme}`}>
      <h3>Your Bookmarks</h3>
      {bookmarks ? <BookmarkList ids={bookmarks} /> : <p>No bookmarks yet</p>}
    </aside>
  )
}

async function CachedLayout({
  children,
  action
}: {
  children: React.ReactNode
  action: () => Promise<void>
}) {
  'use cache'

  // DO NOT call action() or read children
  // Just pass them through
  return (
    <div className="layout">
      <CachedHeader />
      {children}
      <form action={action}>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

// WRONG
async function CachedComponent() {
  'use cache'
  const token = cookies().get('token') // Error!
}

// CORRECT
async function Parent() {
  const token = (await cookies()).get('token')?.value
  return <CachedComponent token={token} />
}

async function CachedComponent({ token }: { token: string }) {
  'use cache'
  // token is now part of cache key
  return <div>...</div>
}

import { cache } from 'react'

const store = cache(() => ({ value: null as string | null }))

function Parent() {
  store().value = 'from parent'
  return <Child />
}

async function Child() {
  'use cache'
  // store().value is null - isolated scope
  return <div>{store().value}</div>
}

// Cache the data-fetching component, not the entire page
export default function Page() {
  return (
    <div>
      <StaticHeader />
      <CachedProductList /> {/* Cache here */}
      <Suspense fallback={<CartSkeleton />}>
        <DynamicCart /> {/* Runtime */}
      </Suspense>
    </div>
  )
}

async function CachedProductList() {
  'use cache'
  cacheLife('hours')
  const products = await getProducts()
  return <ProductGrid products={products} />
}

// Frequently changing data
cacheLife('seconds')  // API status, live scores

// Moderately changing data
cacheLife('minutes')  // Social feeds, news

// Slowly changing data
cacheLife('hours')    // Product catalogs, blog posts

// Rarely changing data
cacheLife('days')     // Documentation, legal pages

// Almost never changing
cacheLife('max')      // Static assets, archived content

async function getProduct(id: string) {
  'use cache'
  cacheTag('products', `product-${id}`, `category-${product.categoryId}`)
  // Enables invalidation at multiple granularities
}

// Invalidate all products
revalidateTag('products')

// Invalidate one product
revalidateTag('product-123')

// Invalidate by category
revalidateTag('category-electronics')

export default function Dashboard() {
  return (
    <>
      {/* Static shell */}
      <DashboardLayout>
        {/* Cached shared data */}
        <CachedMetrics />

        {/* User-specific, streams in */}
        <Suspense fallback={<NotificationsSkeleton />}>
          <UserNotifications />
        </Suspense>

        {/* Real-time, streams in */}
        <Suspense fallback={<ActivitySkeleton />}>
          <LiveActivity />
        </Suspense>
      </DashboardLayout>
    </>
  )
}

NEXT_PRIVATE_DEBUG_CACHE=1 npm run dev
# or
NEXT_PRIVATE_DEBUG_CACHE=1 npm run start

// WRONG - Causes build hang
async function Cached({ promise }: { promise: Promise<unknown> }) {
  'use cache'
  const data = await promise // Waits forever during build
}

// CORRECT - Resolve outside, pass value
async function Parent() {
  const value = await getDynamicValue()
  return <Cached value={value} />
}

async function Cached({ value }: { value: string }) {
  'use cache'
  return <div>{value}</div>
}

// WRONG - Nested use cache doesn't work as expected
async function Outer() {
  'use cache'
  return <Inner /> // Inner's cache is separate
}

async function Inner() {
  'use cache'
  // This has its own cache entry
}

// CORRECT - Cache at the appropriate level
async function Page() {
  return (
    <OuterCached>
      <InnerCached />
    </OuterCached>
  )
}

'use client'  // Must be at the top of the file, before any imports

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

'use client'

// RECOMMENDED: Function declaration
export function Button({ children, onClick }: ButtonProps): React.ReactNode {
  return <button onClick={onClick}>{children}</button>
}

// ALSO VALID: Arrow function without React.FC
export const Button = ({ children, onClick }: ButtonProps): React.ReactNode => {
  return <button onClick={onClick}>{children}</button>
}

// DEPRECATED: React.FC (don't use in React 19)
// export const Button: React.FC<ButtonProps> = ...

'use client'

// React 19: ref is a regular prop
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  ref?: React.Ref<HTMLInputElement>
}

export function Input({ ref, ...props }: InputProps): React.ReactNode {
  return <input ref={ref} {...props} />
}

// Usage
function Form() {
  const inputRef = useRef<HTMLInputElement>(null)
  return <Input ref={inputRef} placeholder="Enter text..." />
}

'use client'

import { useState, useCallback } from 'react'

export function TodoList({ initialTodos }: { initialTodos: Todo[] }) {
  const [todos, setTodos] = useState(initialTodos)
  const [filter, setFilter] = useState<'all' | 'active' | 'completed'>('all')

  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.completed
    if (filter === 'completed') return todo.completed
    return true
  })

  const toggleTodo = useCallback((id: string) => {
    setTodos(prev =>
      prev.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    )
  }, [])

  return (
    <div>
      <FilterButtons filter={filter} onFilterChange={setFilter} />
      <ul>
        {filteredTodos.map(todo => (
          <TodoItem key={todo.id} todo={todo} onToggle={toggleTodo} />
        ))}
      </ul>
    </div>
  )
}

'use client'

import { useActionState } from 'react'
import { submitContact } from './actions'

interface FormState {
  message: string
  success: boolean
}

export function ContactForm(): React.ReactNode {
  const [state, formAction, isPending] = useActionState(submitContact, {
    message: '',
    success: false
  })

  return (
    <form action={formAction}>
      <input name="email" type="email" disabled={isPending} required />
      <textarea name="message" disabled={isPending} required />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Sending...' : 'Send'}
      </button>
      {state.message && (
        <p className={state.success ? 'text-green-600' : 'text-red-600'}>
          {state.message}
        </p>
      )}
    </form>
  )
}

'use client'

import { useFormStatus } from 'react-dom'

export function SubmitButton({ children }: { children: React.ReactNode }): React.ReactNode {
  const { pending } = useFormStatus()

  return (
    <button type="submit" disabled={pending} aria-busy={pending}>
      {pending ? 'Submitting...' : children}
    </button>
  )
}

'use client'

import { useState, useEffect } from 'react'

// PROBLEM: Different output on server vs client
function BadComponent() {
  return <span>{Date.now()}</span> // Hydration mismatch!
}

// SOLUTION: Use useEffect for client-only values
function GoodComponent() {
  const [time, setTime] = useState<number | null>(null)

  useEffect(() => {
    setTime(Date.now())
  }, [])

  return <span>{time ?? 'Loading...'}</span>
}

// ALTERNATIVE: Suppress hydration warning for intentional mismatches
function TimeComponent() {
  return <span suppressHydrationWarning>{Date.now()}</span>
}

'use client'

import { useState, useEffect } from 'react'

export function ClientOnly({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return <>{children}</>
}

// Usage
function App() {
  return (
    <ClientOnly>
      <LocalStorageViewer />
    </ClientOnly>
  )
}

'use client'

import { useState, useEffect } from 'react'

export function WindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 })

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      })
    }

    // Set initial size
    handleResize()

    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return (
    <p>
      Window: {size.width} x {size.height}
    </p>
  )
}

// ClientWrapper.tsx (Client Component)
'use client'

import { useState } from 'react'

export function Accordion({ children, title }: { children: React.ReactNode; title: string }) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>{title}</button>
      {isOpen && <div>{children}</div>}
    </div>
  )
}

// Page.tsx (Server Component)
import { Accordion } from './ClientWrapper'

export default async function Page() {
  const content = await getContent() // Server-side fetch

  return (
    <Accordion title="View Details">
      {/* Server Component rendered as children */}
      <ServerRenderedContent data={content} />
    </Accordion>
  )
}

import dynamic from 'next/dynamic'

// Lazy load heavy chart library
const Chart = dynamic(() => import('./Chart'), {
  loading: () => <ChartSkeleton />,
  ssr: false  // Client-only rendering
})

// BAD: Entire page is client
'use client'
export default function ProductsPage() {
  const [products, setProducts] = useState([])
  useEffect(() => { /* fetch */ }, [])
  return <ProductList products={products} />
}

// GOOD: Only interactive part is client
// ProductsPage.tsx (Server Component)
export default async function ProductsPage() {
  const products = await getProducts()
  return (
    <div>
      <ProductFilters /> {/* Client Component */}
      <ProductList products={products} /> {/* Server Component */}
    </div>
  )
}

// BAD: Can't import Server Component in Client
'use client'
import { ServerData } from './ServerData' // Error!

export function ClientWrapper() {
  return <ServerData />
}

// GOOD: Pass as children
'use client'
export function ClientWrapper({ children }: { children: React.ReactNode }) {
  return <div className="wrapper">{children}</div>
}

// Usage in Server Component
import { ClientWrapper } from './ClientWrapper'
import { ServerData } from './ServerData'

export default function Page() {
  return (
    <ClientWrapper>
      <ServerData />
    </ClientWrapper>
  )
}

// app/products/page.tsx
import { db } from '@/lib/database'

export default async function ProductsPage() {
  // Direct database access - runs on server only
  const products = await db.product.findMany({
    include: { category: true }
  })

  return (
    <div>
      <h1>Products</h1>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  )
}

// app/dashboard/page.tsx
export default async function Dashboard() {
  // Safe - environment variables stay on server
  const apiKey = process.env.SECRET_API_KEY

  const data = await fetch(`https://api.example.com/data`, {
    headers: { Authorization: `Bearer ${apiKey}` }
  }).then(res => res.json())

  return <DashboardView data={data} />
}

// components/AddToCartButton.tsx
'use client' // Required for interactivity

import { useState } from 'react'

export function AddToCartButton({ productId }: { productId: string }) {
  const [count, setCount] = useState(1)
  const [isAdding, setIsAdding] = useState(false)

  const handleAdd = async () => {
    setIsAdding(true)
    await addToCart(productId, count)
    setIsAdding(false)
  }

  return (
    <div>
      <input
        type="number"
        value={count}
        onChange={(e) => setCount(parseInt(e.target.value))}
      />
      <button onClick={handleAdd} disabled={isAdding}>
        {isAdding ? 'Adding...' : 'Add to Cart'}
      </button>
    </div>
  )
}

// components/ThemeProvider.tsx
'use client'

import { createContext, useContext, useState } from 'react'

const ThemeContext = createContext<'light' | 'dark'>('light')

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light')

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  )
}

export const useTheme = () => useContext(ThemeContext)

// app/products/page.tsx (Server Component)
import { db } from '@/lib/database'
import { FilterableProductList } from '@/components/FilterableProductList'

export default async function ProductsPage() {
  const products = await db.product.findMany()

  return (
    <div>
      <h1>Products</h1>
      {/* Server Component passes data to Client Component */}
      <FilterableProductList products={products} />
    </div>
  )
}

// components/FilterableProductList.tsx (Client Component)
'use client'

export function FilterableProductList({ products }: { products: Product[] }) {
  const [filter, setFilter] = useState('')
  const filtered = products.filter(p => p.name.includes(filter))

  return (
    <div>
      <input
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="Filter products..."
      />
      <ProductList products={filtered} />
    </div>
  )
}

// app/layout.tsx (Server Component)
import { ThemeProvider } from '@/components/ThemeProvider'
import { Header } from @/components/Header'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {/* Client Component wraps Server Components */}
        <ThemeProvider>
          <Header /> {/* This can be a Server Component */}
          {children} {/* These are Server Components */}
        </ThemeProvider>
      </body>
    </html>
  )
}

// components/ThemeProvider.tsx (Client Component)
'use client'

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  // Client-side logic
  return <div className="theme-wrapper">{children}</div>
}

// ❌ Avoid this
'use client'

export default function Dashboard() {
  const [filter, setFilter] = useState('')
  const products = await getProducts() // ERROR: Can't use async in Client Component

  return (
    <div>
      <input value={filter} onChange={(e) => setFilter(e.target.value)} />
      <ProductList products={products} filter={filter} />
    </div>
  )
}

// ✅ Good: Serializable props
<ClientComponent
  data={{ id: 1, name: 'Product' }}
  numbers={[1, 2, 3]}
  isActive={true}
/>

// ❌ Bad: Functions, classes, symbols
<ClientComponent
  onClick={() => {}} // ❌ Functions can't be serialized
  date={new Date()} // ❌ Dates lose precision
  component={SomeComponent} // ❌ Components can't be serialized
/>

// app/posts/page.tsx (Server Component)
import { deletePost } from '@/app/actions'

export default function PostsPage({ posts }: { posts: Post[] }) {
  return (
    <div>
      {posts.map(post => (
        <PostCard key={post.id} post={post} onDelete={deletePost} />
      ))}
    </div>
  )
}

// components/PostCard.tsx (Client Component)
'use client'

export function PostCard({ post, onDelete }: { post: Post; onDelete: (id: string) => Promise<void> }) {
  return (
    <div>
      <h2>{post.title}</h2>
      <button onClick={() => onDelete(post.id)}>Delete</button>
    </div>
  )
}

// ❌ This will error
'use client'

import { ServerComponent } from './ServerComponent' // ERROR

export function ClientComponent() {
  return <ServerComponent /> // Won't work
}

// ✅ Use children prop instead
'use client'

export function ClientWrapper({ children }: { children: React.ReactNode }) {
  return <div className="wrapper">{children}</div>
}

// In parent Server Component:
<ClientWrapper>
  <ServerComponent /> {/* Works! */}
</ClientWrapper>

// ❌ This will error
export default async function Page() {
  const [state, setState] = useState(0) // ERROR: Can't use hooks

  return <div>{state}</div>
}

// ✅ Extract to Client Component
// page.tsx (Server Component)
export default function Page() {
  return <Counter />
}

// Counter.tsx (Client Component)
'use client'

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

// ❌ This will error
'use client'

export default async function ClientComponent() { // ERROR: Client Components can't be async
  const data = await fetchData()
  return <div>{data}</div>
}

// ✅ Fetch in Server Component, pass as prop
// page.tsx (Server Component)
export default async function Page() {
  const data = await fetchData()
  return <ClientComponent data={data} />
}

// ClientComponent.tsx (Client Component)
'use client'

export function ClientComponent({ data }: { data: Data }) {
  const [state, setState] = useState(data)
  return <div>{state}</div>
}

// app/product/[id]/page.tsx
import dynamic from 'next/dynamic'

const InteractiveReviews = dynamic(() => import('@/components/InteractiveReviews'), {
  ssr: false,
  loading: () => <ReviewsSkeleton />
})

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id)

  return (
    <div>
      <ProductDetails product={product} />

      {/* Only load interactive component on client */}
      <InteractiveReviews productId={params.id} />
    </div>
  )
}

// app/settings/page.tsx (Server Component)
import { cookies } from 'next/headers'

export default function SettingsPage() {
  const theme = cookies().get('theme')?.value || 'light'

  return <ThemeToggle initialTheme={theme} />
}

// components/ThemeToggle.tsx (Client Component)
'use client'

export function ThemeToggle({ initialTheme }: { initialTheme: string }) {
  const [theme, setTheme] = useState(initialTheme)

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light'
    setTheme(newTheme)
    document.cookie = `theme=${newTheme}; path=/`
  }

  return <button onClick={toggleTheme}>Toggle Theme</button>
}

// Static data - cached indefinitely (default)
const res = await fetch('https://api.example.com/posts', {
  cache: 'force-cache' // Default
})

// Revalidate every 60 seconds (ISR)
const res = await fetch('https://api.example.com/posts', {
  next: { revalidate: 60 }
})

// Always fresh - no caching
const res = await fetch('https://api.example.com/posts', {
  cache: 'no-store'
})

// Tag-based revalidation
const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] }
})

// app/actions.ts
'use server'

import { revalidatePath, revalidateTag } from 'next/cache'

export async function createPost(formData: FormData) {
  // ... create post logic

  // Revalidate specific path
  revalidatePath('/posts')

  // Revalidate all data with 'posts' tag
  revalidateTag('posts')
}

export default async function UserPage({ params }: { params: { id: string } }) {
  // Fetch in parallel
  const [user, posts, comments] = await Promise.all([
    getUser(params.id),
    getUserPosts(params.id),
    getUserComments(params.id),
  ])

  return (
    <div>
      <UserProfile user={user} />
      <UserPosts posts={posts} />
      <UserComments comments={comments} />
    </div>
  )
}

export default async function ArtistPage({ params }: { params: { id: string } }) {
  const artist = await getArtist(params.id)

  // This DEPENDS on artist data
  const albums = await getArtistAlbums(artist.id, artist.region)

  return (
    <div>
      <ArtistProfile artist={artist} />
      <AlbumList albums={albums} />
    </div>
  )
}

// app/blog/[slug]/page.tsx

// Force static rendering (SSG)
export const dynamic = 'force-static'

// Force dynamic rendering (SSR)
export const dynamic = 'force-dynamic'

// Revalidate every hour
export const revalidate = 3600

// Generate static params at build time
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((post) => ({
    slug: post.slug,
  }))
}