React Server Components in produzione: cosa ho cambiato

Ho migrato una dashboard reale a React Server Components. Il guadagno c’è, ma solo dopo aver disimparato qualche abitudine da SPA.

Il default è il server

La regola che mi ripeto: un componente è server finché non ha un motivo per essere client. Il fetch avviene dove vivono i dati, senza useEffect.

// Server Component: niente "use client"
import { getMetriche } from "@/lib/db";
import { Grafico } from "./Grafico";

export default async function Dashboard() {
  const metriche = await getMetriche();

  return (
    <section>
      <h1>Andamento</h1>
      <Grafico dati={metriche} />
    </section>
  );
}

L’isola client resta piccola

Solo la parte interattiva diventa client. Il confine è netto e le props attraversano la serializzazione.

"use client";

import { useState } from "react";

export function Grafico({ dati }: { dati: number[] }) {
  const [range, setRange] = useState<"7g" | "30g">("7g");
  // rendering interattivo del grafico
  return <div data-range={range}>{/* ... */}</div>;
}

Di cosa mi pento

Ho spinto troppo presto la logica di autorizzazione nei componenti. Andava tenuta in un layer separato: mescolarla al rendering ha reso i test più fragili. La prossima volta parto dal confine dati, non dai componenti.