# gt-react: General Translation React SDK: Stockage local des traductions
URL: https://generaltranslation.com/fr/docs/react/guides/local-tx.mdx
---
title: Stockage local des traductions
description: Stockez les traductions directement dans le bundle de votre application au lieu d’utiliser un CDN
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas directement. Modifiez le modèle dans content/docs-templates/. */}


## Que sont les traductions locales ?

Les traductions locales sont stockées dans le bundle de votre application, au lieu d’être récupérées depuis un CDN (Content Distribution Network). Lorsque vous ajoutez la commande `gt translate` à votre processus de build, des traductions sont générées au format JSON. La dernière étape consiste à intégrer ces traductions dans votre application pour pouvoir les utiliser.

Il existe deux façons de procéder :

1. **Dans le bundle de votre application** (local) : enregistrez les traductions dans le bundle de votre application après leur génération
2. **Dans un CDN** (par défaut) : récupérez les traductions depuis un CDN à l’exécution

Par défaut, `gt-react` récupère les traductions depuis le CDN de General Translation. Lorsque vous traduisez votre application à l’aide de notre API, les traductions sont automatiquement enregistrées sur notre CDN.

<Callout>
  **Comportement par défaut :** GT utilise le stockage sur CDN par défaut. Ne passez au stockage local que si vous avez besoin des avantages spécifiques qu’il offre.
</Callout>

## Arbitrages

### Avantages des traductions locales

* **Temps de chargement réduits** : les traductions locales sont fournies directement par votre application et se chargent plus vite que des traductions servies depuis un CDN
* **Aucune dépendance à des services externes** : la capacité de votre application à charger les traductions ne dépend pas de la disponibilité du CDN. Si aucune traduction n&#39;est trouvée pour un paramètre régional, l&#39;application revient automatiquement à la langue par défaut
* **Fonctionne hors ligne** : les traductions sont intégrées à votre application

### Inconvénients des traductions locales

* **Augmentation de la taille du bundle** : Les traductions locales augmentent la taille du bundle de votre application, ce qui peut ralentir son chargement au démarrage
* **Gestion du contenu** : Pour modifier une traduction, vous devez redéployer votre application avec la nouvelle version à chaque changement

## Configuration

### Étape 1 : Créer la fonction de chargement

Ajoutez un fichier `loadTranslations.[js|ts]` dans `./src` avec le contenu suivant :

```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  const t = await import(`./_gt/${locale}.json`);
  return t.default;
}
```


### Étape 2 : Configurez GTProvider

Passez `loadTranslations` en tant que prop au composant [`<GTProvider>`](/docs/react/api/components/gtprovider) :

```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react';
import loadTranslations from './loadTranslations';

export default function App() {
  return (
    <GTProvider loadTranslations={loadTranslations} locales={['es', 'fr']}>
      <YourApp />
    </GTProvider>
  );
}
```


### Étape 3 : Configurer la CLI

Exécutez la commande de configuration et sélectionnez le stockage local :

```bash
npx gt configure
```

Lorsque vous y êtes invité :

* **Enregistrer sur le CDN ?** Sélectionnez « Non »
* **Répertoire des traductions :** le CLI utilisera automatiquement `./src/_gt`

Vous pouvez également configurer manuellement le fichier `gt.config.json` pour utiliser des traductions locales. Consultez la [documentation de configuration du CLI](/docs/cli/reference/config) pour en savoir plus.


### Étape 4 : Générer les traductions

Désormais, lorsque vous exécutez la commande `translate`, les traductions sont automatiquement téléchargées et incluses dans votre codebase :

```bash
npx gt translate
```

Les traductions seront stockées dans `src/_gt/` et incluses dans le bundle de votre application.


## Intégration au processus de build

### Processus de build de React

Ajoutez la génération des traductions à votre script de build :

```json
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### Pipeline de CI/CD

```yaml
# .github/workflows/deploy.yml
- name: Generate Translations
  run: npx gt translate
  
- name: Build Application  
  run: npm run build
```


## Problèmes courants

### Fichiers de traduction manquants

Assurez-vous que les traductions sont générées avant de lancer le build :

```bash
# ❌ Build sans traductions
<...YOUR_BUILD_COMMAND...>

# ✅ Générer les traductions en premier
npx gt translate && <...YOUR_BUILD_COMMAND...>
```


### Erreurs de chemin d&#39;importation

Veillez à ce que la structure de vos répertoires corresponde à celle définie dans la fonction de chargement :

```ts
// ❌ Chemin incorrect
const t = await import(`../translations/${locale}.json`);

// ✅ Chemin correct pour src/_gt
const t = await import(`./_gt/${locale}.json`);
```


### Bundle de grande taille

Envisagez le fractionnement du code pour les applications comportant de nombreuses langues :

```ts
// Charger les traductions uniquement si nécessaire
export default async function loadTranslations(locale: string) {
  // Charger uniquement si le paramètre régional est actif
  if (locale === getCurrentLocale()) {
    const translations = await import(`./_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}
```

<Callout>
  Le stockage local convient mieux aux applications dont les traductions sont stables et ne nécessitent pas de mises à jour fréquentes.
</Callout>


## Prochaines étapes

* [Guide des langues](/docs/react/guides/languages) - Configurez les langues prises en charge