Kapan lan piwantun nggunakake Client Components?

Question

Accepted Answer

**Client Component** lumakua ing browser (lan uga pre-renderasi ing server kanggo HTML awal). Sampeyan opt-in kanthi direktif **`"use client"`** ing ndhuwur file. Sampeyan perlu dheweke nalika mbutuhake interaktivitas, state, effects, utawa browser APIs. ## Ngumumake sawijining ```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 } ``` ## Kapan sampeyan BUTUH 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) ``` ## Direktif cascades menyang anak-anak Nandhari file `"use client"` ndadekake dheweke lan **kabeh sing diimpor** bagian saka kliyèn bundle. Dadi sampeyan pengin kliyèn wates dadi **cilik lan mudhun ing wit** — "kliyèn isles" — kadhapanan tinimbang nandhari layout tingkat-ndhuwur minangka kliyèn (kang bakal narik kabeh app menyang browser 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" } ``` ## Ngilir data saka server menyang kliyèn ```tsx // Server Component fetches, passes serializable props down to the client island ``` Props sing dikirim saka Server menyang Client Component kudu **serializable** (ora ana fungsi, ora ana instances kelas) amarga padha lintas server→kliyèn wates. ## Mengapa iku penting Client Components minangka carane sampeyan nambah interaktivitas ing app sing biasane server-pertama. Skill iku tetep dheweke minimal lan ing daun — interaktivitas ing mana perlu, Server Components mok-mok — dadi sampeyan ngirim paling cilik JavaScript. Misplacing `"use client"` dhuwur ing wit minangka kesalahan umum kang inflate bundle lan forfeits benefits saka Server Components.