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

title: Uso de Cache Components
description: Cómo usar Cache Components de Next.js con funciones de solicitud compatibles con la configuración regional y traducciones almacenadas 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

---

Cache Components permite prerenderizar y almacenar en caché contenido localizado del servidor. La configuración regional, la región y las traducciones deben resolverse sin cabeceras de solicitud, cookies ni el cargador remoto de traducciones predeterminado.

*Nota: Esta guía usa Next.js 16 o una versión posterior, en la que Cache Components se configura con `cacheComponents: true`.*

## Habilita Cache Components [#enable]

Habilita Cache Components en `next.config.ts`. Conserva [`withGTConfig`](/docs/react/nextjs/config) alrededor de la configuración de 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);
```

Cuando Cache Components está habilitada, `gt-next`:

* Requiere una función personalizada de [`loadTranslations`](/docs/react/reference/functions/load-translations). El cargador remoto predeterminado no es seguro durante el prerendering.
* Advierte si faltan las funciones personalizadas de solicitud [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) y [`getRegion`](/docs/react/nextjs/reference/functions/get-region).
* Deshabilita el hot reload de traducción en tiempo de ejecución durante el desarrollo porque realiza solicitudes dinámicas.
* Deja que Next.js gestione la invalidación de la caché en lugar de aplicar la caducidad habitual de la caché de General Translation.

## Resuelve los valores de la solicitud [#request-values]

Coloca el segmento `[locale]` en la raíz del árbol del App Router. El layout raíz debe ser `app/[locale]/layout.tsx`, sin ningún `app/layout.tsx` por encima.

Crea `getLocale.ts` en la raíz del proyecto:

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

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

Crea `getRegion.ts` junto a este archivo. Devuelve una región fija si tu salida depende de ella, o `undefined` para desactivar la detección de región:

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

`withGTConfig` detecta ambos archivos automáticamente. Si están en otra ubicación, configura [`getLocalePath` y `getRegionPath`](/docs/react/nextjs/config#request-function-paths).

<Callout type="warn">
  No llames a `headers()` ni a `cookies()` desde estas funciones de solicitud. Las API de solicitud dinámicas no pueden ejecutarse dentro de un límite de `"use cache"`. En su lugar, lee la configuración regional de `next/root-params` y devuelve una región fija.
</Callout>

## Almacena las traducciones localmente [#local-translations]

Genera los archivos de traducción antes de compilar Next.js y luego cárgalos desde tu 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` detecta `loadTranslations.ts` en la raíz del proyecto o en `src/`. También puedes configurar [`loadTranslationsPath`](/docs/react/nextjs/config#load-translations-path).

Configura la salida de la CLI para que coincida con el cargador y ejecuta [`npx gt translate`](/docs/cli/reference/commands/translate) antes de `next build`. Consulta [Almacenar traducciones localmente](/docs/react/guides/storing-translations) para conocer el workflow completo.

## Almacena en caché el contenido traducido [#cache-content]

Resuelve la configuración regional fuera de la función almacenada en caché y pásala como argumento serializable. Los argumentos de la función forman parte de la clave de caché de Cache Components, lo que mantiene separadas las entradas de las distintas configuraciones regionales.

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

Aplica el mismo patrón a cualquier región u otro valor de la solicitud que cambie la traducción renderizada. Nunca permitas que dos configuraciones regionales compartan una entrada de caché.
## 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