# General Translation React SDKs (gt-react, gt-next, gt-react-native): Utiliser les Cache Components
URL: https://generaltranslation.com/fr/docs/react/nextjs/cache-components.mdx
---

title: Utiliser les Cache Components
description: Comment utiliser les Cache Components de Next.js avec des fonctions de requête compatibles avec les paramètres régionaux et des traductions stockées localement.
related:
  links:
    - /docs/react/nextjs/app-router-middleware
    - /docs/react/nextjs/app-router-static-site-generation
    - /docs/react/nextjs/registering-request-locales
    - /docs/react/nextjs/locale-alias-seo

---

Les Cache Components peuvent prérendre et mettre en cache du contenu localisé côté serveur. Le paramètre régional, la région et les traductions doivent tous pouvoir être résolus sans en-têtes de requête, cookies ni loader de traduction distant par défaut.

*Remarque : ce guide utilise Next.js 16 ou une version ultérieure, où les Cache Components se configurent avec `cacheComponents: true`.*

## Activer les Cache Components [#enable]

Activez les Cache Components dans `next.config.ts`. Conservez [`withGTConfig`](/docs/react/nextjs/config) autour de la configuration Next.js :

```ts title="next.config.ts"
import type { NextConfig } from 'next';
import { withGTConfig } from 'gt-next/config';

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default withGTConfig(nextConfig);
```

Lorsque les Cache Components sont activés, `gt-next` :

* Nécessite une fonction [`loadTranslations`](/docs/react/reference/functions/load-translations) personnalisée. Le loader distant par défaut n’est pas sûr lors du prérendu.
* Émet un avertissement si les fonctions de requête personnalisées [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) et [`getRegion`](/docs/react/nextjs/reference/functions/get-region) sont absentes.
* Désactive le hot reload des traductions au Runtime en développement, car il génère des requêtes dynamiques.
* Laisse Next.js gérer l’invalidation du cache au lieu d’appliquer l’expiration habituelle du cache de General Translation.

## Résoudre les valeurs de la requête [#request-values]

Placez le segment `[locale]` à la racine de l’arborescence App Router. Le layout racine doit être `app/[locale]/layout.tsx`, sans `app/layout.tsx` au-dessus.

Créez `getLocale.ts` à la racine du projet :

```ts title="getLocale.ts"
import { locale } from 'next/root-params';

export default async function getLocale() {
  return await locale();
}
```

Créez `getRegion.ts` à côté. Renvoyez une région fixe si votre sortie en dépend, ou `undefined` pour désactiver la détection de région :

```ts title="getRegion.ts"
export default async function getRegion() {
  return undefined;
}
```

`withGTConfig` détecte automatiquement les deux fichiers. S’ils se trouvent ailleurs, définissez [`getLocalePath` et `getRegionPath`](/docs/react/nextjs/config#request-function-paths).

<Callout type="warn">
  N’appelez pas `headers()` ni `cookies()` dans ces fonctions de requête. Les API de requête dynamiques ne peuvent pas s’exécuter dans une limite `"use cache"`. Lisez le paramètre régional dans `next/root-params` et renvoyez plutôt une région fixe.
</Callout>

## Stocker les traductions localement [#local-translations]

Générez les fichiers de traduction avant le build de Next.js, puis chargez-les depuis votre bundle :

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

`withGTConfig` détecte `loadTranslations.ts` à la racine du projet ou dans `src/`. Vous pouvez également définir [`loadTranslationsPath`](/docs/react/nextjs/config#load-translations-path).

Configurez la sortie de la CLI pour qu’elle corresponde au loader, puis exécutez [`npx gt translate`](/docs/cli/reference/commands/translate) avant `next build`. Consultez [Stocker les traductions localement](/docs/react/guides/storing-translations) pour le workflow complet.

## Mettre en cache le contenu traduit [#cache-content]

Résolvez le paramètre régional en dehors de la fonction mise en cache et transmettez-le en tant qu’argument sérialisable. Les arguments de la fonction font partie de la clé de cache de Cache Components, ce qui permet de distinguer les entrées selon le paramètre régional.

```tsx title="app/[locale]/page.tsx"
import { T } from 'gt-next';
import { getLocale } from 'gt-next/server';
import { cacheLife, cacheTag } from 'next/cache';

async function CachedContent({ locale }: { locale: string }) {
  'use cache';

  cacheLife('hours');
  cacheTag(`home-${locale}`);

  return <T>Welcome to our site</T>;
}

export default async function Page() {
  const locale = await getLocale();
  return <CachedContent locale={locale} />;
}
```

Appliquez la même approche à toute région ou autre valeur de requête qui modifie la traduction affichée. Ne laissez jamais deux paramètres régionaux partager la même entrée de cache.
## Next steps

- /docs/react/nextjs/app-router-middleware
- /docs/react/nextjs/app-router-static-site-generation
- /docs/react/nextjs/registering-request-locales
- /docs/react/nextjs/locale-alias-seo