React Server Components (RSC) eseguono il rendering solo sul server — il loro JavaScript non viene mai inviato al browser. Nell'App Router, ogni componente è un Server Component per impostazione predefinita; attivi il comportamento client in modo esplicito.
db ;
() {
users = db..();
(
);
}
I Server Components possono essere async, await direttamente i dati e accedere a risorse solo server (database, filesystem, segreti) — perché vengono eseguiti sul server. Non è necessario un livello API per recuperare i dati e i segreti non raggiungono mai il client.
Il browser riceve il rendering HTML/UI, non il codice del componente o le sue dipendenze. Un Server Component che utilizza una libreria markdown o date pesante non invia nessuna di quella libreria al browser — riducendo drasticamente la dimensione del bundle.
// ❌ these only work in Client Components
useState, useEffect, useRef // hooks (no interactivity/state on the server)
onClick, onChange // event handlers
window, localStorage, document // browser-only APIs
Nessuna interattività, stato, effetti o API browser — quelli richiedono un Client Component.
// Server Component fetches data, passes it to an interactive Client Component
import LikeButton from "./LikeButton"; // a "use client" component
export default async function Post({ id }) {
const post = await getPost(id); // server-side fetch
return <><Article post={post} /><LikeButton postId={id} /></>;
}
Il pattern: i Server Components gestiscono dati/struttura; incorpora Client Components solo dove è necessaria l'interattività ("isole").
I Server Components sono la caratteristica distintiva dell'App Router.
Riducono la dimensione del bundle client (meno JS da scaricare/analizzare), consentono l'accesso diretto ai dati lato server sicuro senza un'API e migliorano le prestazioni e la SEO.
Sapere che sono l'impostazione predefinita — e cosa forza un componente a essere un Client Component — è fondamentale per strutturare app App Router in modo efficiente.