Actions Serveur React : Traitement Simplifié des Formulaires Côté Serveur

Les Actions Serveur React, introduites dans React 18 et considérablement améliorées dans Next.js, offrent une approche révolutionnaire pour gérer les soumissions de formulaires et les mutations de données directement sur le serveur. Cette fonctionnalité puissante simplifie le processus de développement, améliore la sécurité et augmente les performances par rapport aux méthodes traditionnelles de récupération et de manipulation de données côté client.

Que sont les Actions Serveur React ?

Les Actions Serveur sont des fonctions asynchrones qui s'exécutent sur le serveur et peuvent être appelées directement depuis des composants React. Elles vous permettent d'effectuer des tâches côté serveur, telles que :

• Soumissions de formulaires : Traitez les données de formulaire de manière sécurisée sur le serveur.
• Mutations de données : Mettez à jour des bases de données ou des API externes.
• Authentification : Gérez la connexion et l'inscription des utilisateurs.
• Logique côté serveur : Exécutez une logique métier complexe sans l'exposer au client.

L'avantage principal des Actions Serveur est qu'elles vous permettent d'écrire du code côté serveur directement dans vos composants React, éliminant ainsi le besoin de routes API distinctes et de logique de récupération de données côté client complexe. Cette co-localisation de l'interface utilisateur et de la logique côté serveur conduit à une base de code plus maintenable et plus efficace.

Avantages de l'utilisation des Actions Serveur React

L'utilisation des Actions Serveur React offre plusieurs avantages significatifs :

Développement Simplifié

Les Actions Serveur réduisent le code répétitif en vous permettant de gérer les soumissions de formulaires et les mutations de données directement dans vos composants React. Cela élimine le besoin de points d'accès API séparés et de logique de récupération de données côté client complexe, rationalisant ainsi le processus de développement et rendant votre code plus facile à comprendre et à maintenir. Considérez un simple formulaire de contact. Sans Actions Serveur, vous auriez besoin d'une route API distincte pour gérer la soumission du formulaire, de JavaScript côté client pour envoyer les données, et d'une logique de gestion des erreurs côté client et serveur. Avec les Actions Serveur, tout cela peut être géré au sein même du composant.

Sécurité Améliorée

En exécutant le code sur le serveur, les Actions Serveur réduisent la surface d'attaque de votre application. Les données sensibles et la logique métier sont tenues à l'écart du client, empêchant les utilisateurs malveillants de les altérer. Par exemple, les identifiants de base de données ou les clés d'API ne sont jamais exposés dans le code côté client. Toutes les interactions avec la base de données se déroulent sur le serveur, atténuant ainsi le risque d'injection SQL ou d'accès non autorisé aux données.

Performances Améliorées

Les Actions Serveur peuvent améliorer les performances en réduisant la quantité de JavaScript qui doit être téléchargée et exécutée côté client. Ceci est particulièrement bénéfique pour les utilisateurs sur des appareils moins puissants ou avec des connexions Internet lentes. Le traitement des données s'effectue sur le serveur, et seules les mises à jour nécessaires de l'interface utilisateur sont envoyées au client, ce qui se traduit par des chargements de page plus rapides et une expérience utilisateur plus fluide.

Mises à Jour Optimistes

Les Actions Serveur s'intègrent parfaitement avec Suspense et Transitions de React, permettant les mises à jour optimistes. Les mises à jour optimistes vous permettent de mettre à jour l'interface utilisateur immédiatement, même avant que le serveur n'ait confirmé l'action. Cela offre une expérience utilisateur plus réactive et plus engageante, car les utilisateurs n'ont pas à attendre la réponse du serveur avant de voir les résultats de leurs actions. Dans le commerce électronique, l'ajout d'un article à un panier peut être affiché immédiatement pendant que le serveur confirme l'ajout en arrière-plan.

Amélioration Progressive

