'use client'

import { useState, useEffect } from 'react'

export default function ClientPage() {
  const [data, setData] = useState(null)
  
  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData)
  }, [])
  
  if (!data) return <div>Loading...</div>
  
  return <div>{/* Render data */}</div>
}

// Next.js App Router (Server Component)
async function getData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store' // Dynamic data
  })
  return res.json()
}

export default async function ServerPage() {
  const data = await getData()
  
  return <div>{/* Render data */}</div>
}

// Next.js - Generated at build time
async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}

export default async function StaticPage() {
  const data = await getData()
  
  return <div>{/* Render data */}</div>
}

// Force static generation
export const dynamic = 'force-static'

// Revalidate every 60 seconds
async function getData() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 60 }
  })
  return res.json()
}

export default async function ISRPage() {
  const data = await getData()
  
  return <div>{/* Render data */}</div>
}

// Runs only on the server
async function ServerComponent() {
  const data = await db.query('SELECT * FROM users')
  
  return (
    <div>
      {data.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  )
}

'use client'

import { useState } from 'react'

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

// Server Component
import ClientButton from './ClientButton'

async function ServerParent() {
  const data = await getData()
  
  return (
    <div>
      <h1>{data.title}</h1>
      {/* Pass server data as props to client */}
      <ClientButton initialCount={data.count} />
    </div>
  )
}

// Client Component
'use client'

function ClientButton({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount)
  
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  )
}

async function Page() {
  // Fetch in parallel
  const [users, posts, comments] = await Promise.all([
    fetchUsers(),
    fetchPosts(),
    fetchComments()
  ])
  
  return (
    <div>
      <Users data={users} />
      <Posts data={posts} />
      <Comments data={comments} />
    </div>
  )
}

async function Page() {
  // Wait for user first
  const user = await fetchUser()
  
  // Then fetch user's posts
  const posts = await fetchUserPosts(user.id)
  
  return (
    <div>
      <User data={user} />
      <Posts data={posts} />
    </div>
  )
}

import { Suspense } from 'react'

async function SlowComponent() {
  const data = await slowDataFetch()
  return <div>{data}</div>
}

export default function Page() {
  return (
    <div>
      <h1>Page Title</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <SlowComponent />
      </Suspense>
    </div>
  )
}

// Revalidate after 1 hour
fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }
})

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request: Request) {
  const { path } = await request.json()
  
  revalidatePath(path)
  
  return Response.json({ revalidated: true })
}

// No caching
fetch('https://api.example.com/data', {
  cache: 'no-store'
})

// Cache indefinitely
fetch('https://api.example.com/data', {
  cache: 'force-cache'
})

1. Server generates HTML
   ↓
2. Browser receives HTML (visible)
   ↓
3. JavaScript loads
   ↓
4. React "hydrates" the HTML (interactive)

// ❌ Causes hydration error
function Component() {
  return <div>{Date.now()}</div>
}

// ✅ Use effect for client-only rendering
function Component() {
  const [timestamp, setTimestamp] = useState(null)
  
  useEffect(() => {
    setTimestamp(Date.now())
  }, [])
  
  return <div>{timestamp || 'Loading...'}</div>
}

// Works without JavaScript
export default function ContactForm() {
  return (
    <form action="/api/contact" method="POST">
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
    </form>
  )
}

'use client'

export default function ContactForm() {
  const [status, setStatus] = useState('')
  
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    
    const form = e.target as HTMLFormElement
    const formData = new FormData(form)
    
    const response = await fetch('/api/contact', {
      method: 'POST',
      body: formData
    })
    
    if (response.ok) {
      setStatus('Message sent!')
      form.reset()
    }
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
      {status && <p>{status}</p>}
    </form>
  )
}

// Mostly static content
export default function Page() {
  return (
    <article>
      <h1>Article Title</h1>
      <p>Static content...</p>
      
      {/* Interactive "island" */}
      <LikeButton />
      
      <p>More static content...</p>
      
      {/* Another interactive "island" */}
      <CommentSection />
    </article>
  )
}

import dynamic from 'next/dynamic'

// Lazy load heavy component
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <Skeleton />,
  ssr: false
})

import Link from 'next/link'

// Automatically prefetches on hover
<Link href="/about" prefetch>
  About
</Link>

// Automatic route-based code splitting
// app/dashboard/page.tsx
// app/settings/page.tsx
// app/profile/page.tsx
// Each route is a separate bundle

// Add to component
console.log('Rendering on:', typeof window === 'undefined' ? 'server' : 'client')

# Check bundle size
npm run build

# Analyze bundle
npm run build -- --analyze