Обзор

В gt-next 6.10.0 вводится экспериментальная поддержка кэшируемых компонентов, а также помечены как устаревшие статические функции запросов из gt-next@6.9.

• Добавлена экспериментальная поддержка кэшируемых компонентов с experimentalLocaleResolution
• Статические функции запросов из gt-next@6.9 помечены как устаревшие

Кэшируемые компоненты

Чтобы включить поддержку кэшируемых компонентов, добавьте experimentalLocaleResolution: true в конфигурацию gt-next и следуйте руководству Next.js по Cache Components. При использовании кэшируемых компонентов с переводимым контентом необходимо передавать locale в качестве параметра, чтобы обеспечить корректный сброс кэша между разными локалями.

Рассмотрим следующую структуру приложения:

import { Suspense } from "react";
import { getLocale, getLocales } from "gt-next/server";

export const generateStaticParams = () => {
  return getLocales().map(locale => ({ locale }))
}

async function CachedContent({locale: _locale}: {locale: string}) {
  "use cache"
  return (
    <div>
      <T><h1>Кешированное содержимое</h1></T>
    </div>
  )
}
export default async function Home() {
  const locale = await getLocale()
  return (
    <div>
      <CachedContent locale={locale} />
    </div>
  );
}

Требование к параметру locale

Кэшируемые компоненты используют свои параметры в качестве ключей кэша: любой кэшируемый компонент, который содержит переводимый контент, должен принимать параметр locale, чтобы обновляться при изменении локали пользователя. Например, CachedContent должен принимать параметр locale, чтобы создавать отдельные записи в кэше для каждой локали. Без этого параметра компонент будет отдавать один и тот же кэшированный контент независимо от локали пользователя.

Примечания по конфигурации

Когда experimentalLocaleResolution включён:

• I18n proxy должен быть включён, чтобы работало определение локали (см. I18n Proxy)
• Он переопределяет любые пользовательские функции getLocale (определение локали происходит при разборе пути URL)
• Он отключает функции getRegion и getDomain
• Он конфликтует с устаревшей конфигурацией experimentalEnableSSG — одновременно может быть включена только одна
• Вы можете настроить имя параметра локали с помощью experimentalLocaleResolutionParam (по умолчанию 'locale')

export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
  // При необходимости можно изменить имя параметра
  experimentalLocaleResolutionParam: 'lang',
})

Отказ от устаревших статических функций запросов

После появления поддержки статического рендеринга в gt-next@6.9 мы отказываемся от устаревших статических функций запросов (getStaticLocale, getStaticRegion, getStaticDomain) в пользу стандартных функций запросов (getLocale, getRegion, getDomain).

Этот шаг соответствует нашей цели упростить API при сохранении полной функциональности. Устаревшие статические функции продолжат работать, но будут выдавать предупреждения об устаревании. Мы рекомендуем перейти на стандартные функции запросов для согласованности.

Руководство по миграции

Устаревший SSG

Замените устаревшие функции для статических запросов:

// До (устарело)
export default withGTConfig(nextConfig, {
  experimentalEnableSSG: true,
})

// After  
export default withGTConfig(nextConfig, {
  // Доступно по умолчанию
})

Удалите любые пользовательские функции getStaticLocale, getStaticRegion или getStaticDomain и вместо них используйте пользовательские функции getLocale, getRegion или getDomain. Вам необходимо добавить пользовательскую функцию getLocale и отключить функцию getRegion. Для получения дополнительной информации см. руководство по SSG.

import { locale } from "next/root-params";

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

export default async function getRegion() {
  return undefined;
}

Для кэшируемых компонентов

Включите экспериментальное определение локали и убедитесь, что кэшируемые компоненты получают параметры локали:

const nextConfig = {
  cacheComponents: true,
}

// Конфигурация
export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
})

// Реализация компонента
async function MyCachedComponent({locale}: {locale: string}) {
  "use cache"
  // Здесь ваш интернационализированный контент
  return <T>Content for <Var>{locale}</Var></T>
}

// Использование
export default async function Page() {
  const locale = await getLocale()
  return <MyCachedComponent locale={locale} />
}