Milloin ja kuinka käytät Client Components -komponentteja?

Question

Accepted Answer

**Client Component** suoritetaan selaimessa (ja esijäsennetään myös palvelimella alkuperäistä HTML:ää varten). Aktivoit sen **`"use client"`** -direktiivillä tiedoston ylähreikellä. Tarvitset ne aina, kun tarvitset interaktiivisuutta, tilaa, efekteja tai selaimen API:ta. ## Yhden ilmoittaminen ```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 } ``` ## Milloin TARVITSET Client Component -komponenttia ```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) ``` ## Direktiivi kaskadoi alaisuuksille Tiedoston merkitseminen `"use client"` -merkinnällä tekee siitä ja **kaikesta, mitä se tuo** osan client-paketista. Joten haluat client-rajojen olevan **pieniä ja alhaalla puussa** — "client islands" — sen sijaan, että merkitsisit ylimmän tason asettelun clientiksi (mikä vetäisi koko sovelluksen selaimen pakettiin). ```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" } ``` ## Tietojen siirtäminen palvelimelta asiakkaalle ```tsx // Server Component fetches, passes serializable props down to the client island ``` Palvelimesta Client Component -komponenttiin siirretyt propsit on oltava **sarjoitettavia** (ei funktioita, ei luokkien ilmentymiä), koska ne ylittävät server→client -rajan. ## Miksi se on tärkeää Client Component -komponentit ovat tapa lisätä interaktiivisuutta muulloin palvelinpainotteiseen sovellukseen. Taito on pitää ne minimaalisina ja lehdissä — interaktiivisuus siellä missä sitä tarvitaan, Server Components kaikkialla muualla — jotta lähetät mahdollisimman vähän JavaScriptiä. `"use client"` -merkinnän sijoittaminen korkealle puuhun on yleinen virhe, joka paisuttaa pakettia ja menettää Server Component -komponenttien edut.