Khi nào và làm thế nào để dùng Client Components?

Question

Accepted Answer

Một **Client Component** chạy trong browser (và cũng được pre-render trên server cho HTML ban đầu). Bạn opt-in bằng directive **`"use client"`** ở đầu file. Bạn cần chúng bất cứ khi nào cần interactivity, state, effect, hay browser API. ## Khai báo một cái ```tsx "use client"; // PHẢI là dòng đầu tiên của file import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); // ✅ hooks hoạt động ở đây return ; // ✅ events } ``` ## Khi nào bạn CẦN một 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) ``` ## Directive lan xuống các component con Đánh dấu một file `"use client"` làm cho nó và **mọi thứ nó import** thuộc về bundle client. Vì vậy bạn muốn các ranh giới client **nhỏ và nằm thấp trong cây** — "client islands" — chứ không phải đánh dấu một layout cấp cao là client (điều sẽ kéo cả app vào bundle của browser). ```tsx // ✅ Tốt: server page, chỉ island client nhỏ ở nơi cần export default async function Page() { // Server Component const data = await getData(); return <>; // island là "use client" } ``` ## Truyền dữ liệu từ server xuống client ```tsx // Server Component fetch, truyền các prop serializable xuống island client ``` Các prop truyền từ Server xuống Client Component phải **serializable** (không hàm, không instance của class) vì chúng vượt qua ranh giới server→client. ## Tại sao điều này quan trọng Client Components là cách bạn thêm interactivity trong một app vốn server-first. Kỹ năng nằm ở việc giữ chúng tối thiểu và ở các lá — interactivity ở nơi cần, Server Components ở mọi nơi khác — để bạn gửi ít JavaScript nhất. Đặt `"use client"` sai chỗ ở cấp cao trong cây là một lỗi phổ biến làm phình bundle và đánh mất lợi ích của Server Components.