Cosa sono React Server Components e in che modo differiscono dai componenti client?

Question

Accepted Answer

**Server Components (RSC)** si renderizzano sul **server** e inviano il risultato serializzato al browser. Inviano **zero JavaScript** per se stessi — solo i dati/markup, non il loro codice. ## I due tipi ```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 ; } ``` ## Capacità e vincoli | | Server Component | Client Component | |---|---|---| | Può `await` / recuperare dati direttamente | ✅ | ❌ | | Accesso alle risorse/segreti del server | ✅ | ❌ | | `useState`/`useEffect`/events | ❌ | ✅ | | Invia JS al browser | ❌ (zero) | ✅ | ## Perché è importante - **Meno JavaScript client** → caricamenti e interattività più veloci. - **Recupero dei dati accanto alla fonte** (nessun round-trip API dal browser, nessuna esposizione di credenziali DB). - Puoi **comporli**: i componenti server renderizzano i componenti client per le "isole" interattive. Un componente server può renderizzare un client, ma **non** il contrario. ## Gotcha I props passati attraverso il confine server→client devono essere **serializzabili** — non puoi passare funzioni o istanze di classe. RSC cambia il modello mentale da "tutto viene eseguito nel browser" a "renderizza sul server per impostazione predefinita, scegli il client solo dove hai bisogno di interattività."

	Server Component	Client Component
Può `await` / recuperare dati direttamente	✅	❌
Accesso alle risorse/segreti del server	✅	❌
`useState`/`useEffect`/events	❌	✅
Invia JS al browser	❌ (zero)	✅