# General Translation React SDKs (gt-react, gt-next, gt-react-native): Использование Cache Components
URL: https://generaltranslation.com/ru/docs/react/nextjs/cache-components.mdx
---

title: Использование Cache Components
description: Использование Cache Components в Next.js с безопасными для локалей функциями запроса и локально хранимыми переводами.
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 позволяют выполнять предварительный рендеринг и кэшировать локализованный серверный контент. Локаль, регион и переводы должны определяться без заголовков запроса, cookie-файлов и удалённого загрузчика переводов по умолчанию.

*Примечание: в этом руководстве используется Next.js 16 или более поздняя версия, в которой Cache Components настраиваются с помощью `cacheComponents: true`.*

## Включите Cache Components [#enable]

Включите Cache Components в `next.config.ts`. Оберните конфигурацию Next.js в [`withGTConfig`](/docs/react/nextjs/config):

```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);
```

Когда включены Cache Components, `gt-next`:

* Требует пользовательскую функцию [`loadTranslations`](/docs/react/reference/functions/load-translations). Стандартный удалённый загрузчик небезопасен при предварительном рендеринге.
* Предупреждает, если отсутствуют пользовательские функции запроса [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) и [`getRegion`](/docs/react/nextjs/reference/functions/get-region).
* Отключает горячую перезагрузку переводов во время разработки, так как она выполняет динамические запросы.
* Передаёт Next.js управление инвалидацией кэша вместо применения обычного срока действия кэша General Translation.

## Определение значений запроса [#request-values]

Разместите сегмент `[locale]` в корне дерева App Router. Корневой макет должен находиться в `app/[locale]/layout.tsx`, без `app/layout.tsx` выше него.

Создайте `getLocale.ts` в корне проекта:

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

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

Создайте рядом файл `getRegion.ts`. Возвращайте фиксированный регион, если от него зависит ваш output, или `undefined`, чтобы отключить определение региона:

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

`withGTConfig` автоматически обнаруживает оба файла. Если они находятся в другом месте, укажите пути с помощью [`getLocalePath` и `getRegionPath`](/docs/react/nextjs/config#request-function-paths).

<Callout type="warn">
  Не вызывайте `headers()` или `cookies()` из этих функций запроса. Динамические API запросов нельзя использовать внутри границы `"use cache"`. Вместо этого получайте локаль из `next/root-params` и возвращайте фиксированный регион.
</Callout>

## Храните переводы локально [#local-translations]

Создайте файлы перевода перед сборкой Next.js, а затем загружайте их из бандла:

```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` обнаруживает `loadTranslations.ts` в корне проекта или в каталоге `src/`. Также можно указать [`loadTranslationsPath`](/docs/react/nextjs/config#load-translations-path).

Настройте вывод CLI в соответствии с загрузчиком и запустите [`npx gt translate`](/docs/cli/reference/commands/translate) перед `next build`. Полный workflow описан в разделе [Локальное хранение переводов](/docs/react/guides/storing-translations).

## Кэширование переведённого контента [#cache-content]

Определите локаль вне кэшируемой функции и передайте её как сериализуемый аргумент. Аргументы функции становятся частью ключа кэша Cache Components, что позволяет хранить записи для разных локалей отдельно.

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

Применяйте тот же подход к любому региону или другому параметру запроса, который влияет на отображаемый перевод. Никогда не используйте одну запись кэша для двух локалей.
## 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