Kur dhe si përdor Client Components?

Question

Accepted Answer

Një **Client Component** ekzekutohet në shfletues (dhe paraqitet paraprakisht edhe në server për HTML-in fillestar). E aktivizoni me direktivën **`"use client"`** në krye të skedës. Ju duhen sa herë që keni nevojë për interaktivitet, gjendje, efekte ose API të shfletuesit. ## Deklarimi i njërit ```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 } ``` ## Kur ju DUHET një 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) ``` ## Direktiva bie në kaskadë tek të mirat Marcimi i një skede si `"use client"` e bën atë dhe **gjithçka që ajo importon** pjesë të bundle-it të klientit. Pra ju dëshironi kufijt e klientit të jenë **të vegjël dhe të ulët në pemë** — "ishuj klientesh" — në vend të shënimit të një layout top-level si klient (që do të tërheqte të gjithë aplikacionin në bundle-in e shfletuesit). ```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" } ``` ## Kalimi i të dhënave nga serveri në klient ```tsx // Server Component fetches, passes serializable props down to the client island ``` Pronat e kaluar nga një Server në një Client Component duhet të jenë **të serizueshme** (pa funksione, pa instance klasash) pasi ato kalojnë kufirin server→client. ## Pse është e rëndësishme Client Components janë mënyra se si shtoni interaktivitet në një aplikacion ndryshe server-first. Zhvillimi i aftësisë është ta mbani ato minimale dhe në gjethe — interaktivitet ku duhet, Server Components kudo tjetër — në mënyrë që të dërgoni të paktën JavaScript. Përmendja e gabuar e `"use client"` lart në pemë është një gabim i zakonshëm që përdor bundle-in dhe braktis përfitimet e Server Components.