'use client' on Every Component — 240KB Extra JavaScript, 2.1s Slower TTI

// ============================================
// Server Component — passes serialized data to Client
// ============================================

// This is a Server Component (no 'use client')
import { ClientCard } from './client-card'
import { db } from '@/lib/db'

export async function ProductPage({ slug }: { slug: string }) {
  const product = await db.query(
    'SELECT * FROM products WHERE slug = $1',
    [slug]
  )

  // Serializable: string, number, boolean, plain objects/arrays, Date
  return (
    <ClientCard
      title={product.title}
      price={product.price}
      inStock={product.stock > 0}
      tags={product.tags} // Array — serializable
      createdAt={product.created_at} // Date — serialized as ISO string
      onSale={product.sale_price ? true : false}
    />
  )
}

// ============================================
// Client Component — receives serialized props
// ============================================

'use client'

import { useState } from 'react'

interface ClientCardProps {
  title: string
  price: number
  inStock: boolean
  tags: string[]
  createdAt: string
  onSale: boolean
}

export function ClientCard(props: ClientCardProps) {
  const [expanded, setExpanded] = useState(false)

  // props are JSON-deserialized — they're plain data, not live references
  return (
    <div>
      <h2>{props.title}</h2>
      <p>${props.price}</p>
      {props.inStock ? (
        <button onClick={() => setExpanded(!expanded)}>
          {expanded ? 'Show less' : 'Show more'}
        </button>
      ) : (
        <p className="text-red-500">Out of stock</p>
      )}
    </div>
  )
}

// ============================================
// WRONG — passing non-serializable props
// ============================================

// Server Component — DO NOT DO THIS
export function WrongPage() {
  const handleClick = () => console.log('clicked')

  // handleClick WILL BE SILENTLY DROPPED — function is not serializable
  return <ClientCard onClick={handleClick} />
}

// ============================================
// Bundle size analysis: Server vs Client
// ============================================

// --- WRONG PATTERN: 'use client' at layout level ---
// File: app/layout.tsx
'use client'

// This single directive client-renders EVERYTHING
// Bundle: ~350KB, TTI: 3.9s on 3G
import { Sidebar } from './sidebar' // becomes client
import { DataTable } from './data-table' // becomes client
import { ChartWidget } from './chart-widget' // becomes client
import { Footer } from './footer' // becomes client
// ... 43 more components, all client-rendered

export default function Layout({ children }) {
  return (
    <div>
      <Sidebar />
      <DataTable />
      <ChartWidget />
      <main>{children}</main>
      <Footer />
    </div>
  )
}

// --- CORRECT PATTERN: 'use client' only on interactive leaf ---
// File: app/layout.tsx (Server Component — NO 'use client')
// Bundle: ~85KB, TTI: 1.8s on 3G

import { Sidebar } from './sidebar' // Server Component — zero JS
import { DataTable } from './data-table' // Server Component — zero JS
import { ClientSidebar } from './client-sidebar' // Only this adds JS

export default function Layout({ children }) {
  return (
    <div>
      <ClientSidebar defaultCollapsed={false}>
        <Sidebar /> {/* Passed as children — still server-rendered */}
      </ClientSidebar>
      <main>{children}</main>
    </div>
  )
}

// File: client-sidebar.tsx
'use client'

// Only this small wrapper adds JavaScript — 2KB
import { useState } from 'react'

export function ClientSidebar({ 
  children, 
  defaultCollapsed 
}: { 
  children: React.ReactNode
  defaultCollapsed: boolean 
}) {
  const [collapsed, setCollapsed] = useState(defaultCollapsed)
  
  return (
    <aside data-collapsed={collapsed}>
      <button onClick={() => setCollapsed(!collapsed)}>
        {collapsed ? 'Expand' : 'Collapse'}
      </button>
      <div hidden={collapsed}>{children}</div>
    </aside>
  )
}

// ============================================
// Children Prop Pattern — Server + Client hybrid
// ============================================

// --- Server Component (page.tsx) ---

import { Accordion } from './accordion-client'
import { db } from '@/lib/db'

export async function FaqPage() {
  const faqs = await db.query(
    'SELECT question, answer FROM faq ORDER BY position'
  )

  return (
    <div>
      {faqs.map((faq) => (
        <Accordion key={faq.question} title={faq.question}>
          {/* children prop — this content is server-rendered,
             then passed to Accordion Client Component */}
          <article className="prose">
            {faq.answer}
            <footer>
              Last updated: {faq.updated_at.toLocaleDateString()}
            </footer>
          </article>
        </Accordion>
      ))}
    </div>
  )
}

// --- Client Component (accordion-client.tsx) ---

'use client'

import { useState } from 'react'

interface AccordionProps {
  title: string
  children: React.ReactNode // Server-rendered content passed here
}

