1 
2I React Server Components (RSC) hanno cambiato radicalmente il modo in cui costruiamo le applicazioni React. Spostando la logica di rendering sul server, possiamo ridurre significativamente il bundle JavaScript inviato al client, portando a tempi di caricamento più rapidi e una migliore esperienza utente. In questo articolo, esploreremo pattern avanzati e best practice per sfruttare gli RSC nel 2026.
3 
4## Cosa sono i Server Components?
5 
6Tradizionalmente, i componenti React venivano renderizzati interamente sul client (CSR) o pre-renderizzati sul server come HTML (SSR) e poi idratati sul client. I **Server Components** ci permettono di renderizzare i componenti _esclusivamente_ sul server. Il loro codice non viene mai inviato al browser.
7 
8### I Benefici
9 
101.  **Zero Bundle Size**: Le dipendenze usate nei Server Components (come parser markdown o librerie pesanti per le date) rimangono sul server.
112.  **Accesso Diretto al Backend**: Puoi interrogare il tuo database direttamente all'interno del componente senza esporre endpoint API.
123.  **Code Splitting Automatico**: I componenti client importati lato server vengono automaticamente suddivisi.
13 
14## Pattern di Data Fetching
15 
16Con gli RSC, puoi rendere i tuoi componenti `async` e attendere i dati direttamente.
17 
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21 
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24 
25  return (
26    <main>
27      <h1>Utenti</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37 
38### Suspense per lo Streaming
39 
40Poiché il recupero dei dati può essere lento, avvolgi i tuoi componenti in `<Suspense>` per mostrare immediatamente un'interfaccia utente di fallback mentre i dati vengono caricati.
41 
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46 
47export default function Page() {
48  return (
49    <section>
50      <h1>I Miei Utenti</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58 
59## Combinare Server e Client Components
60 
61Uno degli aspetti più confusi è come combinare componenti Server e Client.
62 
63**Regola d'oro**: I Server Components possono importare Client Components. I Client Components _non possono_ importare direttamente i Server Components. Tuttavia, puoi passare un Server Component come `children` a un Client Component.
64 
65### Il Pattern "Children"
66 
67```tsx
68// ClientComponent.tsx
69'use client';
70 
71import { useState } from 'react';
72 
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75 
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      Conteggio: {count}
79      {children} {/* Questo può essere un Server Component! */}
80    </div>
81  );
82}
83```
84 
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89 
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* Funziona perfettamente */}
94    </ClientWrapper>
95  );
96}
97```
98 
99## Trappole Comuni
100 
1011.  **Usare il Context nei Server Components**: Il Context è un concetto lato client. Se devi condividere dati lato server, passali come props o usa una cache specializzata per richiesta.
1022.  **Aggiungere Event Handler**: Non puoi aggiungere `onClick` o `onChange` a un Server Component. Quella logica appartiene a un nodo foglia generico Client Component.
103 
104## Conclusione
105 
106I React Server Components non sono solo una funzionalità; sono un cambio di paradigma. Comprendendo il confine tra server e client, puoi costruire applicazioni che sono sia altamente interattive che incredibilmente veloci.
107