# General Translation Changelog: gt-react 10.19.0: Hot reload delle traduzioni per le SPA
URL: https://generaltranslation.com/it/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" />

## Panoramica

`gt-react/browser` ora supporta l&#39;hot reload delle traduzioni in sviluppo. In precedenza, ogni volta che modificavi il codice in un&#39;app GT lato browser, dovevi eseguire di nuovo il comando di traduzione per vedere le traduzioni aggiornate. Con questa release, le traduzioni vengono precalcolate a runtime durante lo sviluppo, senza bisogno di ripetere manualmente la traduzione.

Questo porta `gt-react/browser` allo stesso livello del flusso di traduzione standard di `gt-react`. Tieni presente che `gt-react/browser` è solo per **single-page application (SPA)** — se usi un framework con rendering lato server, usa `gt-react` (non `gt-react/browser`). Questa funzionalità è inoltre **solo per lo sviluppo** — le build di produzione continuano a usare traduzioni precalcolate come prima.

## Come funziona

Il plugin del compilatore inserisce chiamate di traduzione runtime a livello di modulo. L&#39;esecuzione del rendering viene sospesa finché non vengono risolte.

Quando `devHotReload` è abilitato, il compilatore aggiunge le chiamate `GtInternalRuntimeTranslateString` e `GtInternalRuntimeTranslateJsx`, che preriscaldano la cache delle traduzioni al caricamento del modulo. Per JSX, le traduzioni possono anche essere risolte tramite una chiamata a Suspense all&#39;interno del componente [`<T>`](/docs/react/reference/components/t) stesso, anziché essere caricate a livello di modulo.

Poiché le traduzioni avvengono a runtime, viene tradotta solo la lingua verso cui l&#39;utente naviga effettivamente — a differenza degli approcci build-time, che devono generare traduzioni per ogni lingua configurata a ogni build di sviluppo, anche se poi non le visualizzi mai.

Le traduzioni recuperate a runtime vengono memorizzate nella cache di localStorage, quindi persistono tra un aggiornamento della pagina e l&#39;altro.

## Configurazione

### 1. Aggiungi il plugin del compilatore

L&#39;hot reload in fase di sviluppo richiede il plugin del compilatore GT. Se non l&#39;hai già fatto, aggiungilo alla configurazione del bundler — ad esempio, il 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 })],
});
```

Per gli altri bundler, consulta lo [SPA Quickstart di `gt-react`](/docs/react/react-spa-quickstart).

### 2. Abilita l&#39;hot reload in `gt.config.json`

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

Per impostazione predefinita, `devHotReload: true` abilita l&#39;hot reload per le stringhe, ma non per JSX. JSX è disattivato perché il componente [`<T>`](/docs/react/reference/components/t) gestisce già la traduzione del JSX a runtime tramite Suspense, quindi non è necessario bloccare il caricamento del modulo in attesa che venga completata. Se necessario, puoi configurare queste opzioni separatamente:

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

### 3. Passa le credenziali a `bootstrap()`

Devi anche passare direttamente l&#39;ID del progetto e la chiave API di sviluppo alla chiamata `bootstrap()`, insieme a una funzione [`loadTranslations`](/docs/react/reference/functions/load-translations). Si tratta di una particolarità dell&#39;implementazione attuale che prevediamo di semplificare in una release futura.

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

## Link

* [Dev log precedente: abbandono del React context (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.