React Server Components: Massime prestazioni con meno JavaScript

React Server Components (RSC) è una delle innovazioni più significative introdotte da React, permettendo di eseguire il rendering dei componenti sul server senza inviare JavaScript extra al client. Questo riduce il bundle size e migliora le performance dell’applicazione. In questo articolo, esploreremo come funzionano i Server Components, i loro vantaggi rispetto a CSR e SSR, e vedremo alcuni esempi pratici con Next.js.

---

🔍 Cosa sono i React Server Components?

I Server Components sono componenti React che vengono eseguiti esclusivamente sul server. A differenza dei Client Components (che vengono renderizzati nel browser), i Server Components generano l’output in fase di build o runtime sul server e inviano solo HTML e dati serializzati al client.

🛠 Principali caratteristiche:

✅ Zero JavaScript sul client – Il client riceve solo HTML/CSS

✅ Accesso diretto a database e API – Eliminando il bisogno di API intermedie

✅ Ottimizzazione delle performance – Meno rendering nel client significa meno tempo di caricamento

✅ Maggiore sicurezza – Nessun codice sensibile viene esposto al client

---

🆚 Differenze tra CSR, SSR e RSC

Caratteristica	CSR (Client-Side Rendering)	SSR (Server-Side Rendering)	RSC (React Server Components)
Dove avviene il rendering?	Browser	Server (ad ogni richiesta)	Server (in fase di build o runtime)
Performance	Lento al primo caricamento	Più veloce grazie al server	Massima efficienza, nessun JS aggiuntivo
Accesso a DB/API	Solo con chiamate fetch()	Necessario API intermediaria	Accesso diretto dal server
SEO	Mediocre senza pre-rendering	Ottimo	Ottimo

 

 

 

 

 

 

 

 

 

 

 

 

👉 RSC è ideale quando vogliamo migliorare la velocità di caricamento senza sacrificare la flessibilità di React.

---

⚙️ Creare un’app con React Server Components in Next.js

Next.js ha già supporto nativo per i Server Components dalla versione 13, permettendoci di utilizzarli facilmente. Vediamo un esempio pratico.

1️⃣ Creazione del progetto Next.js con App Router

npx create-next-app@latest my-rsc-app --experimental-app
cd my-rsc-app
npm run dev

👉 Attenzione: Dobbiamo usare il nuovo App Router (app/ folder) per supportare i Server Components.

---

2️⃣ Creazione di un React Server Component

Creiamo un componente che recupera dati direttamente dal database senza passare per un’API.

📂 app/products/page.tsx

// Un Server Component che recupera i dati direttamente dal DB
import { db } from "@/lib/db"; // Immaginiamo che db sia un'istanza Prisma

export default async function ProductList() {
    const products = await db.product.findMany(); // Query diretta al database
    return (
        <div>
            <h1>Lista Prodotti</h1>
            <ul>
                {products.map((product) => (
                    <li key={product.id}>{product.name} - {product.price}€</li>
                ))}
            </ul>
        </div>
    );
}

🚀 Nessun fetch(), nessuna API intermediaria! React eseguirà questa query direttamente sul server e invierà al client solo l’HTML generato.

---

3️⃣ Quando usare un Client Component?

Non tutto può essere un Server Component. Ad esempio, gli eventi onClick o useState funzionano solo nei Client Components.

📂 app/cart/AddToCart.tsx

"use client"; // Indica che è un Client Component
import { useState } from "react";

export default function AddToCart() {
    const [count, setCount] = useState(0);
    
    return (
        <button onClick={() => setCount(count + 1)}>
            Aggiungi al carrello ({count})
        </button>
    );
}

💡 Regola d’oro:

✅ Usa Server Components per il recupero dati, ottimizzazione performance e sicurezza.

✅ Usa Client Components per interazioni utente, stato locale e animazioni.

---

🌟 Vantaggi dei React Server Components

✅ Minore uso di JavaScript → Più velocità e meno risorse nel browser

✅ Migliore esperienza utente → Meno attese per il caricamento dei dati

✅ Perfetto per siti con molti contenuti → Blog, e-commerce, dashboard di analisi

✅ Ottimizzazione SEO → Il contenuto viene generato già pronto per i motori di ricerca

---

📌 Conclusione

React Server Components rappresentano un passo avanti nella performance e ottimizzazione delle applicazioni web. Con Next.js 13+, possiamo integrarli facilmente nei nostri progetti, migliorando la UX e riducendo il codice eseguito lato client. Se vuoi velocizzare le tue app React, i Server Components sono la strada giusta da percorrere! 💡✨

📣 E tu? Hai già provato i React Server Components? Condividi la tua esperienza nei commenti! 🚀