M

MLOG

Italiano

Esplora React Server Actions, una potente funzionalità per gestire gli invii di moduli e le mutazioni dei dati direttamente sul server, semplificando lo sviluppo React e migliorando la sicurezza.

React Server Actions: Elaborazione dei moduli lato server semplificata

React Server Actions, introdotto in React 18 e significativamente migliorato in Next.js, offre un approccio rivoluzionario alla gestione degli invii di moduli e delle mutazioni dei dati direttamente sul server. Questa potente funzionalità semplifica il processo di sviluppo, migliora la sicurezza e aumenta le prestazioni rispetto al tradizionale recupero e manipolazione dei dati lato client.

Cosa sono i React Server Actions?

Le Server Actions sono funzioni asincrone che vengono eseguite sul server e possono essere invocate direttamente dai componenti React. Consentono di eseguire attività lato server, come:

Il vantaggio principale delle Server Actions è che consentono di scrivere codice lato server all'interno dei componenti React, eliminando la necessità di percorsi API separati e una complessa logica di recupero dati lato client. Questa co-locazione dell'UI e della logica lato server porta a una base di codice più gestibile ed efficiente.

Vantaggi dell'utilizzo di React Server Actions

L'utilizzo di React Server Actions offre diversi vantaggi significativi:

Sviluppo semplificato

Le Server Actions riducono il codice boilerplate consentendo di gestire gli invii di moduli e le mutazioni dei dati direttamente all'interno dei componenti React. Ciò elimina la necessità di endpoint API separati e una complessa logica di recupero dati lato client, semplificando il processo di sviluppo e rendendo il codice più facile da capire e gestire. Considera un semplice modulo di contatto. Senza Server Actions, sarebbe necessario un percorso API separato per gestire l'invio del modulo, JavaScript lato client per inviare i dati e la logica di gestione degli errori sia sul client che sul server. Con Server Actions, tutto questo può essere gestito all'interno del componente stesso.

Maggiore sicurezza

Eseguendo il codice sul server, le Server Actions riducono la superficie di attacco dell'applicazione. I dati sensibili e la logica di business vengono tenuti lontani dal client, impedendo agli utenti malintenzionati di manometterli. Ad esempio, le credenziali del database o le chiavi API non vengono mai esposte nel codice lato client. Tutte le interazioni con il database avvengono sul server, mitigando il rischio di SQL injection o accesso non autorizzato ai dati.

Prestazioni migliorate

Le Server Actions possono migliorare le prestazioni riducendo la quantità di JavaScript che deve essere scaricata ed eseguita sul client. Ciò è particolarmente utile per gli utenti con dispositivi a bassa potenza o con connessioni Internet lente. L'elaborazione dei dati avviene sul server e al client vengono inviati solo gli aggiornamenti dell'interfaccia utente necessari, con conseguente caricamento più rapido delle pagine e un'esperienza utente più fluida.

Aggiornamenti ottimistici

Le Server Actions si integrano perfettamente con Suspense e Transitions di React, consentendo aggiornamenti ottimistici. Gli aggiornamenti ottimistici consentono di aggiornare immediatamente l'interfaccia utente, anche prima che il server abbia confermato l'azione. Ciò offre un'esperienza utente più reattiva e coinvolgente, poiché gli utenti non devono attendere la risposta del server prima di vedere i risultati delle loro azioni. Nell'e-commerce, l'aggiunta di un articolo a un carrello della spesa può essere visualizzata immediatamente mentre il server conferma l'aggiunta in background.

Miglioramento progressivo

Le Server Actions supportano il miglioramento progressivo, il che significa che l'applicazione può ancora funzionare anche se JavaScript è disabilitato o non riesce a caricarsi. Quando JavaScript è disabilitato, i moduli verranno inviati come moduli HTML tradizionali e il server gestirà l'invio e reindirizzerà l'utente a una nuova pagina. Ciò garantisce che l'applicazione rimanga accessibile a tutti gli utenti, indipendentemente dalla configurazione del browser o dalle condizioni di rete. Ciò è particolarmente importante per l'accessibilità e la SEO.

Come utilizzare React Server Actions

Per utilizzare React Server Actions, è necessario utilizzare un framework che li supporti, come Next.js. Ecco una guida passo passo:

1. Definire la Server Action

Crea una funzione asincrona che verrà eseguita sul server. Questa funzione dovrebbe gestire la logica che si desidera eseguire sul server, come l'aggiornamento di un database o la chiamata a un'API. Contrassegna la funzione con la direttiva "`use server`" all'inizio per indicare che si tratta di una Server Action. Questa direttiva indica al compilatore React di trattare la funzione come una funzione lato server e di gestire automaticamente la serializzazione e la deserializzazione dei dati tra il client e il server.

// app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

Spiegazione:

2. Importa e utilizza la Server Action nel tuo componente

