Kdaj in kako uporabljaš Client Components?

Question

Accepted Answer

**Client Component** se izvaja v brskalniku (in se tudi pred-renderira na strežniku za začetni HTML). Ga vključiš z direktivo **`"use client"`** na vrhu datoteke. Potrebuješ ga vsakič, ko potrebuješ interaktivnost, stanje, efekte ali API-je brskalnika. ## Deklariranje enega ```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 } ``` ## Kdaj POTREBUJEŠ 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 se širi k otrokom Označitev datoteke z `"use client"` jo in **vse, kar jo uvozi** naredi del client bundla. Zato želiš client meje **male in nizko v drevesu** — "client otoke" — namesto označitve top-level layouta kot client (kar bi potegnilo celotno aplikacijo v brskalnični 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" } ``` ## Prehajanje podatkov iz strežnika na odjemalca ```tsx // Server Component fetches, passes serializable props down to the client island ``` Ustreznost, ki se posreduje iz Server v Client Component, mora biti **serializabilna** (brez funkcij, brez primerkov razredov), ker prečka mejo server→client. ## Zakaj je to pomembno Client Components so način, kako dodaš interaktivnost v sicer server-first aplikaciji. Spretnost je, da jih obdrži minimalne in na listih — interaktivnost tam, kjer je potrebna, Server Components povsod drugje — tako da pošiljaš najmanj JavaScripta. Napačno umestitev `"use client"` visoko v drevesu je pogosta napaka, ki povečuje bundle in opušča prednosti Server Components.