# General Translation React SDKs (gt-react, gt-next, gt-react-native): getTranslationsSnapshot
URL: https://generaltranslation.com/ja/docs/react/reference/functions/get-translations-snapshot.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: `<GTProvider>` 用にロケールの翻訳を読み込みます。getTranslationsSnapshot の API リファレンス。

`getTranslationsSnapshot` 関数は、[`<GTProvider>`](/docs/react/reference/components/gt-provider) が `translations` prop に期待する形式で、指定したロケールの翻訳を読み込みます。初期化後にこの関数を呼び出すと、プロバイダー が同期的に使用する スナップショット を生成できます。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。*

`gt-next` では、この関数を Pages Router で使用してください。App Router の React Server Component 用エクスポートは例外を throw します。App Router のサーバー翻訳の setup は `gt-next` が管理します。

## 概要 [#overview]

`gt-react` を[初期化](/docs/react/reference/config#initialization)したら、アクティブなロケールの `getTranslationsSnapshot` を await し、その結果をプロバイダーに渡します。

```tsx
const translations = await getTranslationsSnapshot(locale);
```

*注: `getTranslationsSnapshot` は、使用する翻訳キャッシュを作成する [`initializeGT`](/docs/react/reference/config#initialize) または [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) の後で呼び出してください。*

## 仕組み [#how-it-works]

`getTranslationsSnapshot` は、設定された [`loadTranslations`](/docs/react/reference/functions/load-translations) 関数に 翻訳キャッシュ を通じたロケールの読み込みを要求し、シリアライズ可能な スナップショット を返します。この スナップショット を [`<GTProvider>`](/docs/react/reference/components/gt-provider) に渡すことで、読み込み時のちらつきなく翻訳済みコンテンツを同期的に render できます。

## パラメータ [#parameters]

| パラメータ               | 説明              | 型        | 任意  | デフォルト |
| ------------------- | --------------- | -------- | --- | ----- |
| [`locale`](#locale) | 翻訳を読み込む対象のロケール。 | `string` | いいえ | —     |

### `locale` [#locale]

**型** `string` · **必須**

読み込む翻訳のロケールを、BCP 47 コードで指定します。

## 戻り値 [#returns]

**型** `Promise<Record<Locale, Record<Hash, Translation>>>`

ロケールの翻訳スナップショットに解決される Promise です。`translations` prop として [`<GTProvider>`](/docs/react/reference/components/gt-provider) が想定する形式になっています。

## エラー [#errors]

開発環境では、[`loadTranslations`](/docs/react/reference/functions/load-translations) が reject した場合、`getTranslationsSnapshot` は警告をログに出力し、`{}` で解決します。失敗したロケールは省略されるため、スナップショットを プロバイダー に渡しても空のエントリが登録されることはありません。

本番環境では、翻訳キャッシュ が loader のエラーをログに出力して空の catalog を返すため、スナップショットは `{ [locale]: {} }` を含みます。失敗した読み込みは元の cache には保存されないため、後続の読み込みで再試行できますが、そのスナップショットを別の プロバイダー に渡すと、その プロバイダー に空の catalog が登録されてしまう可能性があります。

loader がエラーを捕捉して `{}` を返す場合、cache はその空オブジェクトを読み込み成功とみなし、`cacheExpiryTime` が経過するまで保持します。

## 例 [#examples]

*例では `gt-react` からインポートしています。代わりに、ご使用のフレームワークのパッケージからインポートしてください。*

```tsx title="src/routes/root.tsx"
import {
  GTProvider,
  initializeGT,
  getTranslationsSnapshot,
  parseLocale,
} from 'gt-react';
import gtConfig from '../../gt.config.json';

const loadTranslations = (locale: string) =>
  import(`../_gt/${locale}.json`).then((m) => m.default);

initializeGT({ ...gtConfig, loadTranslations });

export async function loadRoot(request: Request) {
  const locale = parseLocale(request);
  return {
    locale,
    translations: await getTranslationsSnapshot(locale), // [!code highlight]
  };
}

export function Root({ locale, translations, children }) {
  return (
    <GTProvider locale={locale} translations={translations}>
      {children}
    </GTProvider>
  );
}
```

## メモ [#notes]

* 初期化が完了したら `getTranslationsSnapshot` を呼び出します。
* その結果を [`<GTProvider>`](/docs/react/reference/components/gt-provider) の `translations` prop に渡します。

## Sitemap

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