Importa la Server Action nel tuo componente React e usala come proprietà `action` su un elemento modulo. L'hook `useFormState` può essere utilizzato per gestire lo stato del modulo e visualizzare il feedback all'utente.

// app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      
      
      
      {state?.message && 
{state.message}
}
    

  );
}

Spiegazione:

3. Gestire i dati del modulo

All'interno della Server Action, puoi accedere ai dati del modulo utilizzando l'API `FormData`. Questa API fornisce un modo conveniente per accedere ai valori dei campi del modulo.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}

4. Gestire gli errori

Utilizza i blocchi `try...catch` per gestire gli errori che possono verificarsi durante l'esecuzione della Server Action. Restituisci un messaggio di errore nell'oggetto stato per visualizzarlo all'utente.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

5. Convalida i dati

Dopo che una Server Action ha modificato correttamente i dati, potrebbe essere necessario riconvalidare la cache dei dati per garantire che l'interfaccia utente rifletta le ultime modifiche. Utilizza le funzioni `revalidatePath` o `revalidateTag` da `next/cache` per riconvalidare percorsi o tag specifici.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}

Utilizzo avanzato

Mutazione dei dati

Le Server Actions sono particolarmente adatte per la mutazione dei dati, come l'aggiornamento di database o API esterne. Puoi utilizzare le Server Actions per gestire mutazioni di dati complesse che richiedono una logica lato server, come la convalida dei dati, l'esecuzione di calcoli o l'interazione con più origini dati. Considera uno scenario in cui devi aggiornare il profilo di un utente e inviare un'e-mail di conferma. Una Server Action può gestire sia l'aggiornamento del database che il processo di invio dell'e-mail in un'unica operazione atomica.

Autenticazione e autorizzazione

Le Server Actions possono essere utilizzate per gestire l'autenticazione e l'autorizzazione. Eseguendo controlli di autenticazione e autorizzazione sul server, puoi assicurarti che solo gli utenti autorizzati abbiano accesso a dati e funzionalità sensibili. Puoi utilizzare le Server Actions per gestire gli accessi, le registrazioni e i reset delle password degli utenti. Ad esempio, una Server Action può verificare le credenziali utente rispetto a un database e restituire un token che può essere utilizzato per autenticare le richieste successive.

Funzioni Edge

Le Server Actions possono essere distribuite come Funzioni Edge, che vengono eseguite su una rete globale di server vicini ai tuoi utenti. Ciò può ridurre significativamente la latenza e migliorare le prestazioni, soprattutto per gli utenti in luoghi geograficamente dispersi. Le Funzioni Edge sono ideali per gestire le Server Actions che richiedono una bassa latenza, come gli aggiornamenti dei dati in tempo reale o la fornitura di contenuti personalizzati. Next.js fornisce il supporto integrato per la distribuzione di Server Actions come Funzioni Edge.

Streaming

Le Server Actions supportano lo streaming, che consente di inviare i dati al client in blocchi man mano che diventano disponibili. Ciò può migliorare le prestazioni percepite dell'applicazione, in particolare per le Server Actions che richiedono molto tempo per l'esecuzione. Lo streaming è particolarmente utile per la gestione di set di dati di grandi dimensioni o calcoli complessi. Ad esempio, puoi trasmettere i risultati della ricerca al client man mano che vengono recuperati dal database, offrendo un'esperienza utente più reattiva.

Best practice

Ecco alcune best practice da seguire quando si utilizzano le React Server Actions:

Esempi reali

Consideriamo alcuni esempi reali di come le React Server Actions possono essere utilizzate in diversi tipi di applicazioni:

Applicazione di e-commerce

Applicazione di social media

Sistema di gestione dei contenuti (CMS)

Considerazioni sull'internazionalizzazione

Quando si sviluppano applicazioni per un pubblico globale, è essenziale considerare l'internazionalizzazione (i18n) e la localizzazione (l10n). Ecco alcune considerazioni per l'utilizzo delle React Server Actions nelle applicazioni internazionalizzate:

Ad esempio, quando si elabora un modulo che richiede un input di data, una Server Action può utilizzare l'API `Intl.DateTimeFormat` per analizzare la data in base alle impostazioni internazionali dell'utente, assicurando che la data venga interpretata correttamente indipendentemente dalle impostazioni regionali dell'utente.

Conclusione

Le React Server Actions sono un potente strumento per semplificare l'elaborazione dei moduli lato server e le mutazioni dei dati nelle applicazioni React. Consentendo di scrivere codice lato server direttamente all'interno dei componenti React, le Server Actions riducono il codice boilerplate, migliorano la sicurezza, migliorano le prestazioni e abilitano aggiornamenti ottimistici. Seguendo le best practice illustrate in questa guida, puoi sfruttare le Server Actions per creare applicazioni React più robuste, scalabili e gestibili. Man mano che React continua a evolversi, le Server Actions svolgeranno senza dubbio un ruolo sempre più importante nel futuro dello sviluppo web.