# gt-react: General Translation React SDK: Memorizzazione locale delle traduzioni
URL: https://generaltranslation.com/it/docs/react/guides/local-tx.mdx
---
title: Memorizzazione locale delle traduzioni
description: Salva le traduzioni nel bundle della tua app invece di usare una CDN
---

{/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica invece il template in content/docs-templates/. */}


## Cosa sono le traduzioni locali?

Le traduzioni locali vengono archiviate nel bundle della tua app, anziché essere recuperate da una CDN (Content Distribution Network). Quando aggiungi il comando `gt translate` al processo di build, vengono generate traduzioni in formato JSON. Il passaggio finale consiste nell'inserire queste traduzioni nella tua app, dove potranno essere utilizzate.

Esistono due modi per farlo:

1. **Nel bundle della tua app** (locale): salva le traduzioni nel bundle della tua app dopo la generazione
2. **In una CDN** (predefinito): recupera le traduzioni da una CDN in fase di runtime

Per impostazione predefinita, `gt-react` recupera le traduzioni dalla CDN di General Translation. Quando traduci la tua app usando la nostra API, le traduzioni vengono salvate automaticamente sulla nostra CDN.

<Callout>
  **Comportamento predefinito:** GT usa l&#39;archiviazione su CDN per impostazione predefinita. Passa all&#39;archiviazione locale solo se ti servono i vantaggi specifici che offre.
</Callout>

## Pro e contro

### Vantaggi delle traduzioni locali

* **Tempi di caricamento più rapidi**: Le traduzioni locali vengono servite direttamente dalla tua app e si caricano più velocemente rispetto a quelle servite da una CDN
* **Nessuna dipendenza da servizi esterni**: La capacità della tua app di caricare le traduzioni non dipende dalla disponibilità della CDN. Se non vengono trovate traduzioni per un&#39;impostazione regionale, l&#39;app usa automaticamente la lingua predefinita
* **Funziona offline**: Le traduzioni sono incluse nel pacchetto della tua app

### Svantaggi delle traduzioni locali

* **Aumento delle dimensioni del bundle**: Le traduzioni locali aumentano le dimensioni del bundle della tua app, rendendone potenzialmente più lento il caricamento iniziale
* **Gestione dei contenuti**: Per modificare una traduzione, devi ridistribuire la tua app con la nuova traduzione ogni volta che apporti modifiche

## Setup

### Passaggio 1: Crea la funzione `loadTranslations`

Aggiungi un file `loadTranslations.[js|ts]` in `./src` con il seguente contenuto:

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


### Passaggio 2: Configura GTProvider

Passa `loadTranslations` come proprietà al componente [`<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>
  );
}
```


### Passaggio 3: Configura la CLI

Esegui il comando di configurazione e seleziona l&#39;archiviazione locale:

```bash
npx gt configure
```

Quando richiesto:

* **Salvare nel CDN?** Seleziona &quot;No&quot;
* **Directory delle traduzioni:** la CLI userà automaticamente `./src/_gt`

In alternativa, puoi configurare manualmente il file `gt.config.json` per usare la traduzione locale. Per maggiori informazioni, consulta la [documentazione sulla configurazione della CLI](/docs/cli/reference/config).


### Passaggio 4: Genera le traduzioni

Ora, quando esegui il comando `translate`, le traduzioni verranno scaricate automaticamente e incluse nella tua codebase:

```bash
npx gt translate
```

Le traduzioni verranno archiviate in `src/_gt/` e incluse nel bundle della tua app.


## Integrazione con il processo di build

### Processo di build in React

Aggiungi la generazione delle traduzioni allo script di build:

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


### Pipeline di CI/CD

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


## Problemi comuni

### File di traduzione mancanti

Assicurati che le traduzioni vengano generate prima di eseguire la build:

```bash
# ❌ Build senza traduzioni
<...YOUR_BUILD_COMMAND...>

# ✅ Genera prima le traduzioni
npx gt translate && <...YOUR_BUILD_COMMAND...>
```


### Errori nel percorso di importazione

Assicurati che la struttura delle directory corrisponda nella funzione `loadTranslations`:

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

// ✅ Percorso corretto per src/_gt
const t = await import(`./_gt/${locale}.json`);
```


### Bundle di dimensioni elevate

Valuta il code splitting per le app che supportano molte lingue:

```ts
// Carica le traduzioni solo quando necessario
export default async function loadTranslations(locale: string) {
  // Carica solo se l'impostazione regionale è attiva
  if (locale === getCurrentLocale()) {
    const translations = await import(`./_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}
```

<Callout>
  L&#39;archiviazione locale è la soluzione migliore per le app con traduzioni stabili che non richiedono aggiornamenti frequenti.
</Callout>


## Passaggi successivi

* [Guida alle lingue](/docs/react/guides/languages) - Configura le lingue supportate