Traductions locales

Que sont les traductions locales ?

Les traductions locales sont stockées dans le bundle de votre application, contrairement à celles récupérées depuis un CDN (Content Delivery Network).

Supposons que vous ayez ajouté la commande gtx-cli translate à votre processus CD. Cela va générer des traductions au format JSON pour votre application. L'étape finale consiste à extraire ces traductions de notre API et à les intégrer dans votre application, où elles pourront être utilisées.

Il existe deux façons de procéder :

Dans le bundle de votre application : Après la génération des traductions, enregistrez-les dans le bundle de votre application.
Dans un CDN (par défaut) : Récupérez les traductions depuis un CDN au moment de l'exécution.

Par défaut, gt-react ira chercher les traductions sur le General Translation CDN, et lors de la traduction de votre application via notre API, les traductions seront automatiquement enregistrées sur notre CDN.

Sous React, nous recommandons particulièrement d'utiliser l'option CDN. Utiliser un CDN permet de minimiser la taille du bundle de votre application.

Aperçu

Ce guide vous montrera comment stocker les traductions dans le bundle de votre application React, plutôt que d'utiliser un CDN externe, comme le nôtre. Cela signifie que les traductions seront incluses dans le bundle de votre application et évitera la dépendance à une infrastructure externe.

Dans ce guide, nous allons vous expliquer :

Les avantages et inconvénients de l'utilisation de traductions locales.

Comment configurer des traductions locales pour votre application React.

Compromis

Quels sont les avantages ?

Temps de chargement plus rapides : Les traductions locales sont servies directement depuis votre application, ce qui signifie qu'elles se chargeront plus rapidement que les 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. Avec gt-react, si des traductions ne sont pas trouvées pour une langue donnée, l'application reviendra automatiquement à la langue par défaut et affichera le contenu original.

Quels sont les inconvénients ?

Taille du bundle augmentée : Les traductions locales augmenteront la taille du bundle de votre application puisqu'elles seront servies en même temps que votre application. Cela signifie que votre application peut mettre plus de temps à se charger côté client.
Gestion du contenu : Si vous souhaitez modifier une traduction (par exemple, si vous n'aimez pas la façon dont votre contenu a été formulé dans une autre langue), vous devez redéployer votre application avec la nouvelle traduction à chaque fois que vous effectuez des modifications.

Configuration

Prérequis

Assurez-vous d'avoir déjà configuré votre application React avec GT.
Sinon, veuillez d'abord suivre le Guide de démarrage rapide ou la Configuration du projet.

Étapes

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

src/loadTranslations.ts

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

src/loadTranslations.js

export default async function loadTranslations(locale) {
  const t = await import(`./_gt/${locale}.json`);
  return t.default;
}

Passez loadTranslations en tant que prop au composant <GTProvider>.

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

Exécutez la commande suivante, et lorsque l'on vous demande si vous souhaitez enregistrer les traductions sur le CDN de GT, sélectionnez l'option "Non".

npx gtx-cli configure

Vous pouvez également configurer manuellement le fichier gt.config.json pour utiliser des traductions locales. Consultez la documentation Configuration CLI pour plus d'informations.

Désormais, lorsque vous exécutez la commande de traduction, les traductions seront automatiquement téléchargées et incluses dans votre base de code.

npx gtx-cli translate

La fonction loadTranslations sera alors utilisée pour charger ces traductions dans votre application.

Selon le framework spécifique que vous utilisez, les fichiers JSON de traduction peuvent ne pas être inclus automatiquement dans le bundle final. Veuillez consulter la documentation de votre framework pour vous assurer que les JSON sont bien inclus.

Et voilà ! Votre application chargera désormais uniquement les traductions à partir de vos fichiers locaux.

Personnalisation avancée

Vous pouvez personnaliser davantage la fonction loadTranslations pour charger les traductions depuis d'autres sources, comme votre base de données ou votre propre CDN.
Consultez la documentation loadTranslations() pour plus d'informations.

Notes

Les traductions locales sont une alternative à la récupération des traductions depuis un CDN.
Il existe des avantages et des inconvénients à utiliser des traductions locales, qui sont abordés dans la section Compromis.

Prochaines étapes

Consultez loadTranslations() pour plus d'informations sur la création d'un chargeur de traductions personnalisé.

Traductions locales

Sur cette page