# General Translation Key Concepts: Contenu dynamique
URL: https://generaltranslation.com/fr/docs/key-concepts/dynamic-content.mdx
---
title: Contenu dynamique
description: Un bref aperçu de l'utilisation du contenu dynamique dans GT.
---

## Aperçu

Le **contenu dynamique** désigne généralement tout contenu susceptible de changer en fonction de l’utilisateur, du contexte, de l’environnement, etc.
À l’inverse, le **contenu statique** reste identique quels que soient l’utilisateur, le contexte, l’environnement, etc.

<Accordions>
  <Accordion title="Quelle est la différence entre le contenu dynamique et le contenu statique ?">
    TL;DR

    * Le contenu statique ne change jamais (chaînes de caractères brutes, texte, etc.).
    * Le contenu dynamique peut changer (noms, e-mails, heure, langue, etc.).

    **Qu’est-ce que le contenu statique ?**

    Le contenu statique désigne généralement tout texte brut présent dans le bundle servi à vos utilisateurs.
    En règle générale, tout texte ou toute chaîne de caractères qu’un développeur peut lire dans le code source est du texte statique.

    Par exemple, prenons ce fichier :

    ```jsx title="Landing.jsx" copy

    export default function Landing() {
        return (
            <> Welcome to my app!</>
        );
    }
    ```

    Le texte « Welcome to my app! » est du contenu statique, car il ne change jamais.

    Mais que se passerait-il si nous voulions modifier la page pour qu’elle réagisse selon que l’utilisateur est connecté ou non :

    ```jsx title="Landing.jsx" copy

    export default function Landing(user) {

        if (user) {
            return (
                <h1> Welcome to my app, {user.name}! </h1>
            );
        }
        
        return (
            <h1> Welcome to my app!</h1>
        );
    }
    ```

    Même si ces deux phrases sont affichées de manière conditionnelle, elles sont toutes deux considérées comme du texte statique.
    Rappelez-vous notre règle générale : nous pouvons voir ce contenu en lisant le code source dans `landing.jsx`.

    Cependant, `{user.name}` est considéré comme du contenu dynamique, car il peut changer.
    Nous ne pouvons pas savoir ce qui s’affichera à l’écran de l’utilisateur simplement en lisant le fichier `landing.jsx`.
  </Accordion>
</Accordions>

## &quot;Tx ou ne pas Tx&quot;

Parfois, on veut traduire du contenu dynamique, mais à d&#39;autres moments, on veut qu&#39;il reste inchangé.

Un bon exemple serait l&#39;adresse e-mail ou le nom d&#39;un utilisateur.
Un autre exemple pourrait être le solde d&#39;un compte bancaire ou le numéro de sécurité sociale d&#39;un utilisateur.
De tels éléments (1) n&#39;ont généralement pas besoin d&#39;être traduits lorsque votre application est affichée dans une autre langue et (2) peuvent varier (dans ce cas, d&#39;un utilisateur à l&#39;autre).

### Exemple

```jsx title="Greeting.jsx" copy
import { T, Var } from 'gt-next'

export default function Greeting(name) {
    return (
        <T id='greeting'>
            Hello, <Var>{name}</Var>!
        </T>
    );
}
```

En matière de traduction, cela présente deux avantages :

1. Vous n’avez pas besoin de créer une traduction pour chaque nom possible.
   * En utilisant `<Var>`, nous ne générons qu’une seule traduction, qui ressemblerait essentiellement à ceci :
     * `¡Hola, $&#123;name&#125;!`
   * Si nous n’utilisons pas `<Var>`, nous devrions effectuer une traduction on-demand pour chaque nom distinct :
     * &quot;¡Hola, Alice!&quot;, &quot;¡Hola, Bob!&quot;, &quot;¡Hola, Charlie!&quot;, &quot;¡Hola, David!&quot;, ...
2. Vous n’avez pas non plus à craindre que les noms eux-mêmes soient convertis en une version traduite : (c.-à-d. &quot;¡Hola, Alicia!&quot;, &quot;¡Hola, Roberto!&quot;, ...).

<Callout type="info">
  **Remarque :** Les composants `<Var>`, `<Currency>`, `<DateTime>` et `<Num>` sont disponibles dans `gt-next`, `gt-react` et `gt-react-native`.
</Callout>

Comme vous pouvez le voir, le composant `<Var>` doit être utilisé pour entourer tout contenu qui doit rester inchangé, quel que soit le paramètre régional.
De cette façon, nous évitons d’avoir à créer des traductions pour chaque valeur possible du contenu dynamique.

En entourant des informations privées d’un composant `<Var>`, vous pouvez vous assurer que ces informations ne sont pas envoyées à l’API de General Translation.

<Callout>
  **Exceptions**

  Les exceptions à l’affirmation ci-dessus sont (1) le cas d’un composant `<T>` imbriqué utilisé à l’intérieur d’un composant `<Var>` (c.-à-d. que les enfants du composant `<T>` imbriqué seront traduits)
  ou (2) lorsque des données sont intentionnellement transmises à notre API par un autre moyen depuis un enfant du composant `<Var>` (c.-à-d. un appel `fetch`).
  Cependant, ce n’est pas l’usage prévu du composant `<Var>` ni de l’API de General Translation, et cela peut nuire aux temps de chargement et aux performances.
</Callout>