# gt-react: General Translation React SDK: Almacenamiento local de traducciones
URL: https://generaltranslation.com/es/docs/react/guides/local-tx.mdx
---
title: Almacenamiento local de traducciones
description: Guarda las traducciones en el bundle de tu aplicación en lugar de usar una CDN
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## ¿Qué son las traducciones locales?

Las traducciones locales se almacenan en el bundle de tu app, en lugar de obtenerse desde una CDN (Content Distribution Network). Cuando agregas el comando `gt translate` a tu proceso de compilación, se generan traducciones en formato JSON. El paso final es incorporar esas traducciones a tu app para poder usarlas.

Hay dos formas de hacerlo:

1. **En el bundle de tu app** (local): Guarda las traducciones en el bundle de tu app después de generarlas
2. **En una CDN** (predeterminado): Obtén las traducciones desde una CDN en runtime

De forma predeterminada, `gt-react` obtiene las traducciones desde la CDN de General Translation. Cuando traduces tu app con nuestra API, las traducciones se guardan automáticamente en nuestra CDN.

<Callout>
  **Comportamiento predeterminado:** GT usa almacenamiento en CDN de forma predeterminada. Cambia al almacenamiento local solo si necesitas las ventajas específicas que ofrece.
</Callout>

## Consideraciones

### Ventajas de las traducciones locales

* **Tiempos de carga más rápidos**: Las traducciones locales se sirven directamente desde tu aplicación, por lo que cargan más rápido que las traducciones servidas desde una CDN
* **Sin dependencia de servicios externos**: La capacidad de tu aplicación para cargar traducciones no depende de la disponibilidad de la CDN. Si no se encuentran traducciones para una configuración regional, la aplicación vuelve automáticamente al idioma predeterminado
* **Funciona sin conexión**: Las traducciones vienen incluidas con tu aplicación

### Desventajas de las traducciones locales

* **Mayor tamaño del bundle**: Las traducciones locales aumentan el tamaño del bundle de tu aplicación, lo que puede hacer que tarde más en cargarse inicialmente
* **Gestión del contenido**: Para editar una traducción, debes volver a desplegar tu aplicación con la nueva traducción cada vez que realices cambios

## Configuración

### Paso 1: Crear la función de carga

Añade un archivo `loadTranslations.[js|ts]` en `./src` con el siguiente contenido:

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


### Paso 2: Configura GTProvider

Pasa `loadTranslations` como prop 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>
  );
}
```


### Paso 3: Configurar la CLI

Ejecuta el comando de configuración y selecciona el almacenamiento local:

```bash
npx gt configure
```

Cuando se te indique:

* **¿Guardar en la CDN?** Selecciona &quot;No&quot;
* **Directorio de traducción:** El CLI usará automáticamente `./src/_gt`

Como alternativa, puedes configurar manualmente el archivo `gt.config.json` para usar traducciones locales. Consulta la [documentación de configuración del CLI](/docs/cli/reference/config) para más información.


### Paso 4: Genera las traducciones

Ahora, cuando ejecutes el comando translate, las traducciones se descargarán automáticamente y se incluirán en tu código base:

```bash
npx gt translate
```

Las traducciones se almacenarán en `src/_gt/` y se empaquetarán con tu aplicación.


## Integración con la compilación

### Proceso de compilación en React

Añade la generación de traducciones a tu script de compilación:

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


### Flujo de CI/CD

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


## Problemas comunes

### Faltan archivos de traducción

Asegúrate de generar las traducciones antes de compilar:

```bash
# ❌ Compilar sin traducciones
<...YOUR_BUILD_COMMAND...>

# ✅ Generar las traducciones primero
npx gt translate && <...YOUR_BUILD_COMMAND...>
```


### Errores en la ruta de importación

Haz coincidir la estructura de directorios en la función de carga:

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

// ✅ Ruta correcta para src/_gt
const t = await import(`./_gt/${locale}.json`);
```


### Bundle de gran tamaño

Considera dividir el código en apps con muchos idiomas:

```ts
// Cargar traducciones solo cuando sea necesario
export default async function loadTranslations(locale: string) {
  // Solo cargar si la configuración regional está activa
  if (locale === getCurrentLocale()) {
    const translations = await import(`./_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}
```

<Callout>
  El almacenamiento local funciona mejor en aplicaciones con traducciones estables que no requieren actualizaciones frecuentes.
</Callout>


## Próximos pasos

* [Guía de idiomas](/docs/react/guides/languages) - Configura los idiomas admitidos