Progressive Enhancement con le Server Actions

Il progressive enhancement è una strategia di sviluppo web che parte da una base HTML funzionante e vi aggiunge funzionalità JavaScript. Le funzionalità essenziali sono disponibili per tutti gli utenti, compresi quelli che hanno disabilitato JavaScript, usano connessioni lente o ricorrono a tecnologie assistive, mentre gli utenti con JavaScript attivo usufruiscono di un'esperienza migliorata.

Un form con action={serverAction} funziona come una richiesta POST HTML a pagina intera anche senza JavaScript. Il browser invia il form, il server esegue l'azione e restituisce una pagina HTML aggiornata. È lo stesso meccanismo che alimenta i form web dal 1995: le Server Actions di React sono state progettate per essere compatibili con esso.

Quando JavaScript non è disponibile, la validazione deve essere eseguita sul server. La Server Action valida i dati del form e, se la validazione fallisce, restituisce lo stato di errore. Il server esegue nuovamente il rendering della pagina, incorporando i messaggi di errore nell'HTML. L'utente visualizza gli errori senza che venga eseguito alcun JavaScript lato client.

Quando React esegue l'hydration della pagina, intercetta gli invii dei form e li gestisce come chiamate asincrone alle Server Actions invece di eseguire richieste POST a pagina intera. L'utente ottiene un aggiornamento direttamente nella pagina, senza ricaricarla, uno stato di attesa visibile e un'interfaccia ottimistica, il tutto senza modificare l'azione o la struttura del form sottostante.

Il server esegue il rendering del form con lo stato iniziale incorporato nell'HTML. Quando React esegue l'hydration, recupera quello stato iniziale senza causare sfarfallii o incompatibilità. L'hook useActionState è progettato per conciliare in modo corretto lo stato iniziale renderizzato dal server con l'hydration lato client.

Le transizioni di React permettono all'interfaccia di rimanere interattiva durante una chiamata a una Server Action. Racchiudere l'invio del form in una transizione consente a React di assegnare una priorità inferiore al viaggio di andata e ritorno verso il server, mantenendo la pagina reattiva. È questo che rende l'esperienza migliorata con JavaScript sensibilmente più veloce rispetto a un ricaricamento completo della pagina.

Senza JavaScript: l'utente fa clic su Invia, il browser invia una richiesta POST a pagina intera e il server risponde con una nuova pagina HTML, causando un breve lampo bianco e il ripristino della posizione di scorrimento. Con JavaScript: React intercetta l'invio, l'azione viene eseguita in modo asincrono e solo le parti modificate della pagina vengono aggiornate direttamente, senza lampi né ripristino della posizione di scorrimento.

Il progressive enhancement è vantaggioso per i crawler dei motori di ricerca, che potrebbero non eseguire JavaScript. Una pagina di ricerca o filtraggio basata su un form HTML a pagina intera può essere indicizzata ed esplorata dai crawler. I risultati renderizzati dal server fanno sì che il crawler veda contenuti reali, non div vuoti in attesa di JavaScript.

I lettori di schermo e le tecnologie assistive funzionano al meglio con HTML semantico. Un form con progressive enhancement usa veri elementi <form>, <input> e <button>, che le tecnologie assistive comprendono nativamente. JavaScript aggiunge regioni live ARIA per annunciare gli errori, migliorando la base accessibile invece di sostituirla.

In presenza di reti inaffidabili, i bundle JavaScript potrebbero non riuscire a caricarsi. Una pagina con progressive enhancement continua comunque a funzionare per il caso d'uso di base. Questa resilienza è particolarmente importante per gli utenti che usano connessioni mobili in aree con scarsa copertura o in regioni in cui le condizioni di rete variano notevolmente.

Il progressive enhancement è particolarmente utile per i form rivolti al pubblico, come quelli di registrazione, contatto, ricerca e checkout. Le dashboard interne con interazioni complesse potrebbero non averne bisogno. Lo si applichi intenzionalmente nei contesti in cui contano soprattutto la massima accessibilità e l'affidabilità, come le pagine di marketing, l'e-commerce e i flussi di onboarding degli utenti.

Qual è il principio fondamentale del progressive enhancement?

Il progressive enhancement fa sì che il form funzioni come una semplice richiesta POST HTML anche senza JavaScript. Le Server Actions lo supportano nativamente: action={serverAction} abilita l'invio POST a pagina intera. L'hydration di React trasforma quindi il form in aggiornamenti asincroni direttamente nella pagina, con stati di attesa. Questo approccio offre vantaggi in termini di accessibilità, SEO e utilizzo con connessioni instabili, continuando comunque a fornire un'esperienza JavaScript completa.