Server Components vs Client Components in Next.js, senza fuffa

Tra i concetti che confondono di più chi arriva su Next.js da altri stack c'è la distinzione tra Server Components e Client Components. Spiegata senza girarci intorno: è più semplice di quanto sembri dalla documentazione.

Cosa sono davvero i Server Components

Un Server Component viene eseguito ed elaborato sul server, e al browser arriva solo il risultato già pronto (HTML), senza il codice JavaScript del componente stesso. Meno codice da scaricare, pagina più veloce, e la possibilità di leggere dati (database, file system) direttamente dentro il componente senza passare da un'API separata. È il comportamento predefinito in Next.js: se non specifichi nulla, un componente è un Server Component.

Quando serve un Client Component

Un Client Component serve ogni volta che il componente deve reagire a qualcosa nel browser: un clic, un campo di testo che cambia, uno scroll, un timer. Tutto ciò che richiede stato interattivo o API del browser (localStorage, geolocalizzazione, eventi del mouse) deve essere un Client Component, marcato esplicitamente con la direttiva "use client" in cima al file.

L'errore più comune: renderizzare tutto lato client per abitudine

Chi viene da React "classico" (dove tutto è client-side per definizione) tende a mettere "use client" ovunque per abitudine, vanificando il vantaggio principale di Next.js. Il risultato è un sito che si comporta come una normale single-page application, con tutto il JavaScript scaricato lato client anche dove non servirebbe.

Una regola pratica per scegliere

Parti sempre da Server Component. Passa a Client Component solo quando il compilatore o il browser ti costringono a farlo, per interattività reale. E quando serve interattività solo in una piccola parte della pagina (un pulsante, un form), isola quella parte in un Client Component piccolo, lasciando tutto il resto della pagina come Server Component.