Les Actions Serveur prennent en charge l'amélioration progressive, ce qui signifie que votre application peut toujours fonctionner même si JavaScript est désactivé ou ne parvient pas à se charger. Lorsque JavaScript est désactivé, les formulaires se soumettent comme des formulaires HTML traditionnels, et le serveur gère la soumission et redirige l'utilisateur vers une nouvelle page. Cela garantit que votre application reste accessible à tous les utilisateurs, quelle que soit leur configuration de navigateur ou les conditions réseau. Ceci est particulièrement important pour l'accessibilité et le référencement.

Comment utiliser les Actions Serveur React

Pour utiliser les Actions Serveur React, vous devrez utiliser un framework qui les prend en charge, comme Next.js. Voici un guide étape par étape :

1. Définir l'Action Serveur

Créez une fonction asynchrone qui s'exécutera sur le serveur. Cette fonction doit gérer la logique que vous souhaitez exécuter sur le serveur, comme la mise à jour d'une base de données ou l'appel d'une API. Marquez la fonction avec la directive 'use server' en haut pour indiquer qu'il s'agit d'une Action Serveur. Cette directive indique au compilateur React de traiter la fonction comme une fonction côté serveur et de gérer automatiquement la sérialisation et la désérialisation des données entre le client et le serveur.

            // 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('/'); // Vider le cache de la route
    return { message: 'Message sauvegardé avec succès !' };
  } catch (e) {
    return { message: 'Échec de la sauvegarde du message' };
  }
}
            

              
                Copy
              
            
          

Explication :

• La directive 'use server' marque cette fonction comme une Action Serveur.
• revalidatePath('/') vide le cache de la route, garantissant que les données mises à jour sont récupérées lors de la prochaine requête. Ceci est crucial pour maintenir la cohérence des données.
• saveMessage(message) est un espace réservé pour votre logique d'interaction réelle avec la base de données. Il suppose que vous avez une fonction saveMessage définie ailleurs pour gérer la sauvegarde du message dans votre base de données.
• La fonction renvoie un objet d'état qui peut être utilisé pour afficher un retour à l'utilisateur.

2. Importer et utiliser l'Action Serveur dans votre composant

Importez l'Action Serveur dans votre composant React et utilisez-la comme prop action sur un élément de formulaire. Le hook useFormState peut être utilisé pour gérer l'état du formulaire et afficher un retour à l'utilisateur.

            // 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 (
    

      Message :
      
      Envoyer
      {state?.message && 
{state.message}
}
    
  );
}

            

              
                Copy
              
            
          

Explication :

• La directive 'use client' spécifie qu'il s'agit d'un composant client (car il utilise useFormState).
• useFormState(createMessage, {message: ''}) initialise l'état du formulaire avec l'Action Serveur createMessage. Le deuxième argument est l'état initial.
• La prop action de l'élément form est définie sur formAction renvoyé par useFormState.
• La variable state contient la valeur de retour de l'Action Serveur, qui peut être utilisée pour afficher un retour à l'utilisateur.

3. Gérer les données du formulaire

À l'intérieur de l'Action Serveur, vous pouvez accéder aux données du formulaire en utilisant l'API FormData. Cette API fournit un moyen pratique d'accéder aux valeurs des champs du formulaire.

            'use server'

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

  // ...
}
            

              
                Copy
              
            
          

4. Gérer les erreurs

Utilisez des blocs try...catch pour gérer les erreurs qui peuvent survenir lors de l'exécution de l'Action Serveur. Renvoyez un message d'erreur dans l'objet d'état pour l'afficher à l'utilisateur.

            'use server'

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

  try {
    // ...
  } catch (e) {
    return { message: 'Échec de la sauvegarde du message' };
  }
}
            

              
                Copy
              
            
          

5. Revalider les données

Après qu'une Action Serveur a muté des données avec succès, vous devrez peut-être revalider le cache des données pour vous assurer que l'interface utilisateur reflète les derniers changements. Utilisez les fonctions revalidatePath ou revalidateTag de next/cache pour revalider des chemins ou des balises spécifiques.

            'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Vider le cache de la route
  // ...
}
            

              
                Copy
              
            
          

