30 août 2025Français

Découvrez la puissance des Actions Serveur React pour un traitement de formulaires et des mutations de données côté serveur fluides. Apprenez à créer des applications web efficaces, sécurisées et conviviales.

Actions Serveur React : Un Guide Complet sur le Traitement de Formulaires et l'Intégration Serveur

Les Actions Serveur React représentent une évolution significative dans la manière dont nous créons des applications web interactives avec React. Elles permettent aux développeurs d'exécuter du code côté serveur directement depuis des composants React, simplifiant ainsi le traitement des formulaires, les mutations de données et autres opérations dépendant du serveur. Ce guide offre une vue d'ensemble complète des Actions Serveur React, couvrant leurs avantages, les détails de leur implémentation et les meilleures pratiques.

Que sont les Actions Serveur React ?

Les Actions Serveur sont des fonctions asynchrones qui s'exécutent sur le serveur. Elles peuvent être invoquées directement depuis des composants React, vous permettant de gérer les soumissions de formulaires, de mettre à jour des données et d'effectuer d'autres logiques côté serveur sans écrire de points de terminaison d'API distincts. Cette approche simplifie le développement, réduit le JavaScript côté client et améliore les performances de l'application.

Caractéristiques clés des Actions Serveur :

Exécution côté serveur : Les actions s'exécutent exclusivement sur le serveur, garantissant la sécurité des données et empêchant l'exposition de la logique sensible au client.
Invocation directe depuis les composants React : Vous pouvez appeler les Actions Serveur directement dans vos composants, ce qui facilite l'intégration de la logique côté serveur dans votre interface utilisateur.
Opérations asynchrones : Les actions sont asynchrones, vous permettant d'effectuer des tâches de longue durée sans bloquer l'interface utilisateur.
Amélioration progressive : Les Actions Serveur prennent en charge l'amélioration progressive, ce qui signifie que votre application fonctionnera toujours même si le JavaScript est désactivé.

Avantages de l'Utilisation des Actions Serveur React

Les Actions Serveur offrent plusieurs avantages convaincants par rapport aux techniques traditionnelles de récupération et de mutation de données côté client :

Développement Simplifié

En éliminant le besoin de points de terminaison d'API distincts, les Actions Serveur réduisent la quantité de code passe-partout que vous devez écrire. Cela peut simplifier considérablement votre flux de travail de développement et rendre votre base de code plus facile à maintenir. Au lieu de créer et de gérer des routes d'API, vous définissez des actions qui sont colocalisées avec les composants qui les utilisent.

Performances Améliorées

Les Actions Serveur peuvent améliorer les performances de l'application en réduisant la quantité de JavaScript qui doit être téléchargée et exécutée sur le client. Elles vous permettent également d'effectuer des transformations et des validations de données sur le serveur, ce qui peut réduire davantage la charge de travail du client. Le serveur peut gérer efficacement le traitement des données, conduisant à une expérience utilisateur plus fluide.

Sécurité Renforcée

Parce que les Actions Serveur s'exécutent sur le serveur, elles offrent un moyen plus sécurisé de gérer les données et les opérations sensibles. Vous pouvez protéger vos données contre les accès et manipulations non autorisés en effectuant des vérifications de validation et d'autorisation sur le serveur. Cela ajoute une couche de sécurité par rapport aux validations côté client, qui peuvent être contournées.

Amélioration Progressive

Les Actions Serveur sont conçues pour prendre en charge l'amélioration progressive. Cela signifie que votre application fonctionnera toujours même si le JavaScript est désactivé ou ne se charge pas. Lorsque le JavaScript n'est pas disponible, les formulaires seront soumis via les soumissions de formulaires HTML traditionnelles, et le serveur traitera la requête en conséquence. Cela garantit que votre application est accessible à un plus large éventail d'utilisateurs, y compris ceux avec des navigateurs plus anciens ou des connexions Internet plus lentes.

Mises à Jour Optimistes

Les Actions Serveur s'intègrent de manière transparente avec les mises à jour optimistes. Vous pouvez immédiatement mettre à jour l'interface utilisateur pour refléter le résultat attendu d'une action, avant même que le serveur n'ait confirmé le changement. Cela peut améliorer considérablement la réactivité perçue de votre application et offrir une expérience utilisateur plus fluide. Si l'opération côté serveur échoue, vous pouvez facilement ramener l'interface utilisateur à son état précédent.

Comment Implémenter les Actions Serveur React

L'implémentation des Actions Serveur implique de définir la fonction d'action, de l'associer à un composant et de gérer le résultat.

Définir une Action Serveur

Les Actions Serveur sont définies à l'aide de la directive 'use server'. Cette directive indique au compilateur React que la fonction doit être exécutée sur le serveur. Voici un exemple :

            // app/actions.js
'use server'

