1~
2React Server Components (RSC) שינו באופן מהותי את הדרך שבה אנו בונים יישומי React. על ידי העברת לוגיקת הרנדור לשרת, אנו יכולים להקטין משמעותית את חבילת ה-JavaScript שנשלחת ללקוח. במאמר זה, נחקור דפוסים מתקדמים ושיטות עבודה מומלצות לניצול RSC ב-2026.
3~
4## מה הם Server Components?
5~
6**Server Components** מאפשרים לנו לרנדר רכיבים _אך ורק_ על השרת. הקוד שלהם לעולם אינו נשלח לדפדפן.
7~
8### היתרונות
9~
101.  **גודל חבילה אפסי**: תלויות המשמשות ב-Server Components נשארות על השרת.
112.  **גישה ישירה לבקאנד**: ניתן לבצע שאילתות למסד הנתונים ישירות בתוך הרכיב.
123.  **פיצול קוד אוטומטי**: רכיבי לקוח המיובאים בצד השרת מפוצלים אוטומטית.
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
56~
57**כלל אצבע**: Server Components יכולים לייבא Client Components. Client Components _לא יכולים_ לייבא Server Components ישירות. אולם, ניתן להעביר Server Component כ-`children` ל-Client Component.
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}
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 />
88    </ClientWrapper>
89  );
90}
91```
92~
93## מלכודות נפוצות
94~
951.  **שימוש ב-Context ב-Server Components**: Context הוא מושג בצד הלקוח.
962.  **הוספת מטפלי אירועים**: לא ניתן להוסיף `onClick` או `onChange` ל-Server Component.
97~
98## סיכום
99~
100React Server Components הם לא רק פיצ'ר; הם שינוי פרדיגמה. על ידי הבנת הגבול בין שרת ללקוח, תוכלו לבנות יישומים שהם גם אינטראקטיביים מאוד וגם מהירים להפליא.
101~