# 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
Docs index: https://generaltranslation.com/llms.txt
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.

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

## Sitemap

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