export function Accordion({ title, children }: AccordionProps) {
  const [open, setOpen] = useState(false)

  return (
    <div className="border-b">
      <button
        onClick={() => setOpen(!open)}
        className="w-full text-left py-3 font-medium"
        aria-expanded={open}
      >
        {title}
        <span className="float-right">{open ? '−' : '+'}</span>
      </button>
      {open && (
        <div className="pb-3">
          {children} {/* Pre-rendered server content — no hydration cost */}
        </div>
      )}
    </div>
  )
}

// ============================================
// Wrapping client-only libraries
// ============================================

// --- Server Component (page.tsx) ---

// Safe to import Server-renderable libraries directly
import { MarkdownRenderer } from '@/components/server-markdown'

// Must import Client Component wrappers — not the library directly
// Client-side library import is isolated in the wrapper file
import { ChartWidget } from '@/components/chart-wrapper'

export async function ReportPage() {
  const data = await fetchReportData()

  return (
    <div>
      {/* Server-rendered markdown — zero JS */}
      <MarkdownRenderer content={data.summary} />

      {/* Client-rendered chart — only 15KB for the chart, not 400KB for the page */}
      <ChartWidget data={data.series} />
    </div>
  )
}

// --- chart-wrapper.tsx (Client Component — only this file imports recharts) ---

'use client'

import { BarChart, Bar, XAxis, YAxis } from 'recharts'

interface ChartWidgetProps {
  data: { label: string; value: number }[]
}

export function ChartWidget({ data }: ChartWidgetProps) {
  return (
    <BarChart width={600} height={300} data={data}>
      <XAxis dataKey="label" />
      <YAxis />
      <Bar dataKey="value" fill="#2563eb" />
    </BarChart>
  )
}

// --- server-markdown.tsx (Server Component — no 'use client') ---

// react-markdown can render on the server — no hooks needed
import ReactMarkdown from 'react-markdown'

export function MarkdownRenderer({ content }: { content: string }) {
  return (
    <div className="prose">
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  )
}

// ============================================
// Context Provider — keep it isolated, pass server data as prop
// ============================================

// --- Root layout (Server Component) ---

import { ThemeProvider } from './theme-provider'
import { Navbar } from './navbar' // Server Component
import { Footer } from './footer' // Server Component

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  // Theme from server-side cookie or database
  const initialTheme = getThemeFromCookie()

  return (
    <html lang="en">
      <body>
        {/* ThemeProvider is the ONLY client component — everything
           else passed as children stays server-rendered */}
        <ThemeProvider initialTheme={initialTheme}>
          <Navbar />
          <main>{children}</main>
          <Footer />
        </ThemeProvider>
      </body>
    </html>
  )
}

// --- theme-provider.tsx (Client Component — isolated, no children forced to client) ---

'use client'

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

type Theme = 'light' | 'dark'

interface ThemeContextValue {
  theme: Theme
  toggle: () => void
}

export const ThemeContext = createContext<ThemeContextValue>({
  theme: 'light',
  toggle: () => {},
})

