როდის და როგორ გამოიყენება Client Components?

Question

Accepted Answer

**Client Component** ხორციელდება ბრაუზერში (და აგრეთვე წინასწარ რენდერდება სერვერზე საწყისი HTML-ისთვის). თქვენ მიიღებთ მასში **`"use client"`** დირექტივის საშუალებით ფაილის თავში. გჭირდებათ ისინი, როდესაც საჭიროა ინტერაქტივობა, მდგომარეობა, ეფექტები ან ბრაუზერის API-ები. ## ერთის დეკლარირება ```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 } ``` ## როდის გჭირდებათ 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) ``` ## დირექტივა გადაეცემა შვილებს ფაილის `"use client"`-ის მოწერა მას და **ყველა იმპორტირებულ კოდს** გახდის კლიენტის bundle-ის ნაწილს. ამიტომ გსურთ კლიენტის საზღვრები იყოს **მცირე და ხეზე დაბალი** — "კლიენტის კუნძულები" — ვიდრე ზედა დონის განლაგება კლიენტად მოწეროთ (რაც მთელი აპლიკაცია ბრაუზერის 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" } ``` ## მონაცემების გადაცემა სერვერიდან კლიენტზე ```tsx // Server Component fetches, passes serializable props down to the client island ``` Server Component-დან Client Component-ზე გადაცემული Props უნდა იყოს **სერიალიზებადი** (ფუნქციები არა, კლასის ინსტანციები არა), რადგან ისინი გადაკვეთენ სერვერ→კლიენტის საზღვარს. ## რატომ არის ეს მნიშვნელოვანი Client Components არის ის, თუ როგორ დაამატებთ ინტერაქტივობას თუ სერვერ-ორიენტირებული აპლიკაციაში. მასტერობა არის მათი მინიმალიზირება და ფოთলებზე მოთავსება — ინტერაქტივობა სადაც საჭიროა, Server Components ყველგან სხვა — ისე რომ მინიმალური JavaScript გაგზავნით. `"use client"`-ის ხეზე მაღლა ჩასმა საერთო შეცდომაა, რომელიც bundle-ს გასაშლელი აკეთებს და Server Components-ის სარგებელს კარგავს.