Vue d’ensemble

gt-next 6.10.0 introduit la prise en charge expérimentale des composants mis en cache, tout en dépréciant 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
• Dépréciation des anciennes fonctions de requête statiques de gt-next@6.9

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 transmettre locale comme paramètre afin de garantir une invalidation correcte du cache entre les différents paramètres régionaux.

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

Obligation 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 pour se mettre à jour lorsque le paramètre régional de l'utilisateur change. Par exemple, CachedContent doit accepter un paramètre locale afin de créer des entrées de cache distinctes pour chaque paramètre régional. Sans ce paramètre, le composant servirait le même contenu mis en cache, quel que soit le paramètre régional de l'utilisateur.

Notes de configuration

Lorsque experimentalLocaleResolution est activé :

• Le proxy I18n doit être activé pour que la résolution du paramètre régional fonctionne (voir I18n Proxy)
• Il remplace toute fonction getLocale personnalisée (la résolution du paramètre régional s’effectue en lisant le chemin de l’URL)
• Il désactive les fonctions getRegion et getDomain
• Il entre en conflit avec la configuration obsolète experimentalEnableSSG - une seule peut être activée à la fois
• Vous pouvez personnaliser le nom du paramètre régional 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

Depuis l’introduction de la prise en charge du rendu statique dans gt-next@6.9, nous déprécions 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 s’inscrit dans notre objectif de simplifier la surface de l’API tout en conservant l’ensemble des fonctionnalités. Les anciennes fonctions statiques continueront de fonctionner, mais elles afficheront des avertissements de dépréciation. Nous recommandons de migrer vers les fonctions de requête standard par souci de cohérence.

Guide de migration

Ancien SSG

Remplacez les fonctions de requête statiques dépréciées :

// Avant (déprécié)
export default withGTConfig(nextConfig, {
  experimentalEnableSSG: true,
})

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

Remplacez toutes les fonctions personnalisées getStaticLocale, getStaticRegion ou getStaticDomain par des fonctions personnalisées getLocale, getRegion ou getDomain. Vous devez ajouter une fonction getLocale personnalisée et désactiver la fonction getRegion. Pour plus d’informations, 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 du paramètre régional et assurez-vous que les composants mis en cache reçoivent les paramètres régionaux :

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