Next.js 15 e Server Components: guida pratica dopo 6 mesi in produzione

Il cambio di mentalità fondamentale

Con Next.js 15 e l'App Router, la domanda non è più "come faccio il fetch?". È "dove vive questo dato?".

I Server Components sono il default. Ogni componente è server-side a meno che tu non aggiunga "use client" in cima. Questa inversione semplifica enormemente la maggior parte dei casi d'uso.

Quando usare Client Components

La regola pratica che uso:

• Hai bisogno di useState o useEffect? → Client Component
• Gestisci eventi del browser (click, form, scroll)? → Client Component
• Usi una libreria che non supporta SSR? → Client Component
• Tutto il resto → Server Component

Il pattern "push client down"

Tieni i Client Components il più in basso possibile nell'albero. Un errore comune è rendere client un layout intero quando solo un bottone ha bisogno di interattività.

// Evita: tutto il layout diventa client
"use client";
export default function Layout({ children }) { ... }

// Preferisci: solo il componente interattivo è client
export default function Layout({ children }) {
  return (
    <div>
      <ThemeToggle /> {/* "use client" solo qui */}
      {children}       {/* rimane server */}
    </div>
  );
}

Conclusioni

Dopo 6 mesi in produzione su una piattaforma con 50k+ utenti attivi, la scelta di Next.js 15 con App Router si è rivelata solida. La curva di apprendimento esiste, ma il payoff in termini di performance e DX vale.