Kada ir kaip naudojate Client Components?

Question

Accepted Answer

**Client Component** veikia naršyklėje (taip pat iš anksto sugeneruojamas serveryje pradiniame HTML). Jūs pasirenkate naudoti **`"use client"`** direktyvą failo viršuje. Jums jie reikalingi, kai reikia interaktyvumo, būsenos, efektų arba naršyklės API. ## Deklaravimas ```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 } ``` ## Kada REIKALINGAS 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) ``` ## Direktyva kaskadui saugios vaikams Failo žymėjimas kaip `"use client"` daro jį ir **viską, ką jis importuoja**, dalimi kliento paketinio kodo. Todėl norėtumėte, kad kliento ribos būtų **mažos ir žemoje medžio dalyje** — "kliento salai" — užuot žymėję aukščiausio lygio maketą kaip klientą (tai pritrauktų visą programą į naršyklės paketinį kodą). ```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" } ``` ## Duomenų perdavimas iš serverio į klientą ```tsx // Server Component fetches, passes serializable props down to the client island ``` Propsai, perduoti iš Server į Client Component, turi būti **serijuojami** (nėra funkcijų, nėra klasės egzempliorių), nes jie kerta serverio→kliento sieną. ## Kodėl tai svarbu Client Components yra tai, kaip jūs pridedati interaktyvumą į kitaip serverio prioritetu pagrįstą programą. Išmintis yra juos laikyti minimaliais ir lapuose — interaktyvumas kur reikalingas, Server Components visur kitur — todėl siųsite mažiausią JavaScript. Klaida `"use client"` dėti aukštai medyje yra dažna klaida, kuri padidina paketinį kodą ir praranda Server Components privalumus.