1~
2Τα React Server Components (RSC) έχουν αλλάξει θεμελιωδώς τον τρόπο που χτίζουμε εφαρμογές React. Μεταφέροντας τη λογική rendering στον server, μπορούμε να μειώσουμε σημαντικά το JavaScript bundle που στέλνεται στον client, οδηγώντας σε ταχύτερους χρόνους φόρτωσης. Σε αυτό το άρθρο εξερευνούμε προχωρημένα μοτίβα και βέλτιστες πρακτικές για RSC το 2026.
3~
4## Τι είναι τα Server Components;
5~
6Παραδοσιακά, τα React components γινόταν render εξ ολοκλήρου στον client (CSR) ή pre-render στον server ως HTML (SSR). Τα **Server Components** μας επιτρέπουν να κάνουμε render components _αποκλειστικά_ στον server. Ο κώδικάς τους δεν στέλνεται ποτέ στον browser.
7~
8### Τα Οφέλη
9~
101.  **Μηδενικό μέγεθος Bundle**: Τα dependencies παραμένουν στον server.
112.  **Άμεση πρόσβαση στο Backend**: Μπορείτε να κάνετε query τη βάση δεδομένων απευθείας.
123.  **Αυτόματο Code Splitting**: Τα Client components που εισάγονται server-side γίνονται αυτόματα split.
13~
14## Μοτίβο Ανάκτησης Δεδομένων
15~
16```tsx
17// app/users/page.tsx
18import { db } from '@/lib/db';
19~
20export default async function UsersPage() {
21  const users = await db.user.findMany();
22~
23  return (
24    <main>
25      <h1>Users</h1>
26      <ul>
27        {users.map((user) => (
28          <li key={user.id}>{user.name}</li>
29        ))}
30      </ul>
31    </main>
32  );
33}
34```
35~
36### Suspense για Streaming
37~
38```tsx
39import { Suspense } from 'react';
40import UserList from './UserList';
41import LoadingSkeleton from './LoadingSkeleton';
42~
43export default function Page() {
44  return (
45    <section>
46      <h1>My Users</h1>
47      <Suspense fallback={<LoadingSkeleton />}>
48        <UserList />
49      </Suspense>
50    </section>
51  );
52}
53```
54~
55## Συνδυασμός Server και Client Components
56~
57**Κανόνας**: Τα Server Components μπορούν να εισάγουν Client Components. Τα Client Components _δεν μπορούν_ να εισάγουν απευθείας Server Components. Αλλά μπορείτε να περάσετε ένα Server Component ως `children`.
58~
59### Το Μοτίβο "Children"
60~
61```tsx
62// ClientComponent.tsx
63'use client';
64~
65import { useState } from 'react';
66~
67export default function ClientWrapper({ children }) {
68  const [count, setCount] = useState(0);
69~
70  return (
71    <div onClick={() => setCount((c) => c + 1)}>
72      Count: {count}
73      {children} {/* This can be a Server Component! */}
74    </div>
75  );
76}
77```
78~
79```tsx
80// ServerPage.tsx
81import ClientWrapper from './ClientWrapper';
82import ServerContent from './ServerContent';
83~
84export default function Page() {
85  return (
86    <ClientWrapper>
87      <ServerContent /> {/* This works perfectly */}
88    </ClientWrapper>
89  );
90}
91```
92~
93## Συνηθισμένες Παγίδες
94~
951.  **Χρήση Context σε Server Components**: Το Context είναι έννοια του client-side.
962.  **Προσθήκη Event Handlers**: Δεν μπορείτε να προσθέσετε `onClick` ή `onChange` σε Server Component.
97~
98## Συμπέρασμα
99~
100Τα React Server Components δεν είναι απλά ένα χαρακτηριστικό· είναι αλλαγή παραδείγματος. Κατανοώντας τα όρια μεταξύ server και client, μπορείτε να χτίσετε εφαρμογές που είναι ταυτόχρονα ιδιαίτερα διαδραστικές και απίστευτα γρήγορες.
101~