Utilisation Avancée

Mutation de données

Les Actions Serveur sont particulièrement adaptées à la mutation de données, comme la mise à jour de bases de données ou d'API externes. Vous pouvez utiliser les Actions Serveur pour gérer des mutations de données complexes qui nécessitent une logique côté serveur, comme la validation des données, l'exécution de calculs ou l'interaction avec plusieurs sources de données. Considérez un scénario où vous devez mettre à jour le profil d'un utilisateur et envoyer un e-mail de confirmation. Une Action Serveur peut gérer à la fois la mise à jour de la base de données et l'envoi de l'e-mail dans une seule opération atomique.

Authentification et Autorisation

Les Actions Serveur peuvent être utilisées pour gérer l'authentification et l'autorisation. En effectuant des vérifications d'authentification et d'autorisation sur le serveur, vous pouvez garantir que seuls les utilisateurs autorisés ont accès aux données et aux fonctionnalités sensibles. Vous pouvez utiliser les Actions Serveur pour gérer les connexions d'utilisateurs, les inscriptions et les réinitialisations de mots de passe. Par exemple, une Action Serveur peut vérifier les identifiants de l'utilisateur par rapport à une base de données et renvoyer un jeton qui peut être utilisé pour authentifier les requêtes ultérieures.

Fonctions Edge

Les Actions Serveur peuvent être déployées sous forme de Fonctions Edge, qui s'exécutent sur un réseau mondial de serveurs proches de vos utilisateurs. Cela peut réduire considérablement la latence et améliorer les performances, en particulier pour les utilisateurs situés dans des lieux géographiquement dispersés. Les Fonctions Edge sont idéales pour gérer les Actions Serveur qui nécessitent une faible latence, telles que les mises à jour de données en temps réel ou la livraison de contenu personnalisé. Next.js offre un support intégré pour le déploiement des Actions Serveur en tant que Fonctions Edge.

Streaming

Les Actions Serveur prennent en charge le streaming, ce qui vous permet d'envoyer des données au client par morceaux dès qu'elles sont disponibles. Cela peut améliorer les performances perçues de votre application, en particulier pour les Actions Serveur qui prennent beaucoup de temps à s'exécuter. Le streaming est particulièrement utile pour gérer de grands ensembles de données ou des calculs complexes. Par exemple, vous pouvez diffuser les résultats de recherche vers le client au fur et à mesure qu'ils sont récupérés de la base de données, offrant ainsi une expérience utilisateur plus réactive.

Bonnes Pratiques

Voici quelques bonnes pratiques à suivre lors de l'utilisation des Actions Serveur React :

• Gardez les Actions Serveur petites et ciblées : Chaque Action Serveur doit effectuer une tâche unique et bien définie. Cela rend votre code plus facile à comprendre, à tester et à maintenir.
• Utilisez des noms descriptifs : Choisissez des noms qui indiquent clairement le but de l'Action Serveur. Par exemple, createComment ou updateUserProfile sont meilleurs que des noms génériques comme processData.
• Validez les données sur le serveur : Validez toujours les données sur le serveur pour empêcher les utilisateurs malveillants d'injecter des données invalides dans votre application. Cela inclut la validation des types de données, des formats et des plages.
• Gérez les erreurs avec élégance : Utilisez des blocs try...catch pour gérer les erreurs et fournir des messages d'erreur informatifs à l'utilisateur. Évitez d'exposer des informations d'erreur sensibles au client.
• Utilisez les mises à jour optimistes : Offrez une expérience utilisateur plus réactive en mettant à jour l'interface utilisateur immédiatement, même avant que le serveur n'ait confirmé l'action.
• Revalidez les données au besoin : Assurez-vous que l'interface utilisateur reflète les derniers changements en revalidant le cache des données après qu'une Action Serveur a muté des données.

Exemples Concrets

Examinons quelques exemples concrets de la façon dont les Actions Serveur React peuvent être utilisées dans différents types d'applications :