import { cookies } from 'next/headers'
import { revalidatePath } from 'next/cache'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // Simuler une insertion en base de données
  await new Promise((resolve) => setTimeout(resolve, 1000))

  console.log('Post créé :', { title, content })

  // Revalider la route du blog
  revalidatePath('/blog')

  return { message: 'Post créé avec succès !' }
}

Dans cet exemple :

La directive 'use server' indique que la fonction createPost doit être exécutée sur le serveur.
La fonction prend un objet formData en entrée, qui contient les données soumises par le formulaire.
La fonction extrait le title et le content du formData.
Elle simule une insertion en base de données avec setTimeout. Dans une application réelle, vous remplaceriez cela par votre logique de base de données réelle.
La fonction revalidatePath invalide le cache pour la route /blog, garantissant que les données les plus récentes sont affichées.
La fonction retourne un objet avec une propriété message, qui peut être utilisée pour afficher un message de succès à l'utilisateur.

Utiliser les Actions Serveur dans les Composants React

Pour utiliser une Action Serveur dans un composant React, vous pouvez importer la fonction d'action et la passer à la prop action d'un élément <form>. Voici un exemple :

            // app/components/PostForm.js
import { createPost } from '../actions'
'use client'

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    
  )
}

export default function PostForm() {
  return (
    
      Titre :
      

      Contenu :
      
      <SubmitButton />
    </form>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKaW1wb3J0IHsgY3JlYXRlUG9zdCB9IGZyb20gJy4uL2FjdGlvbnMnCid1c2UgY2xpZW50JwoKaW1wb3J0IHsgdXNlRm9ybVN0YXR1cyB9IGZyb20gJ3JlYWN0LWRvbScKCmZ1bmN0aW9uIFN1Ym1pdEJ1dHRvbigpIHsKICBjb25zdCB7IHBlbmRpbmcgfSA9IHVzZUZvcm1TdGF0dXMoKQoKICByZXR1cm4gKAogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAge3BlbmRpbmcgPyAnQ3LpYXRpb24uLi4nIDogJ0Ny6WVyIGxlIFBvc3QnfQogICAgPC9idXR0b24+CiAgKQp9CgpleHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBQb3N0Rm9ybSgpIHsKICByZXR1cm4gKAogICAgPGZvcm0gYWN0aW9uPXtjcmVhdGVQb3N0fT4KICAgICAgPGxhYmVsIGh0bWxGb3I9InRpdGxlIj5UaXRyZSA6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJ0aXRsZSIgbmFtZT0idGl0bGUiIHJlcXVpcmVkIC8+CgogICAgICA8bGFiZWwgaHRtbEZvcj0iY29udGVudCI+Q29udGVudSA6PC9sYWJlbD4KICAgICAgPHRleHRhcmVhIGlkPSJjb250ZW50IiBuYW1lPSJjb250ZW50IiByZXF1aXJlZCAvPgoKICAgICAgPFN1Ym1pdEJ1dHRvbiAvPgogICAgPC9mb3JtPgogICkKfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Dans cet exemple :</p>

<ul>
  <li>L'action <code>createPost</code> est importée depuis le fichier <code>../actions</code>.</li>
  <li>La prop <code>action</code> de l'élément <code><form></code> est définie sur la fonction <code>createPost</code>.</li>
  <li>Le composant <code>SubmitButton</code> utilise le hook <code>useFormStatus</code> pour déterminer si le formulaire est en cours de soumission. Il désactive le bouton pendant la soumission du formulaire pour éviter les soumissions multiples.</li>
</ul>

<h3>Gérer les Données de Formulaire</h3>

<p>Les Actions Serveur reçoivent automatiquement les données du formulaire sous forme d'objet <code>FormData</code>. Vous pouvez accéder aux données en utilisant la méthode <code>get</code> de l'objet <code>FormData</code>. Voici un exemple :</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // ...
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIGNvbnN0IHRpdGxlID0gZm9ybURhdGEuZ2V0KCd0aXRsZScpCiAgY29uc3QgY29udGVudCA9IGZvcm1EYXRhLmdldCgnY29udGVudCcpCgogIC8vIC4uLgp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Dans cet exemple, le <code>title</code> et le <code>content</code> sont extraits de l'objet <code>formData</code> en utilisant la méthode <code>get</code>.</p>

<h3>Fournir un Retour à l'Utilisateur</h3>

<p>Vous pouvez fournir un retour à l'utilisateur en retournant une valeur de l'Action Serveur. Cette valeur sera disponible pour le composant qui a invoqué l'action. Vous pouvez utiliser cette valeur pour afficher des messages de succès ou d'erreur à l'utilisateur. Voici un exemple :</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  return { message: 'Post créé avec succès !' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICByZXR1cm4geyBtZXNzYWdlOiAnUG9zdCBjcunpIGF2ZWMgc3VjY+hzICEnIH0KfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)

  async function handleSubmit(formData) {
    const result = await createPost(formData)
    setMessage(result.message)
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCgogIGFzeW5jIGZ1bmN0aW9uIGhhbmRsZVN1Ym1pdChmb3JtRGF0YSkgewogICAgY29uc3QgcmVzdWx0ID0gYXdhaXQgY3JlYXRlUG9zdChmb3JtRGF0YSkKICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgfQoKICByZXR1cm4gKAogICAgPGRpdj4KICAgICAgPGZvcm0gYWN0aW9uPXtoYW5kbGVTdWJtaXR9PgogICAgICAgIHsvKiAuLi4gKi99CiAgICAgIDwvZm9ybT4KICAgICAge21lc3NhZ2UgJiYgPHA+e21lc3NhZ2V9PC9wPn0KICAgIDwvZGl2PgogICkKfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Dans cet exemple :</p>

<ul>
  <li>L'action <code>createPost</code> retourne un objet avec une propriété <code>message</code>.</li>
  <li>Le composant <code>PostForm</code> utilise le hook <code>useState</code> pour stocker le message.</li>
  <li>La fonction <code>handleSubmit</code> appelle l'action <code>createPost</code> et définit l'état du message sur la valeur retournée par l'action.</li>
  <li>Le message est affiché à l'utilisateur dans un élément <code><p></code>.</li>
</ul>

<h3>Gestion des Erreurs</h3>

<p>Les Actions Serveur peuvent lever des erreurs, qui seront interceptées par l'environnement d'exécution de React. Vous pouvez gérer ces erreurs dans vos composants en utilisant un bloc <code>try...catch</code>. Voici un exemple :</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  if (!title || title.length < 5) {
    throw new Error('Le titre doit contenir au moins 5 caractères.')
  }

  return { message: 'Post créé avec succès !' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICBpZiAoIXRpdGxlIHx8IHRpdGxlLmxlbmd0aCA8IDUpIHsKICAgIHRocm93IG5ldyBFcnJvcignTGUgdGl0cmUgZG9pdCBjb250ZW5pciBhdSBtb2lucyA1IGNhcmFjdOhyZXMuJykKICB9CgogIHJldHVybiB7IG1lc3NhZ2U6ICdQb3N0IGNy6ekgYXZlYyBzdWNj6HMgIScgfQp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)
  const [error, setError] = useState(null)

  async function handleSubmit(formData) {
    try {
      const result = await createPost(formData)
      setMessage(result.message)
      setError(null)
    } catch (e) {
      setError(e.message)
      setMessage(null)
    }
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCiAgY29uc3QgW2Vycm9yLCBzZXRFcnJvcl0gPSB1c2VTdGF0ZShudWxsKQoKICBhc3luYyBmdW5jdGlvbiBoYW5kbGVTdWJtaXQoZm9ybURhdGEpIHsKICAgIHRyeSB7CiAgICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IGNyZWF0ZVBvc3QoZm9ybURhdGEpCiAgICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgICAgIHNldEVycm9yKG51bGwpCiAgICB9IGNhdGNoIChlKSB7CiAgICAgIHNldEVycm9yKGUubWVzc2FnZSkKICAgICAgc2V0TWVzc2FnZShudWxsKQogICAgfQogIH0KCiAgcmV0dXJuICgKICAgIDxkaXY+CiAgICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0fT4KICAgICAgICB7LyogLi4uICovfQogICAgICA8L2Zvcm0+CiAgICAgIHttZXNzYWdlICYmIDxwPnttZXNzYWdlfTwvcD59CiAgICAgIHtlcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+e2Vycm9yfTwvcD59CiAgICA8L2Rpdj4KICApCn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Dans cet exemple :</p>

<ul>
  <li>L'action <code>createPost</code> lève une erreur si le titre a moins de 5 caractères.</li>
  <li>Le composant <code>PostForm</code> utilise un bloc <code>try...catch</code> pour intercepter les erreurs levées par l'action <code>createPost</code>.</li>
  <li>Si une erreur est interceptée, le message d'erreur est affiché à l'utilisateur dans un élément <code><p></code> avec du texte rouge.</li>
</ul>

<h2>Bonnes Pratiques pour l'Utilisation des Actions Serveur React</h2>

<p>Pour vous assurer que vous utilisez efficacement les Actions Serveur, considérez les bonnes pratiques suivantes :</p>

<h3>Utiliser la Directive <code>'use server'</code></h3>

<p>Incluez toujours la directive <code>'use server'</code> en haut de vos fichiers d'Actions Serveur. Cette directive indique au compilateur React que les fonctions du fichier doivent être exécutées sur le serveur. C'est crucial pour la sécurité et les performances.</p>

<h3>Garder les Actions Petites et Ciblées</h3>

<p>Chaque Action Serveur doit effectuer une seule tâche bien définie. Cela rend vos actions plus faciles à comprendre, à tester et à maintenir. Évitez de créer de grandes actions monolithiques qui effectuent plusieurs tâches non liées.</p>

<h3>Valider les Données sur le Serveur</h3>

<p>Validez toujours les données sur le serveur avant d'effectuer toute opération. Cela protège votre application contre les données invalides ou malveillantes. Utilisez des techniques de validation appropriées, telles que la validation du type de données, les vérifications de longueur et les expressions régulières. La validation côté serveur est plus sécurisée que la validation côté client, qui peut être contournée.</p>

<h3>Gérer les Erreurs avec Élégance</h3>

<p>Gérez toujours les erreurs avec élégance dans vos Actions Serveur. Cela empêche votre application de planter et offre une meilleure expérience utilisateur. Utilisez des blocs <code>try...catch</code> pour intercepter les exceptions qui peuvent se produire et fournir des messages d'erreur informatifs à l'utilisateur.</p>

<h3>Utiliser les Mises à Jour Optimistes</h3>

<p>Utilisez les mises à jour optimistes pour améliorer la réactivité perçue de votre application. Mettez immédiatement à jour l'interface utilisateur pour refléter le résultat attendu d'une action, avant même que le serveur n'ait confirmé le changement. Si l'opération côté serveur échoue, vous pouvez facilement ramener l'interface utilisateur à son état précédent.</p>

<h3>Envisager la Mise en Cache</h3>

<p>Envisagez de mettre en cache les résultats des Actions Serveur pour améliorer les performances. Cela peut être particulièrement bénéfique pour les actions qui effectuent des opérations coûteuses ou qui sont fréquemment appelées. Utilisez des stratégies de mise en cache appropriées, telles que la mise en cache HTTP ou la mise en cache côté serveur, pour réduire la charge sur votre serveur.</p>

<h3>Sécuriser Vos Actions Serveur</h3>

<p>Mettez en œuvre des mesures de sécurité pour protéger vos Actions Serveur contre les accès et manipulations non autorisés. Utilisez l'authentification et l'autorisation pour vous assurer que seuls les utilisateurs autorisés peuvent effectuer certaines actions. Protégez-vous contre les vulnérabilités de sécurité courantes, telles que le cross-site scripting (XSS) et l'injection SQL. Assainissez toujours les entrées utilisateur avant de les utiliser dans des requêtes de base de données ou d'autres opérations sensibles.</p>

<h2>Cas d'Utilisation Courants pour les Actions Serveur React</h2>

<p>Les Actions Serveur sont bien adaptées à une variété de cas d'utilisation, notamment :</p>

<h3>Soumissions de Formulaires</h3>

<p>La gestion des soumissions de formulaires est l'un des cas d'utilisation les plus courants pour les Actions Serveur. Vous pouvez utiliser les Actions Serveur pour traiter les données de formulaire, valider les entrées et stocker les données dans une base de données. Cela élimine le besoin de points de terminaison d'API distincts et simplifie votre flux de travail de développement. Par exemple, la gestion de l'inscription des utilisateurs, des formulaires de contact ou des avis sur les produits.</p>

<h3>Mutations de Données</h3>

<p>Les Actions Serveur peuvent être utilisées pour effectuer des mutations de données, telles que la création, la mise à jour ou la suppression de données dans une base de données. Cela vous permet de mettre à jour les données de votre application en réponse aux actions de l'utilisateur. Les exemples incluent la mise à jour des profils utilisateur, l'ajout de commentaires ou la suppression de publications.</p>

<h3>Authentification et Autorisation</h3>

<p>Les Actions Serveur peuvent être utilisées pour gérer l'authentification et l'autorisation. Vous pouvez utiliser les Actions Serveur pour vérifier les informations d'identification des utilisateurs, émettre des jetons et protéger les ressources sensibles. Cela garantit que seuls les utilisateurs autorisés peuvent accéder à certaines parties de votre application. Par exemple, l'implémentation des fonctionnalités de connexion/déconnexion, la gestion des rôles utilisateur ou l'autorisation d'accès à des fonctionnalités spécifiques.</p>

<h3>Mises à Jour en Temps Réel</h3>

<p>Bien que les Actions Serveur не soient pas intrinsèquement en temps réel, elles peuvent être combinées avec d'autres technologies, telles que les WebSockets, pour fournir des mises à jour en temps réel à votre application. Vous pouvez utiliser les Actions Serveur pour déclencher des événements qui sont ensuite diffusés aux clients connectés via les WebSockets. Pensez aux applications de chat en direct, à l'édition collaborative de documents ou aux tableaux de bord en temps réel.</p>

<h2>Considérations sur l'Internationalisation (i18n)</h2>

<p>Lors du développement d'applications avec des Actions Serveur pour un public mondial, l'internationalisation (i18n) est cruciale. Voici quelques considérations clés :</p>

<h3>Localisation des Messages d'Erreur</h3>

<p>Assurez-vous que les messages d'erreur retournés par les Actions Serveur sont localisés dans la langue préférée de l'utilisateur. Cela offre une meilleure expérience utilisateur et facilite la compréhension et la résolution des problèmes par les utilisateurs. Utilisez des bibliothèques i18n pour gérer les traductions et afficher dynamiquement les messages en fonction des paramètres régionaux de l'utilisateur.</p>

<h3>Formatage des Dates et des Nombres</h3>

<p>Formatez les dates et les nombres selon les paramètres régionaux de l'utilisateur. Différents paramètres régionaux ont différentes conventions pour afficher les dates, les nombres et les devises. Utilisez des bibliothèques i18n pour formater correctement ces valeurs en fonction des paramètres régionaux de l'utilisateur.</p>

<h3>Gestion des Fuseaux Horaires</h3>

<p>Lorsque vous traitez des dates et des heures, soyez attentif aux fuseaux horaires. Stockez les dates et les heures au format UTC et convertissez-les dans le fuseau horaire local de l'utilisateur lors de leur affichage. Cela garantit que les dates et les heures sont affichées correctement, quel que soit l'emplacement de l'utilisateur. Par exemple, pour la planification d'événements ou l'affichage d'horodatages.</p>

<h3>Conversion de Devises</h3>

<p>Si votre application traite des devises, fournissez une fonctionnalité de conversion de devises. Permettez aux utilisateurs de voir les prix dans leur devise locale. Utilisez une API de conversion de devises fiable pour vous assurer que les taux de change sont à jour. Ceci est particulièrement important pour les applications de commerce électronique et les services financiers.</p>

<h3>Prise en Charge de Droite à Gauche (RTL)</h3>

<p>Si votre application prend en charge des langues qui s'écrivent de droite à gauche (RTL), comme l'arabe ou l'hébreu, assurez-vous que votre interface utilisateur est correctement mise en miroir pour ces langues. Cela inclut la mise en miroir de la mise en page, de la direction du texte et des icônes. Utilisez les propriétés logiques CSS pour créer des mises en page qui s'adaptent aux différentes directions du texte.</p>

<h2>Exemples d'Actions Serveur React dans des Applications Globales</h2>

<p>Voici quelques exemples de la manière dont les Actions Serveur React peuvent être utilisées dans des applications globales :</p>

<h3>Plateforme de Commerce Électronique</h3>

<ul>
  <li><b>Ajout d'un produit au panier :</b> Une Action Serveur peut être utilisée pour ajouter un produit au panier de l'utilisateur. L'action peut valider l'ID du produit, vérifier les niveaux de stock et mettre à jour le panier dans la base de données.</li>
  <li><b>Traitement d'une commande :</b> Une Action Serveur peut être utilisée pour traiter une commande. L'action peut valider les informations de paiement de l'utilisateur, calculer les frais d'expédition et créer une commande dans la base de données.</li>
  <li><b>Abonnement à une newsletter :</b> Une Action Serveur peut gérer les abonnements à la newsletter, en validant les adresses e-mail et en les ajoutant à la liste d'abonnement.</li>
</ul>

<h3>Plateforme de Médias Sociaux</h3>

<ul>
  <li><b>Publier un commentaire :</b> Une Action Serveur peut être utilisée pour publier un commentaire sur une publication. L'action peut valider le texte du commentaire, l'associer à la publication et le stocker dans la base de données.</li>
  <li><b>Aimer une publication :</b> Une Action Serveur peut être utilisée pour aimer une publication. L'action peut mettre à jour le nombre de 'j'aime' pour la publication et stocker le 'j'aime' dans la base de données.</li>
  <li><b>Suivre un utilisateur :</b> Les Actions Serveur peuvent gérer les demandes de suivi, gérer le blocage des utilisateurs et mettre à jour le nombre d'abonnés.</li>
</ul>

<h3>Application de Réservation de Voyages</h3>

<ul>
  <li><b>Rechercher des vols :</b> Les Actions Serveur peuvent être utilisées pour interroger la disponibilité des vols en fonction de la destination et des dates. L'action peut appeler des API externes, filtrer les résultats et présenter des options à l'utilisateur.</li>
  <li><b>Réserver une chambre d'hôtel :</b> Les Actions Serveur peuvent gérer les réservations d'hôtel, en confirmant la disponibilité des chambres et en traitant les détails de paiement.</li>
  <li><b>Donner son avis sur des destinations de voyage :</b> Une action serveur peut gérer l'ajout et le traitement des avis et des notes des utilisateurs.</li>
</ul>

<h2>Composants Serveur React vs. Actions Serveur</h2>

<p>Il est important de comprendre la différence entre les Composants Serveur React et les Actions Serveur, car ils travaillent souvent ensemble mais servent des objectifs différents :</p>

<h3>Composants Serveur React</h3>

<p>Les Composants Serveur React sont des composants qui effectuent leur rendu sur le serveur. Ils vous permettent de récupérer des données, d'exécuter de la logique et de rendre des éléments d'interface utilisateur sur le serveur, ce qui peut améliorer les performances et réduire la quantité de JavaScript à télécharger et à exécuter sur le client. Les Composants Serveur sont principalement destinés au rendu de l'interface utilisateur et à la récupération des données initiales.</p>

<h3>Actions Serveur</h3>

<p>Les Actions Serveur sont des fonctions asynchrones qui s'exécutent sur le serveur en réponse aux interactions de l'utilisateur, telles que les soumissions de formulaires. Elles sont principalement destinées à la gestion des mutations de données, à l'exécution de la logique côté serveur et à fournir un retour à l'utilisateur. Les Actions Serveur sont invoquées depuis les composants clients, généralement en réponse à des soumissions de formulaires ou à d'autres événements utilisateur.</p>

<p><b>Différences Clés :</b></p>

<ul>
  <li><b>Objectif :</b> Les Composants Serveur servent à rendre l'UI, tandis que les Actions Serveur servent à gérer les mutations de données.</li>
  <li><b>Exécution :</b> Les Composants Serveur effectuent leur rendu sur le serveur lors du chargement initial de la page, tandis que les Actions Serveur sont invoquées depuis les composants clients en réponse aux interactions de l'utilisateur.</li>
  <li><b>Flux de Données :</b> Les Composants Serveur peuvent récupérer des données directement depuis le serveur, tandis que les Actions Serveur reçoivent des données du client via des soumissions de formulaires ou d'autres événements utilisateur.</li>
</ul>

<p><b>Comment ils Fonctionnent Ensemble :</b></p>

<p>Les Composants Serveur et les Actions Serveur peuvent être utilisés ensemble pour créer des applications web interactives. Les Composants Serveur peuvent rendre l'interface utilisateur initiale et récupérer les données initiales, tandis que les Actions Serveur peuvent gérer les mutations de données et fournir un retour à l'utilisateur. Par exemple, un Composant Serveur pourrait rendre un formulaire, et une Action Serveur pourrait gérer la soumission du formulaire et mettre à jour les données dans la base de données.</p>

<h2>Conclusion</h2>

<p>Les Actions Serveur React offrent un moyen puissant et efficace de gérer le traitement des formulaires, les mutations de données et d'autres opérations côté serveur dans vos applications React. En tirant parti des Actions Serveur, vous pouvez simplifier votre flux de travail de développement, améliorer les performances de l'application, renforcer la sécurité et offrir une meilleure expérience utilisateur. À mesure que vous créez des applications web de plus en plus complexes, comprendre et utiliser les Actions Serveur React deviendra une compétence essentielle pour les développeurs React modernes.</p>

<p>N'oubliez pas de suivre les bonnes pratiques décrites dans ce guide pour vous assurer que vous utilisez les Actions Serveur de manière efficace et sécurisée. En adoptant les Actions Serveur, vous pouvez libérer tout le potentiel de React et créer des applications web performantes et conviviales pour un public mondial.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Actions Serveur React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">composants serveur</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">traitement de formulaires</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">rendu côté serveur</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">mutations de données</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">framework React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">développement web</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">récupération de données</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">intégration serveur</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">amélioration progressive</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"><template id="P:4"></template><template id="P:5"></template><template id="P:6"></template><template id="P:7"></template><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template><template id="P:b"></template><template id="P:c"></template><template id="P:d"></template><template id="P:e"></template><template id="P:f"></template><template id="P:10"></template><template id="P:11"></template><template id="P:12"></template><template id="P:13"></template><template id="P:14"></template><template id="P:15"></template><template id="P:16"></template><template id="P:17"></template><template id="P:18"></template><template id="P:19"></template><template id="P:1a"></template><template id="P:1b"></template><template id="P:1c"></template><template id="P:1d"></template><template id="P:1e"></template><template id="P:1f"></template><template id="P:20"></template><template id="P:21"></template><template id="P:22"></template><template id="P:23"></template><template id="P:24"></template><template id="P:25"></template><template id="P:26"></template><template id="P:27"></template><template id="P:28"></template><template id="P:29"></template><template id="P:2a"></template><template id="P:2b"></template><template id="P:2c"></template><template id="P:2d"></template><template id="P:2e"></template><template id="P:2f"></template><template id="P:30"></template><template id="P:31"></template><template id="P:32"></template><template id="P:33"></template><template id="P:34"></template><template id="P:35"></template><template id="P:36"></template><template id="P:37"></template><template id="P:38"></template><template id="P:39"></template><template id="P:3a"></template><template id="P:3b"></template><template id="P:3c"></template><template id="P:3d"></template><template id="P:3e"></template><template id="P:3f"></template><template id="P:40"></template><template id="P:41"></template><template id="P:42"></template><template id="P:43"></template><template id="P:44"></template><template id="P:45"></template><template id="P:46"></template><template id="P:47"></template><template id="P:48"></template><template id="P:49"></template></div><link rel="alternate" hrefLang="zh" href="https://mlog.uz/zh/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ja" href="https://mlog.uz/ja/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ko" href="https://mlog.uz/ko/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ar" href="https://mlog.uz/ar/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="hi" href="https://mlog.uz/hi/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="tr" href="https://mlog.uz/tr/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="nl" href="https://mlog.uz/nl/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="pl" href="https://mlog.uz/pl/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="sv" href="https://mlog.uz/sv/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="no" href="https://mlog.uz/no/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="da" href="https://mlog.uz/da/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="fi" href="https://mlog.uz/fi/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="cs" href="https://mlog.uz/cs/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="hu" href="https://mlog.uz/hu/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ro" href="https://mlog.uz/ro/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="bg" href="https://mlog.uz/bg/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="hr" href="https://mlog.uz/hr/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="sk" href="https://mlog.uz/sk/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="sl" href="https://mlog.uz/sl/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="et" href="https://mlog.uz/et/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="lv" href="https://mlog.uz/lv/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="lt" href="https://mlog.uz/lt/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="el" href="https://mlog.uz/el/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="he" href="https://mlog.uz/he/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="th" href="https://mlog.uz/th/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="vi" href="https://mlog.uz/vi/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="id" href="https://mlog.uz/id/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="bn" href="https://mlog.uz/bn/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="uk" href="https://mlog.uz/uk/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="uz" href="https://mlog.uz/uz/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="fa" href="https://mlog.uz/fa/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="gu" href="https://mlog.uz/gu/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="kn" href="https://mlog.uz/kn/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ml" href="https://mlog.uz/ml/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="mr" href="https://mlog.uz/mr/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="ta" href="https://mlog.uz/ta/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="te" href="https://mlog.uz/te/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><link rel="alternate" hrefLang="x-default" href="https://mlog.uz/en/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><meta name="format-detection" content="telephone=no, address=no, email=no"/><meta name="google-site-verification" content="your-google-verification-code"/><meta name="yandex-verification" content="your-yandex-verification-code"/><meta property="og:title" content="Actions Serveur React : Un Guide Complet sur le Traitement de Formulaires et l'Intégration Serveur"/><meta property="og:description" content="Découvrez la puissance des Actions Serveur React pour un traitement de formulaires et des mutations de données côté serveur fluides. Apprenez à créer des applications web efficaces, sécurisées et conviviales."/><meta property="og:url" content="https://mlog.uz/fr/blog/React%20Server%20Actions%3A%20A%20Comprehensive%20Guide%20to%20Form%20Processing%20and%20Server%20Integration"/><meta property="og:site_name" content="MLOG - Blog Platform"/><meta property="og:locale" content="fr"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2025-08-30T07:51:25.868Z"/><meta property="article:modified_time" content="2025-08-30T07:51:25.868Z"/><meta property="article:author" content="MEZES"/><meta property="article:tag" content="Actions Serveur React"/><meta property="article:tag" content="composants serveur"/><meta property="article:tag" content="traitement de formulaires"/><meta property="article:tag" content="rendu côté serveur"/><meta property="article:tag" content="mutations de données"/><meta property="article:tag" content="framework React"/><meta property="article:tag" content="développement web"/><meta property="article:tag" content="récupération de données"/><meta property="article:tag" content="intégration serveur"/><meta property="article:tag" content="amélioration progressive"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="mlog.uz"/><meta name="twitter:creator" content="MEZES"/><meta name="twitter:title" content="Actions Serveur React : Un Guide Complet sur le Traitement de Formulaires et l'Intégration Serveur"/><meta name="twitter:description" content="Découvrez la puissance des Actions Serveur React pour un traitement de formulaires et des mutations de données côté serveur fluides. Apprenez à créer des applications web efficaces, sécurisées et conviviales."/><meta name="twitter:image" content="https://mlog.uz/images/mlog.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="32x32"/><link rel="icon" href="/images/mlog-192.png"/><link rel="apple-touch-icon" href="/images/mlog-192.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div hidden id="S:4"></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"></div><script>$RS("S:b","P:b")</script><div hidden id="S:c"></div><script>$RS("S:c","P:c")</script><div hidden id="S:d"></div><script>$RS("S:d","P:d")</script><div hidden id="S:e"></div><script>$RS("S:e","P:e")</script><div hidden id="S:f"></div><script>$RS("S:f","P:f")</script><div hidden id="S:10"></div><script>$RS("S:10","P:10")</script><div hidden id="S:11"></div><script>$RS("S:11","P:11")</script><div hidden id="S:12"></div><script>$RS("S:12","P:12")</script><div hidden id="S:13"></div><script>$RS("S:13","P:13")</script><div hidden id="S:14"></div><script>$RS("S:14","P:14")</script><div hidden id="S:15"></div><script>$RS("S:15","P:15")</script><div hidden id="S:16"></div><script>$RS("S:16","P:16")</script><div hidden id="S:17"></div><script>$RS("S:17","P:17")</script><div hidden id="S:18"></div><script>$RS("S:18","P:18")</script><div hidden id="S:19"></div><script>$RS("S:19","P:19")</script><div hidden id="S:1a"></div><script>$RS("S:1a","P:1a")</script><div hidden id="S:1b"></div><script>$RS("S:1b","P:1b")</script><div hidden id="S:1c"></div><script>$RS("S:1c","P:1c")</script><div hidden id="S:1d"></div><script>$RS("S:1d","P:1d")</script><div hidden id="S:1e"></div><script>$RS("S:1e","P:1e")</script><div hidden id="S:1f"></div><script>$RS("S:1f","P:1f")</script><div hidden id="S:20"></div><script>$RS("S:20","P:20")</script><div hidden id="S:21"></div><script>$RS("S:21","P:21")</script><div hidden id="S:22"></div><script>$RS("S:22","P:22")</script><div hidden id="S:23"></div><script>$RS("S:23","P:23")</script><div hidden id="S:24"></div><script>$RS("S:24","P:24")</script><div hidden id="S:25"></div><script>$RS("S:25","P:25")</script><div hidden id="S:26"></div><script>$RS("S:26","P:26")</script><div hidden id="S:27"></div><script>$RS("S:27","P:27")</script><div hidden id="S:28"></div><script>$RS("S:28","P:28")</script><div hidden id="S:29"></div><script>$RS("S:29","P:29")</script><div hidden id="S:2a"></div><script>$RS("S:2a","P:2a")</script><div hidden id="S:2b"></div><script>$RS("S:2b","P:2b")</script><div hidden id="S:2c"></div><script>$RS("S:2c","P:2c")</script><div hidden id="S:2d"></div><script>$RS("S:2d","P:2d")</script><div hidden id="S:2e"></div><script>$RS("S:2e","P:2e")</script><div hidden id="S:2f"></div><script>$RS("S:2f","P:2f")</script><div hidden id="S:30"></div><script>$RS("S:30","P:30")</script><div hidden id="S:31"></div><script>$RS("S:31","P:31")</script><div hidden id="S:32"></div><script>$RS("S:32","P:32")</script><div hidden id="S:33"></div><script>$RS("S:33","P:33")</script><div hidden id="S:34"></div><script>$RS("S:34","P:34")</script><div hidden id="S:35"></div><script>$RS("S:35","P:35")</script><div hidden id="S:36"></div><script>$RS("S:36","P:36")</script><div hidden id="S:37"></div><script>$RS("S:37","P:37")</script><div hidden id="S:38"></div><script>$RS("S:38","P:38")</script><div hidden id="S:39"></div><script>$RS("S:39","P:39")</script><div hidden id="S:3a"></div><script>$RS("S:3a","P:3a")</script><div hidden id="S:3b"></div><script>$RS("S:3b","P:3b")</script><div hidden id="S:3c"></div><script>$RS("S:3c","P:3c")</script><div hidden id="S:3d"></div><script>$RS("S:3d","P:3d")</script><div hidden id="S:3e"></div><script>$RS("S:3e","P:3e")</script><div hidden id="S:3f"></div><script>$RS("S:3f","P:3f")</script><div hidden id="S:40"></div><script>$RS("S:40","P:40")</script><div hidden id="S:41"></div><script>$RS("S:41","P:41")</script><div hidden id="S:42"></div><script>$RS("S:42","P:42")</script><div hidden id="S:43"></div><script>$RS("S:43","P:43")</script><div hidden id="S:44"></div><script>$RS("S:44","P:44")</script><div hidden id="S:45"></div><script>$RS("S:45","P:45")</script><div hidden id="S:46"></div><script>$RS("S:46","P:46")</script><div hidden id="S:47"></div><script>$RS("S:47","P:47")</script><div hidden id="S:48"></div><script>$RS("S:48","P:48")</script><div hidden id="S:49"></div><script>$RS("S:49","P:49")</script><script>$RC("B:0","S:0")</script></body></html>