เมื่อใดและวิธีใดที่คุณใช้ Client Components?

Question

Accepted Answer

**Client Component** ทำงานในเบราว์เซอร์ (และยังถูก pre-render บนเซิร์ฟเวอร์สำหรับ HTML เบื้องต้น) คุณเลือกใช้งานด้วยคำสั่ง **`"use client"`** ที่ด้านบนของไฟล์ คุณต้องใช้พวกมันเมื่อใดก็ตามที่คุณต้องการความสามารถในการโต้ตอบ สถานะ เอฟเฟกต์ หรือ API ของเบราว์เซอร์ ## การประกาศหนึ่งอัน ```tsx "use client"; // MUST be the first line of the file import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); // ✅ hooks work here return ; // ✅ events } ``` ## เมื่อคุณต้องการ Client Component ```text ✓ useState / useReducer / useEffect / useRef / useContext ✓ Event handlers (onClick, onChange, onSubmit) ✓ Browser APIs (window, localStorage, navigator, IntersectionObserver) ✓ Third-party libraries that use any of the above (most UI/animation libs) ``` ## คำสั่งส่งผ่านไปยังองค์ประกอบย่อย การทำเครื่องหมายไฟล์ว่า `"use client"` ทำให้มันและ **ทุกอย่างที่มันนำเข้า** เป็นส่วนหนึ่งของ client bundle ดังนั้นคุณต้องการให้ขอบเขตของ client เป็น **ขนาดเล็กและต่ำในต้นไม้** — "client islands" — แทนที่จะทำเครื่องหมาย layout ระดับบนสุดเป็น client (ซึ่งจะดึงแอปทั้งหมดเข้าไปใน client bundle) ```tsx // ✅ Good: server page, small client island only where needed export default async function Page() { // Server Component const data = await getData(); return <>; // island is "use client" } ``` ## ส่งข้อมูลจากเซิร์ฟเวอร์ไปยังไคลเอนต์ ```tsx // Server Component fetches, passes serializable props down to the client island ``` Props ที่ส่งผ่านจาก Server ไปยัง Client Component จะต้อง **serializable** (ไม่มีฟังก์ชัน ไม่มี class instances) เนื่องจากพวกมันข้ามขอบเขต server→client ## เหตุใดจึงมีความสำคัญ Client Components คือวิธีที่คุณเพิ่มความสามารถในการโต้ตอบในแอป server-first ทักษะคือการทำให้พวกมันเล็กน้อยและอยู่บนใบ — ความสามารถในการโต้ตอบที่ต้องการในที่นั้น Server Components ทุกที่อื่น — เพื่อให้คุณส่ง JavaScript อย่างน้อยที่สุด การวาง `"use client"` สูงในต้นไม้อย่างผิดพลาดเป็นข้อผิดพลาดทั่วไปที่ทำให้ bundle พองขึ้นและทำให้สูญเสียประโยชน์ของ Server Components