# React Server Components: cosa sono e quando usarli

I React Server Components girano solo sul server: il loro codice non arriva al browser e possono leggere dati senza API intermedia. Richiedono un framework che li supporti.

> Pagina: https://ui.eneawork.it/blog/react-server-components-guida
> Markdown: https://ui.eneawork.it/blog/react-server-components-guida.md

*2026-11-01*

“React server components” sono componenti che React esegue solo sul server: il loro codice non viene inviato al browser e possono leggere dati direttamente, senza un'API intermedia.

Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati da /api/stats il 1 novembre 2026. La cifra viene da una query all'endpoint, non da una stima: conta i record pubblicati, non la qualità dei componenti.

## Dove passa il confine

In un'applicazione che li supporta, ogni componente è un Server Component finché non trovi la direttiva use client. Da quel punto in giù il componente e i suoi figli importati diventano Client Components, con stato, effetti e gestori di eventi. Le prop che attraversano il confine devono essere serializzabili: funzioni e classi non passano.

## Cosa cambia nel bundle

Il codice di un Server Component non arriva al browser, quindi una libreria pesante usata per formattare date o renderizzare markdown non pesa sul JavaScript scaricato. I Client Components continuano a essere spediti per intero. Il guadagno dipende da quanto codice riesci a tenere dal lato server, non dal numero di componenti.

## Un progetto per provarli

npx create-next-app@latest rsc-demo --ts --app --no-tailwind cd rsc-demo npm run dev

Next.js, distribuito con licenza MIT, è l'implementazione di riferimento. Il file app/page.tsx è un Server Component per impostazione predefinita: aggiungi async alla funzione, leggi un dato e restituisci il markup. Per un pulsante con stato crea un secondo file con use client in cima e importalo.

## Quando usarli

## Un record vivo

Nel catalogo EneUI due componenti mostrano il confine in pratica: chart è un Client Component perché disegna e reagisce al mouse, sonner gestisce notifiche con stato locale. Entrambi sono React su primitive Radix con licenza MIT; le sezioni complete sono in 1.556 blocchi.

## La limitazione

I Server Components non sono una funzione che attivi in un progetto React qualsiasi: servono un bundler e un server che implementino il protocollo. Oggi il percorso stabile passa da Next.js; le integrazioni con altri strumenti esistono ma sono più giovani. Se il tuo hosting è solo statico, il modello non è disponibile.

## Dove continuare

L'errore più frequente è in un Server Component importa un hook; lo streaming che li accompagna è in streaming e Suspense; il confronto con un framework a isole è in Astro vs Next.js.

## FAQ

### I Server Components sostituiscono i Client Components?

No. I due modelli convivono: i Server Components leggono dati e producono markup, i Client Components gestiscono stato, eventi ed effetti nel browser.

### Posso usare gli hook in un Server Component?

No. useState, useEffect e gli altri hook richiedono un componente client. In un Server Component puoi usare async e await, non gli hook.

### React Server Components funzionano con Vite?

Non con lo stesso supporto di Next.js. Esistono integrazioni sperimentali, ma il percorso documentato e stabile passa da un framework che implementa il protocollo.

### I Server Components riducono sempre il JavaScript inviato?

No. Riducono solo il codice dei componenti che restano sul server. Un albero di Client Components viene spedito per intero, anche se il genitore è un Server Component.

### Perché una prop funzione non arriva a un Client Component?

Perché le prop che attraversano il confine devono essere serializzabili. Le funzioni non lo sono: vanno sostituite da Server Actions o definite dentro il componente client.