⚛️ บทที่ 3: Server Components vs Client Components

// ❌ ผิด - เวลาต่างกันระหว่าง server และ client
function CurrentTime() {
  return <div>เวลาปัจจุบัน: {new Date().toLocaleTimeString()}</div>
}

// ✅ ถูก - ใช้ useEffect
function CurrentTime() {
  const [time, setTime] = useState('')
  
  useEffect(() => {
    setTime(new Date().toLocaleTimeString())
  }, [])
  
  return <div>เวลาปัจจุบัน: {time || 'กำลังโหลด...'}</div>
}

// ❌ ผิด - window ไม่มีบน server
function WindowWidth() {
  return <div>หน้าจอกว้าง: {window.innerWidth}px</div>
}

// ✅ ถูก - ตรวจสอบก่อนใช้
function WindowWidth() {
  const [width, setWidth] = useState(0)
  
  useEffect(() => {
    setWidth(window.innerWidth)
    
    const handleResize = () => setWidth(window.innerWidth)
    window.addEventListener('resize', handleResize)
    
    return () => window.removeEventListener('resize', handleResize)
  }, [])
  
  return <div>หน้าจอกว้าง: {width || 'กำลังตรวจสอบ...'}px</div>
}

// ❌ ผิด - Math.random() ให้ค่าต่างกันระหว่าง server และ client
function RandomColor() {
  const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`
  return <div style={{ color }}>สีสุ่ม</div>
}

// ✅ ถูก - สร้างค่าสุ่มหลัง hydration
function RandomColor() {
  const [color, setColor] = useState('#000000')
  
  useEffect(() => {
    const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`
    setColor(randomColor)
  }, [])
  
  return <div style={{ color }}>สีสุ่ม</div>
}