# react-native: Stockage local des traductions
URL: https://generaltranslation.com/fr/docs/react-native/guides/local-tx.mdx
---
title: Stockage local des traductions
description: Stockez les traductions 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/ à la place. */}


## 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 Delivery Network). Lorsque vous ajoutez la commande `gt translate` à votre processus de build, cela génère des traductions au format JSON. La dernière étape consiste à intégrer ces traductions à 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-native` 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 plus rapides** : Les traductions locales sont fournies directement par votre application et se chargent plus vite que celles diffusées via 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’est trouvée pour un paramètre régional, l’application bascule automatiquement vers la langue par défaut
* **Fonctionne hors ligne** : Les traductions sont intégrées à votre application

### Inconvénients des traductions locales

* **Taille du bundle accrue** : Les traductions locales augmentent la taille du bundle de votre application, ce qui peut ralentir son chargement initial
* **Gestion du contenu** : Pour modifier une traduction, vous devez redéployer votre application avec la nouvelle traduction à 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 : Configurer GTProvider

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

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

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


### Étape 3 : Configurer le 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 &quot;Non&quot;
* **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 base de code :

```bash
npx gt translate
```

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


## Intégration au processus de build

### Processus de build 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 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’importation

Respectez la structure de vos répertoires 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`);
```

### Taille du bundle élevée

Envisagez le fractionnement du code pour les applications prenant en charge 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 n&#39;ont pas besoin d&#39;être mises à jour fréquemment.
</Callout>


## Étapes suivantes

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