React Academy · Lezione

Server Action per le mutation dei dati

Definisca funzioni 'use server' per gestire le mutation dei form e invalidi la cache con revalidatePath.

Server Action per le mutation dei dati è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 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.

Che cosa sono le Server Actions

Le Server Actions sono funzioni asincrone contrassegnate con 'use server' che vengono eseguite esclusivamente sul server. Consentono di inviare moduli ed eseguire mutazioni dei dati senza scrivere gestori di route API.

Definire una Server Action

Aggiunga 'use server' all'inizio della funzione (o del file) per creare una Server Action. Può essere definita solo nei Server Components o in file actions.ts dedicati.

// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

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

Utilizzare le Action nei moduli

Passi la funzione action alla prop action di un modulo. Non servono onSubmit né un gestore di eventi: Next.js serializza il modulo e chiama l'action lato server.

import { createPost } from './actions';

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Post title" required />
      <button type="submit">Create</button>
    </form>
  );
}

Hook useActionState

useActionState (React 19) avvolge un'action per tenere traccia dello stato di attesa e ricevere nel componente il valore restituito dall'action.

'use client';
import { useActionState } from 'react';
import { createPost } from './actions';

const initialState = { error: null };

export function PostForm() {
  const [state, action, isPending] = useActionState(createPost, initialState);
  return (
    <form action={action}>
      {state.error && <p className="error">{state.error}</p>}
      <input name="title" />
      <button disabled={isPending}>{isPending ? 'Creating...' : 'Create'}</button>
    </form>
  );
}

Restituire errori di validazione

Restituisca un oggetto dall'action invece di generare un'eccezione, per passare gli errori di validazione al modulo tramite useActionState.

export async function createPost(prevState: any, formData: FormData) {
  'use server';
  const title = formData.get('title') as string;
  if (!title || title.length < 3) {
    return { error: 'Title must be at least 3 characters' };
  }
  await db.post.create({ data: { title } });
  revalidatePath('/blog');
  redirect('/blog');
}

Server Actions nei gestori di eventi

Chiami le Server Actions dai gestori di eventi dei Client Components, non solo dalle action dei moduli, importandole e chiamandole direttamente.

'use client';
import { deletePost } from './actions';

export function DeleteButton({ id }: { id: string }) {
  return (
    <button onClick={() => deletePost(id)}>
      Delete
    </button>
  );
}

Server Actions inline

Definisca le Server Actions inline in un Server Component utilizzando una funzione con 'use server' al suo interno: è utile per mantenere la logica delle mutazioni vicino al codice che la utilizza.

export default function PostPage({ post }) {
  async function updatePost(formData: FormData) {
    'use server';
    await db.post.update({ where: { id: post.id }, data: { title: formData.get('title') as string } });
    revalidatePath(`/blog/${post.id}`);
  }

  return (
    <form action={updatePost}>
      <input name="title" defaultValue={post.title} />
      <button type="submit">Save</button>
    </form>
  );
}

useOptimistic con le Server Actions

Abbini useOptimistic alle Server Actions per aggiornare immediatamente l'interfaccia mentre l'action viene eseguita in background.

'use client';
import { useOptimistic } from 'react';
import { addItem } from './actions';

export function TodoList({ items }) {
  const [optimisticItems, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem]);
  return (
    <form action={async (formData) => {
      addOptimistic({ id: 'temp', text: formData.get('text') });
      await addItem(formData);
    }}>
      <ul>{optimisticItems.map(i => <li key={i.id}>{i.text}</li>)}</ul>
      <input name="text" /><button>Add</button>
    </form>
  );
}

Considerazioni sulla sicurezza

Le Server Actions sono endpoint POST sottostanti. Convalidi e sanifichi sempre gli input lato server, verifichi l'autenticazione e utilizzi la protezione CSRF (Next.js la gestisce automaticamente per le richieste della stessa origine).

Rivalidare dopo le mutazioni

Chiami revalidatePath() o revalidateTag() dopo una mutazione per svuotare le cache pertinenti, così il caricamento successivo della pagina rifletterà la modifica.

Verifica rapida

Come si passa una Server Action a un modulo nel Next.js App Router?

Riepilogo

Le Server Actions sono funzioni asincrone 'use server' che gestiscono le mutazioni lato server. Le colleghi ai moduli tramite la prop action, ne monitori lo stato con useActionState, restituisci gli errori invece di generarli per la validazione e rivalidi le cache dopo le mutazioni.

Domande Frequenti

La lezione «Server Action per le mutation dei dati» è gratuita?

Sì — il testo completo di «Server Action per le mutation dei dati» è 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 «Server Action per le mutation dei dati»?

Definisca funzioni 'use server' per gestire le mutation dei form e invalidi la cache con revalidatePath. 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 4 di 4.

Quanto tempo richiede la lezione «Server Action per le mutation dei dati»?

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