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

title: Utilizzo di Cache Components
description: Come utilizzare le Cache Components di Next.js con funzioni di richiesta sicure per le impostazioni regionali e traduzioni archiviate localmente.
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

---

Le Cache Components possono prerenderizzare e memorizzare nella cache contenuti server localizzati. L'impostazione regionale, la regione e le traduzioni devono essere tutte risolte senza header delle richieste, cookie o il loader delle traduzioni remoto predefinito.

*Nota: questa guida utilizza Next.js 16 o versioni successive, in cui le Cache Components sono configurate con `cacheComponents: true`.*

## Abilitare Cache Components [#enable]

Abilita Cache Components in `next.config.ts`. Mantieni [`withGTConfig`](/docs/react/nextjs/config) attorno alla configurazione di 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);
```

Quando Cache Components è abilitata, `gt-next`:

* Richiede una funzione [`loadTranslations`](/docs/react/reference/functions/load-translations) personalizzata. Il loader remoto predefinito non è sicuro durante il prerendering.
* Emette un avviso se mancano le funzioni di richiesta personalizzate [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) e [`getRegion`](/docs/react/nextjs/reference/functions/get-region).
* Disabilita l'hot reload della runtime translation in fase di sviluppo perché effettua Request dinamiche.
* Lascia che Next.js gestisca l'invalidazione della cache anziché applicare la normale scadenza della cache di General Translation.

## Risolvi i valori della richiesta [#request-values]

Posiziona il segmento `[locale]` alla radice dell'albero App Router. Il layout radice deve essere `app/[locale]/layout.tsx`, senza alcun `app/layout.tsx` al di sopra.

Crea `getLocale.ts` nella radice del progetto:

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

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

Crea `getRegion.ts` accanto a esso. Restituisci una regione fissa se il tuo output dipende da una regione oppure `undefined` per disabilitare il rilevamento della regione:

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

`withGTConfig` rileva automaticamente entrambi i file. Se si trovano in un'altra posizione, configura [`getLocalePath` e `getRegionPath`](/docs/react/nextjs/config#request-function-paths).

<Callout type="warn">
  Non chiamare `headers()` o `cookies()` da queste funzioni di richiesta. Le API di richiesta dinamiche non possono essere eseguite all&#39;interno di un contesto `"use cache"`. Leggi l&#39;impostazione regionale da `next/root-params` e restituisci invece una regione fissa.
</Callout>

## Archivia le traduzioni in locale [#local-translations]

Genera i file di traduzione prima della build di Next.js, quindi caricali dal 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` rileva `loadTranslations.ts` nella radice del progetto o in `src/`. Puoi anche impostare [`loadTranslationsPath`](/docs/react/nextjs/config#load-translations-path).

Configura l&#39;output della CLI in modo che corrisponda al loader ed esegui [`npx gt translate`](/docs/cli/reference/commands/translate) prima di `next build`. Consulta [Archiviare le traduzioni localmente](/docs/react/guides/storing-translations) per il workflow completo.

## Memorizza nella cache i contenuti tradotti [#cache-content]

Determina l&#39;impostazione regionale al di fuori della funzione memorizzata nella cache e passala come argomento serializzabile. Gli argomenti della funzione diventano parte della chiave di cache di Cache Components, mantenendo separate le voci per le diverse impostazioni regionali.

```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} />;
}
```

Applica lo stesso pattern a qualsiasi regione o altro valore della richiesta che modifichi la traduzione renderizzata. Non consentire mai a due impostazioni regionali di condividere una voce della 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