// ❌ Broken pattern — data fetched on the client after hydration
'use client'

interface Product {
  id: string
  name: string
  price: number
}

export function ProductPage({ productId }: { productId: string }) {
  const [product, setProduct] = useState<Product | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch(`/api/products/${productId}`)
      .then(res => res.json())
      .then(data => {
        setProduct(data)
        setLoading(false)
      })
  }, [productId])

  if (loading) return <Skeleton />
  return <ProductDetail product={product!} />
}

// The root cause: useEffect is a browser-side escape hatch
// It has no equivalent on the server — there is no server-side "after render" phase
// SSR renders once and sends HTML; it cannot pause to wait for effects

// ✅ Correct pattern — Server Component owns data, ships nothing to the browser
// No 'use client' directive = this is a Server Component by default

interface Product {
  id: string
  name: string
  price: number
}

// This function runs on the server. Its implementation never reaches the browser.
async function getProduct(id: string): Promise<Product> {
  // Direct database query — no API route needed, no credentials exposed
  const product = await db.products.findUnique({ where: { id } })
  if (!product) notFound()
  return product
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  // await directly in the component — no useEffect, no useState
  const product = await getProduct(params.id)

  return <ProductDetail product={product} />
}

// Without 'use client' — Server Component (default)
// This module is included in the server bundle only
// It can import Node.js APIs, database clients, file system modules
export async function DataComponent() {
  const data = await fetchFromDatabase()
  return <div>{data.value}</div>
}

// ---

// With 'use client' — Client Component
// This module is included in BOTH the server bundle (for SSR) AND the client bundle
// It can use useState, useEffect, browser APIs, event handlers
'use client'
export function InteractiveButton({ onClick }: { onClick: () => void }) {
  const [clicked, setClicked] = useState(false)
  return <button onClick={() => { setClicked(true); onClick() }}>Click</button>
}

0:["$","div",null,{"className":"product-card","children":[
  ["$","h1",null,{"children":"Acme Widget"}],
  ["$","p",null,{"children":"$24.99"}],
  ["$","button","btn-add",{"data-id":"prod_123","children":"Add to Cart"}]
]}]

// Server Component — renders a Client Component
export default async function ProductPage({ params }) {
  const product = await getProduct(params.id)

  // AddToCartButton is a 'use client' component
  // Flight does NOT inline its implementation — it references its bundle chunk
  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCartButton productId={product.id} price={product.price} />
    </div>
  )
}

// ✅ Correct placement — top of the module file, before any imports
'use client'

import { useState } from 'react'
import { formatPrice } from '@/lib/format' // This import is now also client-bundled

export function AddToCartButton({ productId, price }: { productId: string; price: number }) {
  const [added, setAdded] = useState(false)

  return (
    <button
      onClick={() => setAdded(true)}
      className={added ? 'btn-success' : 'btn-primary'}
    >
      {added ? '✓ Added' : `Add for ${formatPrice(price)}`}
    </button>
  )
}

// ❌ Common mistake — 'use client' inside a component or after imports
import { useState } from 'react' // Too late — directive must be first
'use client'                      // This is NOT processed correctly as a directive

// ❌ Forbidden — Client Component cannot import a Server Component
'use client'
import { ServerDataComponent } from './server-data' // Build error

export function ClientWrapper() {
  return <ServerDataComponent /> // This violates the module graph boundary
}

// ✅ Correct — Server Component passes server content as children prop
// Server Component (no directive)
export default async function Layout({ children }: { children: React.ReactNode }) {
  const user = await getCurrentUser()

  return (
    <InteractiveShell username={user.name}>
      {children} {/* Server-rendered content passes through as an opaque prop */}
    </InteractiveShell>
  )
}

// Client Component — receives server content as opaque children
'use client'
export function InteractiveShell({ username, children }: { username: string; children: React.ReactNode }) {
  const [menuOpen, setMenuOpen] = useState(false)
  return (
    <div>
      <nav onClick={() => setMenuOpen(v => !v)}>{username}</nav>
      <main>{children}</main>
    </div>
  )
}

// ❌ Forbidden — React.lazy cannot import a Server Component
const LazyServer = React.lazy(() => import('./ServerComponent')) // Build error

// ✅ React.lazy is valid only for Client Components
'use client'
const LazyChart = React.lazy(() => import('./HeavyChart')) // ✅ Client Component

// Both of these components call the same endpoint
// In the same render, only ONE fetch request is made
async function Header() {
  const user = await fetch('/api/me').then(r => r.json()) // Fetch A
  return <UserAvatar name={user.name} />
}

async function Sidebar() {
  const user = await fetch('/api/me').then(r => r.json()) // Deduplicated — reuses Fetch A's result
  return <UserMenu role={user.role} />
}

import { cache } from 'react'

// Wrapped function is memoized: same arguments → same result, computed once
const getProduct = cache(async (id: string): Promise<Product> => {
  console.log(`Fetching product ${id}`) // Logs only once even if called 10 times with the same id
  return db.products.findUnique({ where: { id } })
})

// Both components call getProduct('prod_123') — database queried once
export async function ProductTitle({ id }: { id: string }) {
  const product = await getProduct(id)
  return <h1>{product.name}</h1>
}

export async function ProductPrice({ id }: { id: string }) {
  const product = await getProduct(id)
  return <span>{product.price}</span>
}

// Server Component with Suspense streaming
export default function ProductPage({ params }) {
  return (
    <div>
      <StaticHeader /> {/* Renders immediately, streamed first */}

      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={params.id} /> {/* Async Server Component — streamed when ready */}
      </Suspense>

      <Suspense fallback={<RecommendationsSkeleton />}>
        <Recommendations productId={params.id} /> {/* Independent stream */}
      </Suspense>
    </div>
  )
}

'use client'
import { ErrorBoundary } from 'react-error-boundary'

export default function ProductPage({ params }) {
  return (
    <ErrorBoundary fallback={<ErrorMessage message="Failed to load reviews" />}>
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={params.id} />
      </Suspense>
    </ErrorBoundary>
  )
}