Πότε και πώς χρησιμοποιείτε Client Components;

Question

Accepted Answer

Ένα **Client Component** τρέχει στο πρόγραμμα περιήγησης (και προ-αποδίδεται επίσης στον διακομιστή για το αρχικό HTML). Επιλέγετε να το ενεργοποιήσετε με την **`"use client"`** οδηγία στο επάνω μέρος του αρχείου. Το χρειάζεστε όποτε απαιτείται διαδραστικότητα, state, effects ή 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"` το κάνει και **ό,τι εισάγει** μέρος της client bundle. Έτσι θέλετε οι client όρια να είναι **μικρά και χαμηλά στο δέντρο** — "client islands" — αντί να σημειώσετε ένα top-level layout ως client (το οποίο θα έσερνε ολόκληρη την εφαρμογή στο browser 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" } ``` ## Μεταφορά δεδομένων από διακομιστή σε client ```tsx // Server Component fetches, passes serializable props down to the client island ``` Τα Props που διαβιβάζονται από έναν Server σε ένα Client Component πρέπει να είναι **σειριοποιήσιμα** (χωρίς συναρτήσεις, χωρίς instances κλάσης) επειδή διασχίζουν το όριο server→client. ## Γιατί έχει σημασία Τα Client Components είναι ο τρόπος που προσθέτετε διαδραστικότητα σε μια εφαρμογή με προσανατολισμό στον διακομιστή. Η δεξιότητα είναι να τα κρατήσετε ελάχιστα και στα φύλλα — διαδραστικότητα όπου χρειάζεται, Server Components παντού αλλού — ώστε να αποστείλετε το ελάχιστο JavaScript. Η τοποθέτηση `"use client"` ψηλά στο δέντρο είναι ένα συνηθισμένο λάθος που διογκώνει το bundle και χάνει τα οφέλη των Server Components.