Application de Commerce Électronique

• Ajouter un article au panier : Une Action Serveur peut gérer l'ajout d'un article au panier de l'utilisateur et la mise à jour du total du panier dans la base de données. Des mises à jour optimistes peuvent être utilisées pour afficher immédiatement l'article dans le panier.
• Traiter un paiement : Une Action Serveur peut gérer le traitement d'un paiement à l'aide d'une passerelle de paiement tierce. L'Action Serveur peut également mettre à jour le statut de la commande dans la base de données et envoyer un e-mail de confirmation à l'utilisateur.
• Soumettre un avis sur un produit : Une Action Serveur peut gérer la soumission d'un avis sur un produit et l'enregistrer dans la base de données. L'Action Serveur peut également calculer la note moyenne du produit et mettre à jour la page de détails du produit.

Application de Réseaux Sociaux

• Publier un nouveau tweet : Une Action Serveur peut gérer la publication d'un nouveau tweet et son enregistrement dans la base de données. L'Action Serveur peut également mettre à jour la chronologie de l'utilisateur et informer ses abonnés.
• Aimer un post : Une Action Serveur peut gérer l'action d'aimer un post et la mise à jour du compteur de likes dans la base de données. Des mises à jour optimistes peuvent être utilisées pour afficher immédiatement le compteur de likes mis à jour.
• Suivre un utilisateur : Une Action Serveur peut gérer le fait de suivre un utilisateur et la mise à jour des compteurs d'abonnés et de suivi dans la base de données.

Système de Gestion de Contenu (CMS)

• Créer un nouvel article de blog : Une Action Serveur peut gérer la création d'un nouvel article de blog et son enregistrement dans la base de données. L'Action Serveur peut également générer un slug pour l'article et mettre à jour le sitemap.
• Mettre à jour une page : Une Action Serveur peut gérer la mise à jour d'une page et son enregistrement dans la base de données. L'Action Serveur peut également revalider le cache de la page pour garantir que le contenu mis à jour est affiché aux utilisateurs.
• Publier une modification : Une Action Serveur peut gérer la publication d'une modification dans la base de données et informer tous les abonnés.

Considérations sur l'Internationalisation

Lors du développement d'applications pour un public mondial, il est essentiel de prendre en compte l'internationalisation (i18n) et la localisation (l10n). Voici quelques considérations pour l'utilisation des Actions Serveur React dans des applications internationalisées :

• Gestion des différents formats de date et d'heure : Utilisez l'API Intl pour formater les dates et les heures selon la locale de l'utilisateur.
• Gestion des différents formats de nombres : Utilisez l'API Intl pour formater les nombres selon la locale de l'utilisateur.
• Gestion des différentes devises : Utilisez l'API Intl pour formater les devises selon la locale de l'utilisateur.
• Traduction des messages d'erreur : Traduisez les messages d'erreur dans la langue de l'utilisateur.
• Support des langues de droite à gauche (RTL) : Assurez-vous que votre application prend en charge les langues RTL, comme l'arabe et l'hébreu.

Par exemple, lors du traitement d'un formulaire qui nécessite une saisie de date, une Action Serveur peut utiliser l'API Intl.DateTimeFormat pour analyser la date selon la locale de l'utilisateur, garantissant ainsi que la date est correctement interprétée quelles que soient les paramètres régionaux de l'utilisateur.

Conclusion

Les Actions Serveur React sont un outil puissant pour simplifier le traitement des formulaires côté serveur et les mutations de données dans les applications React. En vous permettant d'écrire du code côté serveur directement dans vos composants React, les Actions Serveur réduisent le code répétitif, améliorent la sécurité, augmentent les performances et permettent les mises à jour optimistes. En suivant les bonnes pratiques décrites dans ce guide, vous pouvez tirer parti des Actions Serveur pour créer des applications React plus robustes, évolutives et maintenables. Alors que React continue d'évoluer, les Actions Serveur joueront sans aucun doute un rôle de plus en plus important dans l'avenir du développement web.