React Server Components spiegati semplice

Il problema del troppo JavaScript

Le single page application tradizionali inviano al browser grandi quantita di JavaScript: tutto il codice dei componenti, anche quello che serve solo a mostrare dati statici. I React Server Components (RSC) nascono per risolvere questo problema.

Server Component vs Client Component

Un Server Component viene eseguito sul server: puo leggere dati, accedere al database e produrre HTML, senza inviare il proprio codice al browser. Un Client Component viene invece spedito al browser ed e necessario per l'interattivita (stato, eventi, hook come useState).

// Server Component: nessun JS inviato al client
async function ProfiloUtente({ id }: { id: string }) {
  const utente = await db.utenti.findById(id);
  return <h1>{utente.nome}</h1>;
}

// Client Component: serve "use client"
"use client";
import { useState } from "react";
function Contatore() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

La regola pratica

La regola che seguiamo: tutto Server Component per default, Client Component solo quando c'e interattivita. Cosi il browser riceve molto meno JavaScript e le pagine sono piu veloci da caricare.

Cosa cambia nel design

Con gli RSC il data fetching si avvicina ai componenti che usano i dati, riducendo il prop drilling e gli stati di caricamento intermedi. E un cambio di mentalita, ma porta applicazioni piu leggere.

In MUSTNODE sfruttiamo gli RSC per ridurre il peso delle pagine e migliorare le performance percepite dagli utenti.