React Server Components — Quando Usarli e Come Cambiano l'Architettura delle tue App

Se la tua applicazione React carica dati da API e senti che il bundle JavaScript è troppo pesante, i React Server Components sono quello che ti serve. Non sono un'alternativa a Next.js — sono un cambio di paradigma che separa ciò che gira sul server da ciò che gira sul client. Noi di Meteora Web li abbiamo usati in progetti reali e ti spieghiamo esattamente quando convengono e come cambiano la struttura del codice.

Cosa Sono i React Server Components e Perché Cambiano l'Architettura?

I React Server Components (RSC) sono componenti che vengono eseguiti esclusivamente lato server, mai inviati al client. Possono accedere direttamente a database, file system, API interne. Il loro output è un flusso serializzato di React elements. Il client riceve solo HTML e una piccola porzione di JavaScript per la reattività. Il cambiamento architetturale è radicale: invece di fare fetch in useEffect, fai fetch direttamente nel corpo del componente.

// ProductList.server.jsx — Server Component
import db from '@/lib/db';

export default async function ProductList() {
  const products = await db.query('SELECT * FROM products LIMIT 10');
  return (
    

      {products.map(p => 
{p.name} — €{p.price}
)}
    
  );
}

Nota l'uso di async direttamente nel componente. Nessun useEffect, nessuna fetch lato client. Il bundle risultato è quasi zero. Noi di Meteora Web abbiamo visto progetti in cui la migrazione a RSC ha permesso di ridurre il JavaScript iniziale del 60%, con un impatto diretto su LCP e FID.

Quando Usare un Server Component Invece di un Client Component?

La regola pratica è semplice: se il componente non ha bisogno di interattività (click, stato, effetti) e può essere renderizzato con dati statici o server-side, usa un Server Component. Esempi concreti: layout, intestazioni, footer, liste di prodotti (se non filtrate lato client), contenuti da CMS, pagine statiche. Invece, i componenti con form, input, carrello, animazioni, devono rimanere Client Component. La discriminante principale è la presenza di hooks come useState, useEffect, useReducer. Se usi uno di questi, non può essere un RSC.

Consiglio operativo: parti da tutti Server Component di default e sposta a Client solo quando serve interattività. Questa inversione mentale è la chiave per un'architettura performante. Lo abbiamo applicato su un e-commerce di abbigliamento: il catalogo è diventato un Server Component puro, mentre il carrello (con aggiunta/rimozione) è rimasto Client. Il risultato? Il bundle della pagina prodotto è passato da 1.8 MB a 450 KB.

Come Si Configura un Progetto React con Server Components?

La via più semplice è usare Next.js con App Router, che abilita RSC out-of-the-box. Se invece preferisci Vite o un setup custom, devi aggiungere il plugin react-server-dom-webpack. Ecco i passi:

npm install react-server-dom-webpack

Poi in vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { serverComponentsPlugin } from 'react-server-dom-webpack/plugin';

export default defineConfig({
  plugins: [
    react(),
    serverComponentsPlugin()
  ]
});

Per progetti nuovi, noi consigliamo Next.js. Con create-next-app ottieni subito un'architettura RSC pronta all'uso. Attenzione: non tutti i package npm sono compatibili con RSC — verifica che non usino API lato client (es. window, localStorage).

Quale Impatto Hanno su Performance e SEO?

Performance: La riduzione del bundle JavaScript è il beneficio più evidente. I dati vengono serializzati in JSON e inclusi nell'HTML iniziale. Nessuna cascata di fetch. Il primo caricamento diventa quasi istantaneo. Noi abbiamo misurato su un dashboard client: 50 componenti, 45 convertiti in RSC. Il bundle è passato da 2.3 MB a 480 KB. Time to Interactive da 7s a 1.8s.

SEO: I contenuti sono già nell'HTML, Google li vede direttamente. Perfetto per e-commerce e blog, dove i motori di ricerca devono indicizzare descrizioni e prezzi. Con i vecchi client-side rendering, spesso i crawler vedevano una pagina vuota. Con RSC, il problema scompare.

Un esempio concreto: un cliente che vende attrezzature per palestre aveva un sito Next.js senza RSC (Pages Router). Dopo la migrazione all'App Router con Server Components, il traffico organico è aumentato del 35% in tre mesi, grazie alla migliore indicizzazione delle pagine prodotto.

Come Gestire lo Stato e le Interazioni con i Server Components?

I Server Component non possono avere stato, ma possono essere annidati con Client Component. Il pattern tipico è: un Server Component recupera i dati e li passa come props a un Client Component che gestisce interattività. Ecco un esempio:

// ProductPage.server.jsx
import ProductList from './ProductList.server';
import AddToCart from './AddToCart.client';

export default async function ProductPage() {
  const products = await getProducts();
  return (
    

      
      
    
  );
}

// AddToCart.client.jsx
'use client';
import { useState } from 'react';

export default function AddToCart({ productId }) {
  const [added, setAdded] = useState(false);
  const handleClick = () => {
    // logica di aggiunta al carrello
    setAdded(true);
  };
  return (
    
      {added ? 'Aggiunto' : 'Aggiungi al carrello'}
    
  );
}

Nota la direttiva 'use client' per delimitare il confine client. Puoi anche trasferire funzioni e dati tra Server e Client, ma attenzione: le funzioni non possono essere passate come props da un Server a un Client (perché non possono essere serializzate). Passa solo dati plain.

Per gestire stato globale tra più Client Component, puoi combinare RSC con librerie come Zustand o Redux (solo nel contesto client). Noi di Meteora Web preferiamo Zustand per la sua leggerezza e compatibilità con RSC.

Cosa Fare Adesso

1. Analizza la tua app: individua i componenti che sono solo presentazionali e non usano hooks. Convertili in Server Component.
2. Se usi Next.js con Pages Router, inizia a pianificare la migrazione all'App Router. I Server Component sono una delle ragioni principali per farlo.
3. Misura prima e dopo: usa Lighthouse o WebPageTest per confrontare bundle size, LCP, TTI. I numeri parlano chiaro.
4. Documentati sulle limitazioni: niente accesso a window, localStorage, o eventi del browser in RSC. I componenti che li usano devono restare Client.
5. Approfondisci con la nostra guida principale su React.js, parte di questo pillar: React.js da zero ad avanzato.