React

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.

In sintesi

  • I Server Components vengono eseguiti sul server e il loro codice non entra nel bundle del browser.
  • Il confine si segna con la direttiva use client: da lì in giù il componente diventa client.
  • Non sostituiscono i Client Components: servono a spostare dati e dipendenze pesanti fuori dal browser.

“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.

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

  • Pagine che leggono dati: una query al database nel componente elimina l'endpoint intermedio e la cascata di richieste.
  • Segreti e chiavi API: restano sul server, perché il codice non viene serializzato verso il browser.
  • Dipendenze pesanti: parser, formattatori e librerie di markdown non entrano nel bundle se restano dal lato server.

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.

Domande frequenti

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.