React Academy · Lezione

Componenti server e client in Next.js

Decida quando aggiungere 'use client' e come comporre gli alberi server e client.

Componenti server e client in Next.js è una lezione React 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 React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Il comportamento predefinito: Server Components

Nell'App Router, tutti i componenti sono Server Components per impostazione predefinita. Vengono renderizzati sul server, non includono JavaScript lato client e possono accedere direttamente a database, variabili d'ambiente e file system.

Uso dei Client Components

Aggiunga 'use client' all'inizio di un file per trasformarlo in un Client Component. Anche tutti i suoi import diventano lato client: il file crea un confine client.

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Cosa possono fare i Server Components

I Server Components possono eseguire inline il fetch dei dati con await, leggere le variabili d'ambiente, accedere al file system e importare pacchetti di grandi dimensioni disponibili solo sul server senza aumentare il bundle client.

// app/products/page.tsx — Server Component
export default async function ProductsPage() {
  const products = await db.query('SELECT * FROM products');
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Cosa non possono fare i Server Components

I Server Components non possono usare gli hook (useState, useEffect), le API del browser o i gestori degli eventi. Per queste funzionalità è necessario 'use client'.

Combinare Server e Client Components

Passi l'output di un Server Component come prop o children a un Client Component. Lo schema consigliato è mantenere il recupero dei dati nei Server Components e l'interattività nei Client Components.

// Server Component (no 'use client')
async function ProductPage({ id }) {
  const product = await getProduct(id); // direct DB call
  return <AddToCartButton product={product} />; // client component
}

// Client Component
'use client';
function AddToCartButton({ product }) {
  const [added, setAdded] = useState(false);
  return <button onClick={() => { addToCart(product); setAdded(true); }}>{added ? 'Added!' : 'Add to cart'}</button>;
}

Passare i children dal server al client

Un Server Component può passare JSX come children a un Client Component. I children rimangono renderizzati sul server, mentre il wrapper client aggiunge l'interattività.

// Client wrapper — Modal with open/close state
'use client';
function Modal({ children }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && <dialog>{children}</dialog>}
    </>
  );
}

// Server Component — passes server-fetched content into client modal
async function Page() {
  const content = await fetchContent();
  return <Modal><ServerRenderedContent data={content} /></Modal>;
}

Il confine client

L'aggiunta di 'use client' rende il file e tutti gli import dei suoi figli disponibili lato client. Per mantenere un figlio come Server Component, lo passi come prop o slot invece di importarlo direttamente.

Pattern per il recupero dei dati

Recuperi i dati nei Server Components e li passi ai componenti discendenti. Eviti, quando possibile, di recuperare i dati nei Client Components: aumenta il peso del bundle client e duplica la logica del server.

// Good: fetch in server, pass to client
async function Page() {
  const user = await getUser();
  return <UserProfile user={user} />; // client component
}

// Avoid: fetch in client
'use client';
function UserProfile() {
  const { data } = useSWR('/api/user', fetcher); // network request from browser
}

Utilità disponibili solo sul server

Il pacchetto server-only genera un errore di build se un modulo disponibile solo sul server viene importato accidentalmente in un Client Component.

// lib/db.ts
import 'server-only'; // throws at build time if imported in 'use client' file

export const db = createDbClient(process.env.DB_URL);

Condividere lo stato tra server e client

I Server Components non possono mantenere lo stato. Per condividere con i componenti client interattivi lo stato ottenuto da un fetch sul server, lo passi come prop al render iniziale e gestisca poi gli aggiornamenti nel client.

Quando aggiungere use client

Aggiunga 'use client' quando sono necessari: hook (useState, useEffect), eventi del browser (onClick), API del browser (localStorage, window) o librerie di terze parti lato client.

Verifica rapida

Che cosa deve aggiungere all'inizio di un file per usare useState o onClick nell'App Router di Next.js?

Riepilogo

Tutti i componenti dell'App Router sono Server Components per impostazione predefinita: bundle JS nullo e accesso diretto ai dati. Aggiunga 'use client' solo dove serve l'interattività. Combini i componenti passando i dati recuperati sul server come prop o children a wrapper client, mantenendo il confine client il più vicino possibile ai componenti foglia.

Domande Frequenti

La lezione «Componenti server e client in Next.js» è gratuita?

Sì — il testo completo di «Componenti server e client in Next.js» è 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 React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Componenti server e client in Next.js»?

Decida quando aggiungere 'use client' e come comporre gli alberi server e client. Eserciti React 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 React Academy?

Non è richiesta alcuna esperienza precedente. React 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 «Componenti server e client in Next.js»?

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 React Academy?

Sì. Ogni lezione React 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 React Academy