1~
2React Server Components (RSC) au schimbat fundamental modul in care construim aplicatii React. Prin mutarea logicii de randare pe server, putem reduce semnificativ pachetul JavaScript trimis clientului, ducand la timpi de incarcare mai rapizi si experiente mai bune pentru utilizatori. In acest articol, vom explora modele avansate si bune practici pentru utilizarea RSC in 2026.
3~
4## Ce sunt Server Components?
5~
6Traditional, componentele React erau randate in intregime pe client (CSR) sau pre-randate pe server ca HTML (SSR) si apoi hidratate pe client. **Server Components** ne permit sa randam componente _exclusiv_ pe server. Codul lor nu este niciodata trimis browserului.
7~
8### Beneficiile
9~
101.  **Dimensiune zero a pachetului**: Dependentele folosite in Server Components (precum parsere markdown sau biblioteci grele de date) raman pe server.
112.  **Acces direct la backend**: Poti interoga baza de date direct in interiorul componentei fara a expune endpoint-uri API.
123.  **Impartire automata a codului**: Componentele client importate server-side sunt automat impartite in cod.
13~
14## Model de preluare a datelor
15~
16Cu RSC, poti face componentele `async` si astepta datele direct.
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>Users</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Suspense pentru streaming
39~
40Deoarece preluarea datelor poate fi lenta, inconjura componentele cu `<Suspense>` pentru a arata imediat o interfata de fallback.
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>My Users</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Intercalarea componentelor Server si Client
60~
61**Regula de baza**: Server Components pot importa Client Components. Client Components _nu pot_ importa Server Components direct. Totusi, poti pasa un Server Component ca `children` unui Client Component.
62~
63### Modelul "Children"
64~
65```tsx
66// ClientComponent.tsx
67'use client';
68~
69import { useState } from 'react';
70~
71export default function ClientWrapper({ children }) {
72  const [count, setCount] = useState(0);
73~
74  return (
75    <div onClick={() => setCount((c) => c + 1)}>
76      Count: {count}
77      {children} {/* Acesta poate fi un Server Component! */}
78    </div>
79  );
80}
81```
82~
83```tsx
84// ServerPage.tsx
85import ClientWrapper from './ClientWrapper';
86import ServerContent from './ServerContent';
87~
88export default function Page() {
89  return (
90    <ClientWrapper>
91      <ServerContent /> {/* Functioneaza perfect */}
92    </ClientWrapper>
93  );
94}
95```
96~
97## Capcane frecvente
98~
991.  **Folosirea Context in Server Components**: Context este un concept client-side. Daca trebuie sa imparti date server-side, paseaza-le ca props.
1002.  **Adaugarea de event handlers**: Nu poti adauga `onClick` sau `onChange` unui Server Component. Aceasta logica apartine unui Client Component.
101~
102## Concluzie
103~
104React Server Components nu sunt doar o functionalitate; sunt o schimbare de paradigma. Intelegand granita intre server si client, poti construi aplicatii care sunt atat extrem de interactive cat si incredibil de rapide.
105~