Πώς λειτουργούν τα Server Components στον App Router;

Question

Accepted Answer

**React Server Components (RSC)** render **μόνο στον διακομιστή** — η JavaScript τους δεν αποστέλλεται ποτέ στο πρόγραμμα περιήγησης. Στον App Router, κάθε component είναι Server Component **εξ ορισμού**· επιλέγετε ρητά την συμπεριφορά του client. ## Τι μπορεί να κάνει ένα Server Component ```tsx // app/users/page.tsx — a Server Component (no "use client") import db from "@/lib/db"; export default async function Users() { const users = await db.user.findMany(); // ✅ direct DB access, runs on server return (

{u.name}

); } ``` Τα Server Components μπορούν να είναι **ασύγχρονα**, να αναμένουν `await` δεδομένα απευθείας και να έχουν πρόσβαση σε πόρους αποκλειστικά του διακομιστή (βάση δεδομένων, σύστημα αρχείων, μυστικά) — επειδή εκτελούνται στον διακομιστή. Δεν απαιτείται στρώμα API για λήψη δεδομένων και τα μυστικά δεν φτάνουν ποτέ στον πελάτη. ## Το μεγάλο όφελος: μηδέν client JS για αυτό το component Το πρόγραμμα περιήγησης λαμβάνει το **rendered HTML/UI**, όχι τον κωδικό του component ή τις εξαρτήσεις του. Ένα Server Component που χρησιμοποιεί μια βαριά βιβλιοθήκη markdown ή date δεν αποστέλνει **καμία** από αυτή τη βιβλιοθήκη στο πρόγραμμα περιήγησης — μειώνει δραστικά το μέγεθος του bundle. ## Τι δεν μπορούν να κάνουν τα Server Components ```tsx // ❌ these only work in Client Components useState, useEffect, useRef // hooks (no interactivity/state on the server) onClick, onChange // event handlers window, localStorage, document // browser-only APIs ``` Καμία διαδραστικότητα, state, effects ή browser API — αυτές απαιτούν ένα Client Component. ## Σύνθεση server και client ```tsx // Server Component fetches data, passes it to an interactive Client Component import LikeButton from "./LikeButton"; // a "use client" component export default async function Post({ id }) { const post = await getPost(id); // server-side fetch return <>

; } ``` Το μοτίβο: Τα Server Components χειρίζονται δεδομένα/δομή· ενσωματώστε Client Components μόνο όπου απαιτείται διαδραστικότητα ("islands"). ## Γιατί έχει σημασία Τα Server Components είναι το καθοριστικό χαρακτηριστικό του App Router. Μειώνουν το μέγεθος του client bundle (λιγότερο JS για λήψη/ανάλυση), επιτρέπουν άμεση, ασφαλή πρόσβαση δεδομένων από τον διακομιστή χωρίς API και βελτιώνουν την απόδοση και το SEO. Η γνώση ότι είναι η προεπιλογή — και τι αναγκάζει ένα component να είναι Client Component — είναι θεμελιώδης για την αποτελεσματική δόμηση εφαρμογών App Router.