Ce sunt React Server Components și cum diferă de componentele client?

Question

Accepted Answer

**Server Components (RSC)** se redă pe **server** și trimit un rezultat serializat la browser. Ei livrează **zero JavaScript** pentru ei înșiși — doar datele/marcajul, nu codul lor. ## Cele două tipuri ```jsx // Server Component (default in the Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch DIRECTLY on the server return ; // no client JS for this component } // Client Component — opt in for interactivity: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hooks/events need the client return ; } ``` ## Capabilități și constrângeri | | Server Component | Client Component | |---|---|---| | Poate `await` / obține date direct | ✅ | ❌ | | Acces la resursele serverului/secrete | ✅ | ❌ | | `useState`/`useEffect`/events | ❌ | ✅ | | Livrează JS la browser | ❌ (zero) | ✅ | ## De ce conteaza - **Mai puțin JavaScript client** → încărcări mai rapide și interactivitate. - **Obținerea datelor lângă sursă** (fără tur API din browser, fără expunerea credențialelor BD). - Tu le **compui**: componentele de server redau componentele de client pentru "insulele" interactive. O componentă de server poate reda una de client, dar **nu** invers. ## Gotcha Propsurile trecute peste granița server→client trebuie să fie **serializabile** — nu poți trece funcții sau instanțe de clasă. RSC schimbă modelul mental de la "totul rulează în browser" la "redă pe server în mod implicit, alege-te în client doar unde ai nevoie de interactivitate."

	Server Component	Client Component
Poate `await` / obține date direct	✅	❌
Acces la resursele serverului/secrete	✅	❌
`useState`/`useEffect`/events	❌	✅
Livrează JS la browser	❌ (zero)	✅