# General Translation Changelog: gt-react 10.19.0: Rechargement à chaud des traductions pour les SPAs
URL: https://generaltranslation.com/fr/blog/gt-react_v10_19_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Ernest McCarter
Published: 2026-04-16

import Video from '@/components/Video';

<Video src="https://assets.gtx.dev/devlogs/gt-react-browser-tx-hot-reload.mp4" />

## Vue d’ensemble

`gt-react/browser` prend désormais en charge le rechargement à chaud des traductions en développement. Auparavant, chaque fois que vous modifiiez du code dans une application GT côté navigateur, vous deviez relancer la commande de traduction pour voir les traductions mises à jour. Avec cette mise à jour, les traductions sont pré-calculées à l’exécution pendant le développement — aucune étape manuelle de retraduction n’est nécessaire.

`gt-react/browser` est ainsi aligné sur le workflow de traduction standard de `gt-react`. Notez que `gt-react/browser` est réservé aux **applications monopage (SPA) uniquement** — si vous utilisez un framework avec rendu côté serveur, utilisez `gt-react` (et non `gt-react/browser`). Cette fonctionnalité est également **réservée au développement** — les builds de production continuent d’utiliser des traductions pré-calculées comme auparavant.

## Fonctionnement

Le plugin du compilateur injecte des appels de traduction à l’exécution au niveau du module. Le rendu est suspendu jusqu’à leur résolution.

Lorsque `devHotReload` est activé, le compilateur ajoute des appels à `GtInternalRuntimeTranslateString` et `GtInternalRuntimeTranslateJsx` qui préchargent le cache de traduction au chargement de votre module. Pour le JSX, les traductions peuvent aussi être résolues via un appel à Suspense dans le composant [`<T>`](/docs/react/reference/components/t) lui-même, au lieu d’être chargées au niveau du module.

Comme les traductions ont lieu à l’exécution, seule la langue vers laquelle l’utilisateur navigue réellement est traduite — contrairement aux approches au build, qui doivent générer des traductions pour chaque langue configurée à chaque build de développement, même si vous ne les consultez jamais.

Les traductions récupérées à l’exécution sont mises en cache dans localStorage, ce qui les conserve entre les actualisations de page.

## Configuration

### 1. Ajouter le plugin du compilateur

Le rechargement à chaud en développement nécessite le plugin du compilateur GT. Si ce n’est pas déjà fait, ajoutez-le à la configuration de votre bundler — par exemple, le plugin Vite :

```ts
// vite.config.ts
import { vite as gtCompiler } from "@generaltranslation/compiler";
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import gtConfig from './gt.config.json';

export default defineConfig({
  plugins: [react(), gtCompiler({ gtConfig })],
});
```

Consultez le [`gt-react` SPA Quickstart](/docs/react/react-spa-quickstart) pour les autres bundlers.

### 2. Activez le rechargement à chaud en développement dans `gt.config.json`

```json
{
  "files": {
    "gt": {
      "parsingFlags": {
        "devHotReload": true
      }
    }
  }
}
```

Par défaut, `devHotReload: true` active le rechargement à chaud pour les chaînes de caractères, mais pas pour le JSX. Le rechargement du JSX reste désactivé, car le composant [`<T>`](/docs/react/reference/components/t) gère déjà sa traduction à l’exécution via Suspense. Il n’est donc pas nécessaire de bloquer le chargement du module en attendant leur résolution. Vous pouvez les configurer séparément si nécessaire :

```json
{
  "files": {
    "gt": {
      "parsingFlags": {
        "devHotReload": {
          "strings": true,
          "jsx": false
        }
      }
    }
  }
}
```

### 3. Passez les identifiants à `bootstrap()`

Vous devez également passer directement votre ID du projet et votre clé API de développement à l’appel `bootstrap()`, ainsi qu’une fonction [`loadTranslations`](/docs/react/reference/functions/load-translations). C’est une particularité de l’implémentation actuelle que nous prévoyons de simplifier dans une prochaine version.

```tsx
await bootstrap({
  ...gtConfig,
  loadTranslations,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY,
});
```

## Liens

* [Devlog précédent : abandon du contexte React (gt-react@10.12.0)](/devlog/gt-react_v10_12_0)
* [PR #1217](https://github.com/generaltranslation/gt/pull/1217)

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.