Meta u kif tuża l-Client Components?

Question

Accepted Answer

**Client Component** taħdem fil-browser (u wkoll pre-render fuq is-server għall-HTML inizjali). Inti agħżlu permezz tad-direttiva **`"use client"`** f'quċċ il-file. Għandkom bżonnhom meta għandkum għal interattività, stat, effetti, jew APIs tal-browser. ## Ddikjarar waħda ```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 } ``` ## Meta għandkum BŻONN 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) ``` ## Id-direttiva cascades mal-itterati L-immarkar ta' file bħala `"use client"` jagħmlu hija u **kullma timpurta** parti mill-bundle tal-client. Għalhekk trid li l-ħdudud tal-client jkunu **żgħar u baxxi fl-arbor** — "insulen tal-client" — minflok immarkar ta' layout ta' livell ta' fuq bħala client (li jkun iġib l-app sħiħ fil-bundle tal-browser). ```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" } ``` ## Tgħaddi data mill-server sal-client ```tsx // Server Component fetches, passes serializable props down to the client island ``` Props immarrun minn Server lejn Client Component għandhom ikunu **serializable** (l-ebda funzjonijiet, l-ebda istanze ta' klassi) minħabba li jaqsmu l-ħadd is-server→client. ## Għala hija importanti Client Components huwa kif int appendix interattività f'app li billoħda hi server-first. L-ħila hija żżommhom minimalisti u f'weraq — interattività fejn meħtieġa, Server Components kullimkien ieħor — sabiex tibgħat l-inqas JavaScript. Misplacing `"use client"` għoli fl-arbor hu żball komuni li jagħmel il-bundle u sabib li titilef il-benefiċċji tal-Server Components.