📋 Indice
🚀 Introduzione
I React Server Components rappresentano una delle innovazioni più significative nell'ecosistema React degli ultimi anni. Introdotti per la prima volta da Meta nel 2020 e ora completamente supportati in Next.js 13+, offrono un nuovo paradigma per il rendering delle applicazioni React.
In questa guida esploreremo tutto quello che c'è da sapere su questa tecnologia, dai concetti base all'implementazione pratica.
⚙️ Cosa sono i Server Components
I React Server Components sono componenti che vengono renderizzati sul server invece che nel browser. A differenza del tradizionale Server-Side Rendering (SSR), i Server Components non vengono mai ri-renderizzati sul client.
💡 Differenze chiave:
- Server Components: Renderizzati solo sul server
- Client Components: Renderizzati nel browser
- SSR: Renderizzati sul server e poi ri-idratati nel browser
Esempio di Server Component
// app/posts/page.tsx (Server Component)
import { getPosts } from '@/lib/api'
export default async function PostsPage() {
// Questo codice viene eseguito solo sul server
const posts = await getPosts()
return (
<div>
<h1>I miei Post</h1>
{posts.map(post => (
<article key={post.id}>
<h2>{post.title}</h2>
<p>{post.excerpt}</p>
</article>
))}
</div>
)
}✅ Vantaggi e svantaggi
👍 Vantaggi
- • Bundle JavaScript più leggero
- • Accesso diretto a risorse server
- • Migliori performance di caricamento
- • SEO ottimizzato
- • Sicurezza migliorata
⚠️ Limitazioni
- • No interattività (onClick, useState, ecc.)
- • No accesso a API del browser
- • Curva di apprendimento
- • Debugging più complesso
🛠️ Implementazione pratica
1. Setup Next.js 13+
npx create-next-app@latest my-app --typescript --tailwind --app
2. Creazione di un Server Component
// app/dashboard/page.tsx
import { getUserData } from '@/lib/auth'
import { UserCard } from '@/components/user-card'
export default async function Dashboard() {
const user = await getUserData()
return (
<div className="p-6">
<h1>Dashboard</h1>
<UserCard user={user} />
</div>
)
}3. Composizione con Client Components
// components/user-card.tsx (Server Component)
import { InteractiveButton } from './interactive-button'
export function UserCard({ user }) {
return (
<div className="card">
<h2>{user.name}</h2>
<p>{user.email}</p>
{/* Client Component per interattività */}
<InteractiveButton userId={user.id} />
</div>
)
}
// components/interactive-button.tsx (Client Component)
'use client'
export function InteractiveButton({ userId }) {
const [loading, setLoading] = useState(false)
const handleClick = () => {
setLoading(true)
// logica di interazione
}
return (
<button onClick={handleClick} disabled={loading}>
{loading ? 'Loading...' : 'Interagisci'}
</button>
)
}📋 Best Practices
🎯 Quando usare Server Components
- • Fetching di dati dal database
- • Rendering di contenuto statico
- • Operazioni costose sul server
- • Accesso a variabili d'ambiente sensibili
⚡ Ottimizzazioni
- • Usa Suspense per loading states
- • Implementa streaming per UX migliore
- • Minimizza la boundary tra server e client
- • Cache appropriatamente i dati
🎉 Conclusioni
I React Server Components rappresentano un cambio di paradigma significativo che può portare benefici enormi in termini di performance e user experience. Tuttavia, richiedono un approccio diverso al design delle applicazioni React.
La chiave del successo è comprendere quando e come utilizzarli in combinazione con i Client Components tradizionali, creando un'architettura ibrida ottimale.