Présentation

gt-next 6.10.0 introduit la prise en charge expérimentale des composants mis en cache et rend obsolètes les anciennes fonctions de requête statiques de gt-next@6.9.

• Ajout de la prise en charge expérimentale des composants mis en cache avec experimentalLocaleResolution
• Les anciennes fonctions de requête statiques de gt-next@6.9 sont désormais obsolètes

Composants mis en cache

Pour activer la prise en charge des composants mis en cache, ajoutez experimentalLocaleResolution: true à votre configuration gt-next et suivez le guide Next.js sur les composants mis en cache. Lorsque vous utilisez des composants mis en cache avec du contenu traduisible, vous devez passer la locale en paramètre afin de garantir une invalidation correcte du cache entre les différentes locales.

Prenons la structure d'application suivante :

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>Contenu mis en cache</h1></T>
    </div>
  )
}
export default async function Home() {
  const locale = await getLocale()
  return (
    <div>
      <CachedContent locale={locale} />
    </div>
  );
}

L’exigence du paramètre locale

Les composants mis en cache utilisent leurs paramètres comme clés de cache ; tout composant mis en cache qui contient du contenu traduisible doit accepter un paramètre locale afin de se mettre à jour lorsque la locale d’un utilisateur change. Par exemple, CachedContent doit accepter un paramètre locale pour créer des entrées de cache distinctes pour chaque locale. Sans ce paramètre, le composant servirait le même contenu mis en cache, quelle que soit la locale de l’utilisateur.

Notes de configuration

Lorsque experimentalLocaleResolution est activé :

• Le proxy I18n doit être activé pour que la résolution de locale fonctionne (voir I18n Proxy)
• Cette option remplace toute fonction personnalisée getLocale (la résolution de locale se fait à partir du chemin de l’URL)
• Elle désactive les fonctions getRegion et getDomain
• Elle est en conflit avec la configuration obsolète experimentalEnableSSG — une seule peut être activée à la fois
• Vous pouvez personnaliser le nom du paramètre locale avec experimentalLocaleResolutionParam (valeur par défaut : 'locale')

export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
  // Personnaliser le nom du paramètre (optionnel)
  experimentalLocaleResolutionParam: 'lang',
})

Dépréciation des anciennes fonctions de requête statique

Suite à l’introduction de la prise en charge du rendu statique dans gt-next@6.9, nous déprécions désormais les anciennes fonctions de requête statique (getStaticLocale, getStaticRegion, getStaticDomain) au profit des fonctions de requête standard (getLocale, getRegion, getDomain).

Cette dépréciation est alignée avec notre objectif de simplifier la surface de l’API tout en conservant l’intégralité des fonctionnalités. Les anciennes fonctions statiques continueront de fonctionner, mais émettront des avertissements de dépréciation. Nous vous recommandons de migrer vers les fonctions de requête standard pour plus de cohérence.

Guide de migration

Ancien SSG

Remplacez les fonctions de requêtes statiques obsolètes :

// Avant (obsolète)
export default withGTConfig(nextConfig, {
  experimentalEnableSSG: true,
})

// Après  
export default withGTConfig(nextConfig, {
  // Accessible par défaut
})

Supprimez toutes les fonctions personnalisées getStaticLocale, getStaticRegion ou getStaticDomain au profit de fonctions personnalisées getLocale, getRegion ou getDomain. Vous devez ajouter une fonction personnalisée getLocale et désactiver la fonction getRegion. Pour en savoir plus, consultez le guide SSG.

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

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

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

Pour les composants mis en cache

Activez la résolution expérimentale de locale et assurez-vous que les composants mis en cache reçoivent les paramètres de locale :

const nextConfig = {
  cacheComponents: true,
}

// Configuration
export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
})

// Implémentation du composant
async function MyCachedComponent({locale}: {locale: string}) {
  "use cache"
  // Votre contenu internationalisé ici
  return <T>Content for <Var>{locale}</Var></T>
}

// Utilisation
export default async function Page() {
  const locale = await getLocale()
  return <MyCachedComponent locale={locale} />
}