Capire il Confine Server/Client
Le React Server Components (RSC) consentono ai componenti di eseguire il rendering sul server, riducendo la dimensione del pacchetto e migliorando le prestazioni. Tuttavia, comprendere quando utilizzare componenti server rispetto a client è fondamentale.
Modelli di Architettura
1. Estrapolazione dei Dati a Livello di Componente
I componenti server possono accedere direttamente ai database, ai sistemi di file e ad altre risorse del server senza endpoint API.
async function ListaProdotti() {
const prodotti = await db.prodotto.findMany({ where: { published: true } });
return (
<div className="grid grid-cols-3 gap-4">
{prodotti.map(p => <CardProdotto key={p.id} prodotto={p} />)}
</div>
);
}2. Azioni del Server per le Mutazioni
Le Azioni del Server consentono di scrivere funzioni asincrone che eseguono il rendering sul server e possono essere chiamate dai componenti client.
"use server";
export async function creaProdotto(datiForm) {
const prodotto = await db.prodotto.create({ data: { nome: datiForm.get("nome") } });
revalidatePath("/prodotti");
return { success: true, prodotto };
}Trappole Comuni
- Non è possibile passare funzioni come proprietà dai componenti server ai componenti client
- Non è possibile utilizzare useState o useEffect nei componenti server
- Spingare "use client" il più in basso possibile nella gerarchia dei componenti
- I componenti server non possono gestire le interazioni degli utenti — utilizzare i componenti client per questo scopo
Impatto sulla Prestazione
Nel nostro'applicazione di produzione, il passaggio a RSC ha ridotto il pacchetto JavaScript di 35% e migliorato il Tempo di Interazione di 40%. L'insight chiave: i componenti server non sono solo per le prestazioni — sono per la chiarezza architettonica.
Conclusione
RSC è un cambiamento di paradigma, non solo una funzionalità. Pensare al confine server/client già nelle decisioni di architettura è fondamentale.
