Frontend Academy · Lezione

Server Components e Client Components

Capire i React Server Components, quando aggiungere la direttiva 'use client' e come combinare HTML renderizzato sul server con isole client interattive

Server Components e Client Components è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Due mondi in una sola app

React Server Components (RSC) consentono di suddividere un albero tra parti renderizzate sul server e parti interattive sul client. Nell'App Router di Next.js, i componenti sono Server per impostazione predefinita; scelga Client con 'use client'.

Cosa fanno i Server Components

I Server Components vengono eseguiti solo sul server. Possono: recuperare dati direttamente, accedere al filesystem, utilizzare segreti disponibili solo sul server e eseguire il rendering in HTML senza inviare React al client. Non possono: usare hook, gestire lo stato o gestire eventi.

Cosa fanno i Client Components

I Client Components vengono eseguiti sul server per l'SSR (HTML iniziale) e sul client per l'interattività. Possono: usare useState, useEffect, gestori di eventi e API del browser.

Per impostazione predefinita è Server

Nell'App Router di Next.js, ogni componente è un Server Component per impostazione predefinita. È una scelta ottima: la maggior parte dell'app viene sottoposta a rendering statico.

// app/posts/page.tsx — Server Component by default
export default async function Posts() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Scegliere Client esplicitamente

Aggiunga 'use client' all'inizio di un file per indicare che i suoi componenti (e i relativi import) sono Client Components.

// app/Counter.tsx
'use client';

import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Comporre Server e Client

I Server Components possono eseguire il rendering dei Client Components, ma i Client Components non possono importare Server Components. Passi il contenuto renderizzato sul server come children ai wrapper Client.

// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';

export default function Home() {
  return (
    <ClientShell>
      <ServerWidget />
    </ClientShell>
  );
}

Perché questo schema è importante

Bundle JavaScript più piccoli: solo i Client Components vengono inviati al browser. Accesso diretto a database e file: non serve un livello API per i dati di sola lettura. SEO migliore e LCP più rapido: l'HTML arriva già completamente renderizzato.

Regole dei confini Client

Quando un file viene contrassegnato con 'use client', tutti i componenti presenti in quel file e i relativi figli importati diventano Client Components. 'use client' definisce un confine tra server e client.

Server Actions

Le funzioni contrassegnate con 'use server' vengono eseguite solo sul server, ma possono essere chiamate dai Client Components, come avviene con RPC. Vengono spesso utilizzate per l'invio di moduli e le mutazioni.

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.posts.create({ data: { title } });
  revalidatePath('/posts');
}

// In a Client form component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

Passare props dal server al client

Le props passate dal Server al Client devono essere serializzabili in JSON: niente funzioni, classi o Date con forme personalizzate. Le converta prima di passarle.

Riconoscere ciascun tipo

Osservi gli import: useState, useEffect e i gestori onClick obbligano un componente a essere un Client Component. Una semplice visualizzazione di dati può rimanere Server.

Vantaggi in termini di prestazioni

I Server Components riducono drasticamente le dimensioni del bundle JavaScript. Una pagina con contenuto prevalentemente statico e pochi widget interattivi invia al browser solo il JavaScript delle parti interattive, a volte con una riduzione del 90%.

Verifica rapida

Quale hook di React NON è consentito in un Server Component di Next.js?

Riepilogo: Server e Client

Server Components: vengono eseguiti solo sul server, supportano async/await, ma non hook, stato o gestori, e producono bundle più piccoli. Client Components: si attivano con 'use client' e supportano l'interattività tramite useState/useEffect/eventi. Il Server può eseguire il rendering del Client; il Client non può importare il Server, ma può riceverlo come children. Le Server Actions ('use server') servono per mutazioni in stile RPC.

Domande Frequenti

La lezione «Server Components e Client Components» è gratuita?

Sì — il testo completo di «Server Components e Client Components» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Server Components e Client Components»?

Capire i React Server Components, quando aggiungere la direttiva 'use client' e come combinare HTML renderizzato sul server con isole client interattive Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Server Components e Client Components»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Frontend Academy