M

MLOG

Français

Explorez les Actions Serveur React, une fonctionnalité puissante pour le traitement des soumissions de formulaires et les mutations de données directement sur le serveur.

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 :

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' };
  }
}

Explication :

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 (
    

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

  );
}

Explication :

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');

  // ...
}

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' };
  }
}

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
  // ...
}

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 :

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

Application de Réseaux Sociaux

Système de Gestion de Contenu (CMS)

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 :

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.