Überblick

gt-next 6.10.0 führt experimentelle Unterstützung für gecachte Komponenten ein und markiert die Legacy-Varianten der statischen Request-Funktionen aus gt-next@6.9 als veraltet.

• Experimentelle Unterstützung für gecachte Komponenten hinzugefügt mit experimentalLocaleResolution
• Legacy-Varianten der statischen Request-Funktionen als veraltet markiert aus gt-next@6.9

Zwischengespeicherte Komponenten

Um die Unterstützung für zwischengespeicherte Komponenten zu aktivieren, füge experimentalLocaleResolution: true zu deiner gt-next-Konfiguration hinzu und folge der Next.js-Anleitung zu Cache Components. Wenn du zwischengespeicherte Komponenten mit übersetzbarem Inhalt verwendest, musst du das locale als Parameter übergeben, um eine korrekte Cache-Invalidierung zwischen verschiedenen locales sicherzustellen.

Sieh dir dazu diese Anwendungsstruktur an:

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

Die Anforderung an den Parameter locale

Zwischengespeicherte Komponenten verwenden ihre Parameter als Cache-Schlüssel. Jede zwischengespeicherte Komponente, die übersetzbare Inhalte enthält, muss daher einen locale-Parameter akzeptieren, damit sie aktualisiert wird, wenn sich die locale eines Nutzers ändert. CachedContent muss zum Beispiel einen locale-Parameter akzeptieren, um separate Cache-Einträge für jede locale zu erzeugen. Ohne diesen Parameter würde die Komponente stets denselben zwischengespeicherten Inhalt ausliefern, unabhängig von der locale des Nutzers.

Hinweise zur Konfiguration

Wenn experimentalLocaleResolution aktiviert ist:

• Der I18n-Proxy muss aktiviert sein, damit die Locale-Auflösung funktioniert (siehe I18n Proxy)
• Es überschreibt alle benutzerdefinierten getLocale-Funktionen (die Locale-Auflösung erfolgt durch das Auslesen des URL-Pfads)
• Es deaktiviert die Funktionen getRegion und getDomain
• Es steht in Konflikt mit der veralteten Konfiguration experimentalEnableSSG – es kann jeweils nur eine davon aktiviert sein
• Du kannst den Namen des Locale-Parameters mit experimentalLocaleResolutionParam anpassen (Standardwert ist 'locale')

export default withGTConfig(nextConfig, {
  experimentalLocaleResolution: true,
  // Optional: Parameternamen anpassen
  experimentalLocaleResolutionParam: 'lang',
})

Abkündigung der Legacy-statischen Request-Funktionen

Nach der Einführung der Unterstützung für statisches Rendering in gt-next@6.9 markieren wir nun die Legacy-statischen Request-Funktionen (getStaticLocale, getStaticRegion, getStaticDomain) als veraltet zugunsten der Standard-Request-Funktionen (getLocale, getRegion, getDomain).

Diese Abkündigung steht im Einklang mit unserem Ziel, die API-Oberfläche zu vereinfachen und gleichzeitig die volle Funktionalität beizubehalten. Die Legacy-statischen Funktionen bleiben weiterhin funktionsfähig, geben jedoch Deprecation-Warnungen aus. Wir empfehlen, auf die Standard-Request-Funktionen zu migrieren, um Konsistenz sicherzustellen.

Migrationsleitfaden

Veraltetes SSG

Ersetzen Sie veraltete statische Funktionen für Requests:

// Vorher (veraltet)
export default withGTConfig(nextConfig, {
  experimentalEnableSSG: true,
})

// Nachher  
export default withGTConfig(nextConfig, {
  // Standardmäßig verfügbar
})

Entfernen Sie benutzerdefinierte getStaticLocale-, getStaticRegion- oder getStaticDomain-Funktionen und ersetzen Sie sie durch benutzerdefinierte getLocale-, getRegion- oder getDomain-Funktionen. Sie müssen eine benutzerdefinierte getLocale-Funktion hinzufügen und die Funktion getRegion deaktivieren. Weitere Informationen finden Sie im SSG-Leitfaden.

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

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

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

Für zwischengespeicherte Komponenten

Aktiviere die experimentelle locale-Auflösung und stelle sicher, dass zwischengespeicherte Komponenten locale-Parameter erhalten:

const nextConfig = {
  cacheComponents: true,
}

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

// Komponenten-Implementierung
async function MyCachedComponent({locale}: {locale: string}) {
  "use cache"
  // Ihr internationalisierter Inhalt hier
  return <T>Content for <Var>{locale}</Var></T>
}

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