# gt-react: General Translation React SDK: Локальное хранилище переводов
URL: https://generaltranslation.com/ru/docs/react/guides/local-tx.mdx
---
title: Локальное хранилище переводов
description: Храните переводы в бандле приложения вместо CDN
---

{/* СГЕНЕРИРОВАНО АВТОМАТИЧЕСКИ: Не редактируйте напрямую. Вместо этого измените шаблон в content/docs-templates/. */}


## Что такое локальные переводы?

Локальные переводы хранятся в бандле вашего приложения, а не загружаются из CDN (сети доставки контента). Когда вы добавляете команду `gt translate` в процесс сборки, она генерирует переводы в формате JSON. Последний шаг — добавить эти переводы в приложение, чтобы их можно было использовать.

Сделать это можно двумя способами:

1. **В бандле вашего приложения** (локально): сохранять переводы в сборке приложения после генерации
2. **В CDN** (по умолчанию): загружать переводы из CDN во время выполнения

По умолчанию `gt-react` загружает переводы из CDN General Translation. Когда вы переводите приложение с помощью нашего API, переводы автоматически сохраняются в нашем CDN.

<Callout>
  **Поведение по умолчанию:** GT по умолчанию использует хранение в CDN. Переходите на локальное хранение только в том случае, если вам нужны его конкретные преимущества.
</Callout>

## Компромиссы

### Преимущества локальных переводов

* **Более быстрая загрузка**: Локальные переводы отдаются напрямую из приложения и загружаются быстрее, чем переводы с CDN
* **Нет зависимости от внешних сервисов**: Возможность приложения загружать переводы не зависит от доступности CDN. Если для локали переводы не найдены, приложение автоматически использует язык по умолчанию
* **Работает офлайн**: Переводы поставляются вместе с приложением

### Недостатки локальных переводов

* **Увеличение размера бандла**: Локальные переводы увеличивают размер бандла приложения, из-за чего оно может медленнее загружаться при первом запуске
* **Управление контентом**: Чтобы изменить перевод, вам придётся заново развёртывать приложение с обновлённым переводом после каждого изменения

## Сетап

### Шаг 1: Создайте функцию load

Добавьте файл `loadTranslations.[js|ts]` в каталог `./src` со следующим содержимым:

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


### Шаг 2: Настройте GTProvider

Передайте `loadTranslations` в качестве пропса компоненту [`<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>
  );
}
```


### Шаг 3: Настройте CLI

Выполните команду конфигурации и выберите локальное хранилище:

```bash
npx gt configure
```

Когда появится запрос:

* **Save to CDN?** Выберите &quot;No&quot;
* **Translation directory:** CLI автоматически использует `./src/_gt`

Либо вы можете вручную настроить файл `gt.config.json` для использования локальных переводов. Подробнее см. в [документации по настройке CLI](/docs/cli/reference/config).


### Шаг 4: Сгенерируйте переводы

Теперь при запуске команды `translate` переводы будут автоматически загружаться и добавляться в вашу кодовую базу:

```bash
npx gt translate
```

Переводы будут храниться в `src/_gt/` и включаться в сборку приложения.


## Интеграция в процесс сборки

### Процесс сборки в React

Добавьте генерацию переводов в скрипт сборки:

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


### CI/CD-пайплайн

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


## Частые проблемы

### Отсутствуют файлы переводов

Убедитесь, что переводы сгенерированы до сборки:

```bash
# ❌ Сборка без переводов
<...YOUR_BUILD_COMMAND...>

# ✅ Сначала сгенерируйте переводы
npx gt translate && <...YOUR_BUILD_COMMAND...>
```


### Ошибки в пути импорта

Убедитесь, что путь в функции load соответствует структуре ваших каталогов:

```ts
// ❌ Неверный путь
const t = await import(`../translations/${locale}.json`);

// ✅ Правильный путь для src/_gt
const t = await import(`./_gt/${locale}.json`);
```


### Большой размер бандла

Подумайте о разделении кода для приложений с большим количеством языков:

```ts
// Загружать переводы только при необходимости
export default async function loadTranslations(locale: string) {
  // Загружать только если локаль активна
  if (locale === getCurrentLocale()) {
    const translations = await import(`./_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}
```

<Callout>
  Локальное хранилище лучше всего подходит для приложений со стабильными переводами, которые не нужно часто обновлять.
</Callout>


## Что дальше

* [Руководство по языкам](/docs/react/guides/languages) — настройте поддерживаемые языки