export function ThemeProvider({
  initialTheme,
  children,
}: {
  initialTheme: Theme
  children: React.ReactNode
}) {
  const [theme, setTheme] = useState<Theme>(initialTheme)

  useEffect(() => {
    document.documentElement.dataset.theme = theme
    localStorage.setItem('theme', theme)
  }, [theme])

  const toggle = () => setTheme((t) => (t === 'light' ? 'dark' : 'light'))

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

// ============================================
// Pattern 1: Server > Client > Server (children)
// ============================================

// Server Component
export async function ProductPage() {
  const product = await fetchProduct()

  return (
    <InteractiveSection>
      <ProductDetails product={product} /> {/* Server Component child */}
    </InteractiveSection>
  )
}

'use client'
function InteractiveSection({ children }: { children: React.ReactNode }) {
  const [visible, setVisible] = useState(false)
  return <div onClick={() => setVisible(!visible)}>{children}</div>
}

// ============================================
// Pattern 2: Server passes data, Client renders
// ============================================

// Server Component
export async function Dashboard() {
  const stats = await fetchStats() // plain serializable data
  return <StatsGrid stats={stats} />
}

'use client'
function StatsGrid({ stats }: { stats: Stats[] }) {
  const [sortBy, setSortBy] = useState('value')
  const sorted = [...stats].sort((a, b) => b[sortBy] - a[sortBy])
  return <div>{/* interactive sorting */}</div>
}

// ============================================
// Pattern 3: Client with Server Action
// ============================================

'use client'
import { incrementViews } from './actions'

function ViewCounter({ slug, initial }: { slug: string; initial: number }) {
  return (
    <button onClick={() => incrementViews(slug)}>
      {initial} views
    </button>
  )
}

// ============================================
// Pattern 4: Conditional Client Component
// ============================================

// Server Component
export async function Article({ isPremium }: { isPremium: boolean }) {
  const content = await fetchContent()

  return (
    <article>
      {content.body}
      {isPremium && <PaywallOverlay />} {/* Only imported when needed */}
    </article>
  )
}

// ============================================
// Catching Common Boundary Bugs
// ============================================

// --- BUG 1: Silent function drop ---
// Server Component passes function to Client — silently undefined

export function ServerParent() {
  // WRONG: onDelete is a function — will be undefined on client
  return <ItemList onDelete={(id) => deleteItem(id)} />
}

'use client'
function ItemList({ onDelete }: { onDelete?: (id: string) => void }) {
  // onDelete is undefined! Button click does nothing
  return <button onClick={() => onDelete?.('123')}>Delete</button>
}

// CORRECT: define onDelete inside the Client Component
'use client'
import { deleteItem } from './actions'

function ItemList() {
  return <button onClick={() => deleteItem('123')}>Delete</button>
}

// --- BUG 2: Non-serializable Date ---

export function ServerParent() {
  const date = new Date('2026-07-12') // Date object — may not serialize
  return <DateDisplay date={date} />
}

'use client'
function DateDisplay({ date }: { date: any }) {
  // date may be {} or ISO string depending on Next.js version
  return <time>{date}</time>
}

// CORRECT: convert to ISO string on server

export function ServerParentCorrect() {
  const date = new Date('2026-07-12')
  return <DateDisplay date={date.toISOString()} />
}

'use client'
function DateDisplay({ date }: { date: string }) {
  return <time>{new Date(date).toLocaleDateString()}</time>
}

// --- BUG 3: Hydration mismatch from localStorage ---

'use client'
function ThemeIndicator() {
  // WRONG: localStorage read during render — different on server vs client
  const theme = localStorage.getItem('theme') || 'light'
  return <span>{theme}</span>
}

'use client'
function ThemeIndicatorCorrect() {
  const [theme, setTheme] = useState('light')

  useEffect(() => {
    setTheme(localStorage.getItem('theme') || 'light')
  }, [])

  // First render: 'light' (server + client match)
  // After mount: actual theme from localStorage
  return <span suppressHydrationWarning>{theme}</span>
}

// ============================================
// Server composition — async, data at request time
// ============================================

// Page.tsx — Server Component, async, fetches all data
import { db } from '@/lib/db'
import { ClientFilters } from './client-filters'
import { ProductGrid } from './product-grid' // Server Component

export default async function ShopPage() {
  const [products, categories] = await Promise.all([
    db.query('SELECT * FROM products WHERE published = true'),
    db.query('SELECT * FROM categories'),
  ])

  return (
    <div>
      <h1>Shop ({products.length} items)</h1>
      {/* Client Component for interactivity */}
      <ClientFilters categories={categories} initialProducts={products}>
        {/* Server Component for static rendering */}
        <ProductGrid products={products} />
      </ClientFilters>
    </div>
  )
}

// === Client composition — hooks, state, effects ===

'use client'

import { useState, useMemo } from 'react'
import type { Product, Category } from '@/types'

interface ClientFiltersProps {
  categories: Category[]
  initialProducts: Product[]
  children: React.ReactNode
}

export function ClientFilters({
  categories,
  initialProducts,
  children,
}: ClientFiltersProps) {
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
  const [search, setSearch] = useState('')

  // Filtering happens client-side — no extra server requests
  const filteredProducts = useMemo(() => {
    return initialProducts.filter((p) => {
      if (selectedCategory && p.categoryId !== selectedCategory) return false
      if (search && !p.title.toLowerCase().includes(search.toLowerCase())) return false
      return true
    })
  }, [initialProducts, selectedCategory, search])

  return (
    <div>
      <input
        type="search"
        placeholder="Search products..."
        onChange={(e) => setSearch(e.target.value)}
      />
      <select onChange={(e) => setSelectedCategory(e.target.value || null)}>
        <option value="">All categories</option>
        {categories.map((c) => (
          <option key={c.id} value={c.id}>{c.name}</option>
        ))}
      </select>
      {children} {/* Server-rendered product grid */}
    </div>
  )
}

// ============================================
// Before: All-in-one Client Component
// ============================================

'use client'

// This component only uses useState for ONE interactive element
// Everything else is static — yet the entire file ships as JS
import { useState } from 'react'
import ReactMarkdown from 'react-markdown'

interface ArticleCardProps {
  title: string
  body: string
  author: string
  tags: string[]
}

export function ArticleCard({ title, body, author, tags }: ArticleCardProps) {
  const [expanded, setExpanded] = useState(false)

  return (
    <article>
      <h2>{title}</h2>
      <p>By {author}</p>
      <div className="tags">{tags.join(', ')}</div>
      <div className={expanded ? 'content-full' : 'content-preview'}>
        <ReactMarkdown>{body}</ReactMarkdown>
      </div>
      <button onClick={() => setExpanded(!expanded)}>
        {expanded ? 'Collapse' : 'Expand'}
      </button>
    </article>
  )
}
// Client bundle contribution: 45KB (react-markdown + component code)

// ============================================
// After: Server Component + Client wrapper
// ============================================

// ArticleCard.tsx — Server Component (NO 'use client')
import { ExpandableWrapper } from './expandable-wrapper'
import ReactMarkdown from 'react-markdown'

interface ArticleCardProps {
  title: string
  body: string
  author: string
  tags: string[]
}

export function ArticleCard({ title, body, author, tags }: ArticleCardProps) {
  return (
    <article>
      <h2>{title}</h2>
      <p>By {author}</p>
      <div className="tags">{tags.join(', ')}</div>
      <ExpandableWrapper>
        <ReactMarkdown>{body}</ReactMarkdown>
      </ExpandableWrapper>
    </article>
  )
}
// Client bundle contribution: 0KB (server component + server-rendered markdown)

// expandable-wrapper.tsx — Client Component (only this tiny file ships JS)
'use client'

import { useState } from 'react'

export function ExpandableWrapper({ children }: { children: React.ReactNode }) {
  const [expanded, setExpanded] = useState(false)

  return (
    <>
      <div className={expanded ? 'content-full' : 'content-preview'}>
        {children}
      </div>
      <button onClick={() => setExpanded(!expanded)}>
        {expanded ? 'Collapse' : 'Expand'}
      </button>
    </>
  )
}
// Client bundle contribution: 1KB (tiny wrapper, no library imports)

// ============================================
// Server Action as the bridge for interactivity
// ============================================

// --- Server Component: renders the page, fetches data ---

import { LikeButton } from './like-button'
import { CommentList } from './comment-list'

export default async function PostPage({ slug }: { slug: string }) {
  const [post, likes] = await Promise.all([
    fetchPost(slug),
    fetchLikes(slug),
  ])

  return (
    <article>
      <h1>{post.title}</h1>
      <div className="prose">{post.body}</div>
      {/* Tiny client component — only this needs 'use client' */}
      <LikeButton slug={slug} initialCount={likes.count} />
      <CommentList comments={post.comments} />
    </article>
  )
}

// --- Client Component: tiny button, uses Server Action ---

'use client'

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

interface LikeButtonProps {
  slug: string
  initialCount: number
}

interface LikeState {
  count: number
  liked: boolean
}

export function LikeButton({ slug, initialCount }: LikeButtonProps) {
  const [state, formAction, isPending] = useActionState(
    async (prev: LikeState) => {
      return likePost(slug, prev.liked)
    },
    { count: initialCount, liked: false }
  )

  return (
    <form action={formAction}>
      <button
        type="submit"
        disabled={isPending}
        className={state.liked ? 'liked' : ''}
      >
        {isPending ? '...' : state.liked ? '❤️' : '🤍'}
        {' '}{state.count}
      </button>
    </form>
  )
}

// --- Server Action ---

'use server'

import { revalidateTag } from 'next/cache'

export async function likePost(slug: string, currentlyLiked: boolean) {
  const newCount = await db.query(
    'UPDATE posts SET likes = likes + $1 WHERE slug = $2 RETURNING likes',
    [currentlyLiked ? -1 : 1, slug]
  )

  revalidateTag(`post-${slug}`)

  return {
    count: newCount,
    liked: !currentlyLiked,
  }
}

// ============================================
// PPR with Server-First Default
// ============================================

// --- PPR page: static shell, dynamic content, client islands ---

// next.config.ts — enable PPR
export default {
  experimental: {
    ppr: true,
  },
}

// app/page.tsx — PPR-enabled page
export default async function HomePage() {
  return (
    <>
      {/* Static shell — cached, instant */}
      <header>
        <StaticNav />
      </header>

      {/* Dynamic content — streamed when ready */}
      <Suspense fallback={<DashboardSkeleton />}>
        <DashboardStats />
      </Suspense>

      {/* Client island — hydrated on client */}
      <InteractiveChart />
    </>
  )
}

// --- Performance comparison ---
// Without PPR + 'use client' everywhere: 4.2s TTI, 400KB JS
// With PPR + Server-first: 1.5s TTI (static shell), 2.1s (full), 85KB JS
//
// The static shell (header, skeleton) is visible in 1.5s
// Dynamic stats stream in around 2.5s
// Chart hydrates on client — only 15KB of chart JS