@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/de/intlayer_with_nextjs_page_router.md

@@ -249,48 +249,24 @@ Implementieren Sie dynamisches Routing, um lokalisierte Inhalte basierend auf de
 
     Ändern Sie Ihre `_app.tsx`, um Intlayer-Provider einzubinden.
 
-    ```tsx fileName="src/pages/_app.tsx" codeFormat="typescript"
+    ```tsx fileName="src/pages/_app.tsx" codeFormat=["typescript", 'esm', 'cjs']
     import type { FC } from "react";
     import type { AppProps } from "next/app";
-    import { IntlayerClientProvider } from "next-intlayer";
+    import { IntlayerProvider } from "next-intlayer";
 
     const App = FC<AppProps>({ Component, pageProps }) => {
       const { locale } = pageProps;
 
       return (
-        <IntlayerClientProvider locale={locale}>
+        <IntlayerProvider locale={locale}>
           <Component {...pageProps} />
-        </IntlayerClientProvider>
+        </IntlayerProvider>
       );
     }
 
     export default MyApp;
     ```
 
-    ```jsx fileName="src/pages/_app.mjx" codeFormat="esm"
-    import { IntlayerClientProvider } from "next-intlayer";
-
-    const App = ({ Component, pageProps }) => (
-      <IntlayerClientProvider locale={locale}>
-        <Component {...pageProps} />
-      </IntlayerClientProvider>
-    );
-
-    export default App;
-    ```
-
-    ```jsx fileName="src/pages/_app.csx" codeFormat="commonjs"
-    const { IntlayerClientProvider } = require("next-intlayer");
-
-    const App = ({ Component, pageProps }) => (
-      <IntlayerClientProvider locale={locale}>
-        <Component {...pageProps} />
-      </IntlayerClientProvider>
-    );
-
-    module.exports = App;
-    ```
-
 3.  **Einrichten von `getStaticPaths` und `getStaticProps`:**
 
     Definieren Sie in Ihrer `[locale]/index.tsx` die Pfade und Props, um verschiedene Sprachen zu unterstützen.
@@ -493,21 +469,6 @@ const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="src/components/ComponentExample.csx" codeFormat="commonjs"
-const { useIntlayer } = require("next-intlayer");
-
-const ComponentExample = () => {
-  const content = useIntlayer("component-example"); // Stellen Sie sicher, dass Sie eine entsprechende Inhaltsdeklaration haben
-
-  return (
-    <div>
-      <h2>{content.title}</h2>
-      <p>{content.content}</p>
-    </div>
-  );
-};
-```
-
 > Wenn Sie Übersetzungen in `string`-Attributen verwenden (z. B. `alt`, `title`, `href`, `aria-label`), rufen Sie
 
 > den Wert der Funktion wie folgt auf:

package/docs/de/intlayer_with_react_router_v7.md

@@ -43,6 +43,8 @@ author: aymericzip
 
 Diese Anleitung zeigt, wie Sie **Intlayer** für nahtlose Internationalisierung in React Router v7-Projekten mit lokalisierungsbewusstem Routing, TypeScript-Unterstützung und modernen Entwicklungsmethoden integrieren.
 
+Dieser Leitfaden konzentriert sich auf Frontend-Routing. Für fs-routes Routing, siehe den Leitfaden [Intlayer mit React Router v7 File-System Routes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_react_router_v7_fs_routes.md).
+
 ## Inhaltsverzeichnis
 
 <TOC/>
@@ -572,6 +574,34 @@ export default function RootLayout() {
 
 </Step>
 
+<Step number={11} title="Middleware hinzufügen">
+
+Sie können auch den `intlayerProxy` verwenden, um Server-seitiges Routing zu Ihrer Anwendung hinzuzufügen. Dieses Plugin erkennt automatisch das aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn kein Locale angegeben ist, bestimmt das Plugin das am besten geeignete Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn kein Locale erkannt wird, wird es zum Standard-Locale weitergeleitet.
+
+> Beachten Sie, dass Sie zum Verwenden von `intlayerProxy` in der Produktion das `vite-intlayer` Paket von `devDependencies` zu `dependencies` wechseln müssen.
+
+> Seit Intlayer v9 ist `intlayerProxy()` direkt im `intlayer()` Plugin gebündelt und standardmäßig über die Option `routing.enableProxy` (`true` standardmäßig) aktiviert. Die separate Registrierung wie unten gezeigt ist nun optional — sie wird aus Gründen der Abwärtskompatibilität und für Setups beibehalten, die die Plugin-Reihenfolge kontrollieren müssen. Setzen Sie `routing.enableProxy: false`, um dies zu deaktivieren. Siehe die [v9 release notes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/releases/v9.md).
+
+```typescript {3,7} fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
+  ],
+});
+```
+
+</Step>
+
 <Step number={12} title="Inhalt Ihrer Komponenten extrahieren" isOptional={true}>
 
 Wenn Sie eine bestehende Codebasis haben, kann die Transformation von Tausenden von Dateien zeitaufwendig sein.

package/docs/de/intlayer_with_react_router_v7_fs_routes.md

@@ -98,6 +98,14 @@ Intlayer ist mehr als nur eine i18n-Lösung. Es bietet einen **selbstgehosteten
 
 ## Documentation References
 
+<Tabs defaultTab="video">
+  <Tab label="Video" value="video">
+
+<iframe title="So übersetzen Sie eine React Router v7 (File-System Routes) App mit Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
+
+  </Tab>
+  <Tab label="Code" value="code">
+
 - [Intlayer Documentation](https://intlayer.org)
 - [React Router v7 Documentation](https://reactrouter.com/)
 - [React Router fs-routes Documentation](https://reactrouter.com/how-to/file-route-conventions)
@@ -106,14 +114,80 @@ Intlayer ist mehr als nur eine i18n-Lösung. Es bietet einen **selbstgehosteten
 - [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
 - [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
 
+  </Tab>
+  <Tab label="Demo" value="demo">
+
 This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 using file-system based routing for a fully internationalized application with locale-aware routing and TypeScript support.
 
+  </Tab>
+</Tabs>
+
+Siehe [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template) auf GitHub.
+
 <Steps>
 
 <Step number={10} title="Middleware hinzufügen">
 
+Installieren Sie die erforderlichen Pakete mit Ihrem bevorzugten Package Manager:
+
+```bash packageManager="npm"
+npm install intlayer react-intlayer
+npm install vite-intlayer --save-dev
+npm install @react-router/fs-routes --save-dev
+npx intlayer init
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer react-intlayer
+pnpm add vite-intlayer --save-dev
+pnpm add @react-router/fs-routes --save-dev
+```
+
+```bash packageManager="bun"
+bun add intlayer react-intlayer
+bun add vite-intlayer --dev
+bun add @react-router/fs-routes --dev
+bun x intlayer init
+```
+
+- **intlayer**
+
+Das Core-Paket, das Internationalisierungstools für Konfigurationsmanagement, Übersetzung, [Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md), Transpilation und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/index.md) bereitstellt.
+
+- **react-intlayer**
+  Das Paket, das Intlayer mit React-Anwendungen integriert. Es bietet Context-Provider und Hooks für React-Internationalisierung.
+
+- **vite-intlayer**
+  Includes the Vite-Plugin zur Integration von Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production), sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, zur Verwaltung von Cookies und zur Bearbeitung der URL-Umleitung.
+
+- **@react-router/fs-routes**
+  Das Package, das dateiensystembasiertes Routing für React Router v7 ermöglicht.
+
+</Step>
+
+<Step number={2} title="Konfiguration deines Projekts">
+
+Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { type IntlayerConfig, Locales } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    defaultLocale: Locales.ENGLISH,
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+  },
+};
+
+export default config;
+```
+
 Sie können auch das `intlayerProxy` verwenden, um serverseitiges Routing zu Ihrer Anwendung hinzuzufügen. Dieses Plugin erkennt automatisch die aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn keine Locale angegeben ist, bestimmt das Plugin die am besten geeignete Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Locale erkannt wird, erfolgt eine Weiterleitung zur Standard-Locale.
 
+</Step>
+
+<Step number={3} title="Integrate Intlayer in Your Vite-Konfiguration">
+
 > Beachten Sie, dass Sie, um das `intlayerProxy` in der Produktion zu verwenden, das Paket `vite-intlayer` von `devDependencies` zu `dependencies` verschieben müssen.
 
 ```typescript {3,7} fileName="vite.config.ts"
@@ -547,6 +621,34 @@ Dieser Hook wird bereits in der Layout-Komponente (`root.tsx`) verwendet, die in
 
 </Step>
 
+<Step number={10} title="Middleware hinzufügen">
+
+Sie können auch `intlayerProxy` verwenden, um Server-seitiges Routing zu Ihrer Anwendung hinzuzufügen. Dieses Plugin erkennt automatisch das aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn kein Locale angegeben ist, bestimmt das Plugin das am besten geeignete Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn kein Locale erkannt wird, wird es zum Standard-Locale weitergeleitet.
+
+> Beachten Sie, dass Sie das `vite-intlayer`-Paket von `devDependencies` zu `dependencies` verschieben müssen, um den `intlayerProxy` in der Produktion zu verwenden.
+
+> Seit Intlayer v9 ist `intlayerProxy()` direkt in das `intlayer()` Plugin integriert und wird standardmäßig über die `routing.enableProxy` Option (`true` als Standard) aktiviert. Eine separate Registrierung wie unten gezeigt ist nun optional — sie wird für Rückwärtskompatibilität und Setups beibehalten, die die Plugin-Reihenfolge kontrollieren müssen. Setzen Sie `routing.enableProxy: false`, um sich abzumelden. Siehe die [v9-Versionshinweise](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/releases/v9.md).
+
+```typescript {3,7} fileName="vite.config.ts"
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    reactRouter(),
+
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
+  ],
+});
+```
+
+</Step>
+
 <Step number={11} title="Inhalt Ihrer Komponenten extrahieren" isOptional={true}>
 
 Wenn Sie eine bestehende Codebasis haben, kann die Transformation von Tausenden von Dateien zeitaufwendig sein.
@@ -612,18 +714,6 @@ bun x intlayer extract
 
 > Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
 
-```bash packageManager="npm"
-npm install @intlayer/babel --save-dev
-```
-
-```bash packageManager="pnpm"
-pnpm add @intlayer/babel --save-dev
-```
-
-```bash packageManager="yarn"
-yarn add @intlayer/babel --save-dev
-```
-
 ```bash packageManager="bun"
 bun add @intlayer/babel --dev
 ```

package/docs/de/intlayer_with_solid_start.md

@@ -44,6 +44,18 @@ author: aymericzip
 />
 
   </Tab>
+
+<Tab label="Demo" value="demo">
+
+<iframe
+  src="https://intlayer-solid-start-template.vercel.app"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo Intlayer Solid Start Template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
 </Tabs>
 
 ## Inhaltsverzeichnis

package/docs/de/intlayer_with_svelte_kit.md

@@ -113,6 +113,8 @@ Intlayer ist mehr als nur eine i18n-Lösung. Es bietet einen **selbstgehosteten
 
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer SvelteKit-Anwendung
 
+Siehe [Application Template](https://github.com/aymericzip/intlayer-sveltekit-template) auf GitHub.
+
 Um zu beginnen, erstellen Sie ein neues SvelteKit-Projekt. Hier ist die finale Struktur, die wir erstellen werden:
 
 ```bash
@@ -267,6 +269,8 @@ export default heroContent;
 
 <Step number={5} title="Verwenden Sie Intlayer in Ihren Komponenten">
 
+Jetzt kannst du die Funktion `useIntlayer` in einer beliebigen Svelte-Komponente verwenden. Sie gibt einen reaktiven Store zurück, der sich automatisch aktualisiert, wenn sich das Locale ändert. Die Funktion respektiert automatisch das aktuelle Locale (sowohl bei SSR als auch bei clientseitiger Navigation).
+
 -Präfix verwenden, um auf den reaktiven Wert zuzugreifen (z. B. `$content.title`).
 
 ```svelte fileName="src/lib/components/Component.svelte"
@@ -612,6 +616,8 @@ Um den Benutzern das Wechseln der Sprache zu ermöglichen, aktualisieren Sie die
 
 Um einen Backend-Proxy zu deiner SvelteKit-Anwendung hinzuzufügen, kannst du die Funktion `intlayerProxy` verwenden, die vom `vite-intlayer` Plugin bereitgestellt wird. Dieses Plugin erkennt automatisch die beste Locale für den Benutzer basierend auf der URL, Cookies und den Spracheinstellungen des Browsers.
 
+> Seit Intlayer v9 ist `intlayerProxy()` direkt im `intlayer()`-Plugin gebündelt und standardmäßig durch die Option `routing.enableProxy` (`true` standardmäßig) aktiviert. Eine separate Registrierung wie unten gezeigt ist jetzt optional — sie wird für Rückwärtskompatibilität und Setups beibehalten, die die Plugin-Reihenfolge kontrollieren müssen. Setzen Sie `routing.enableProxy: false`, um sich abzumelden. Siehe die [v9 Release Notes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/releases/v9.md).
+
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
 import { intlayer } from "vite-intlayer";

package/docs/de/intlayer_with_tanstack+solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-06-23
+updatedAt: 2026-08-25
 title: "TanStack Start + Solid i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
 description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) TanStack Start + Solid-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
 keywords:
@@ -22,6 +22,9 @@ applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-solid
 applicationShowcase: https://intlayer-tanstack-start-solid.vercel.app
 youtubeVideo: https://www.youtube.com/watch?v=_XTdKVWaeqg
 history:
+  - version: 9.4.0
+    date: 2026-08-25
+    changes: "Statische, dynamische und gecachte dynamische Auflösung von Metadaten-Dictionaries in head-Funktionen von Routen vergleichen"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Aktualisieren der Solid useIntlayer API-Nutzung auf direkten Eigenschaftszugriff"
@@ -458,6 +461,8 @@ export const useLocalizedNavigate = () => {
 
 <Step number={9} title="Intlayer in Ihren Seiten nutzen">
 
+> Verwenden Sie standardmäßig **`useIntlayer`**: Es ist der empfohlene Weg, Inhalte innerhalb von Komponenten zu lesen, und der Compiler löst den Aufruf auf die gerenderte Locale auf. Greifen Sie nur außerhalb des Solid-Baums zu `getIntlayer` / `getIntlayerAsync`: im `head` von Routen, in Loadern und Server Functions.
+
 Greifen Sie in Ihrer gesamten Anwendung auf Ihre Inhaltswörterbücher zu:
 
 #### Lokalisierte Startseite
@@ -487,8 +492,6 @@ function RouteComponent() {
 }
 ```
 
-> Wenn Sie Ihren Inhalt in einem `string`-Attribut verwenden möchten, wie z.B. `alt`, `title`, `href`, `aria-label` usw., müssen Sie den Wert der Funktion aufrufen, zum Beispiel:
-
 > ```html
 > <img src="{content.image.src.value}" alt="{content.image.value}" />
 > <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
@@ -574,6 +577,8 @@ Sie können auch den `intlayerProxy` verwenden, um serverseitiges Routing zu Ihr
 
 > Beachten Sie, dass Sie für die Verwendung des `intlayerProxy` in der Produktion das Paket `vite-intlayer` von `devDependencies` zu `dependencies` verschieben müssen.
 
+> Seit Intlayer v9 ist `intlayerProxy()` direkt in das `intlayer()` Plugin gebündelt und standardmäßig über die `routing.enableProxy` Option aktiviert (`true` standardmäßig). Die separate Registrierung wie unten gezeigt ist nun optional; sie wird für Rückwärtskompatibilität und für Setups beibehalten, die die Plugin-Reihenfolge kontrollieren müssen. Setzen Sie `routing.enableProxy: false`, um sich abzumelden. Siehe die [v9 Release Notes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/releases/v9.md).
+
 ```typescript fileName="vite.config.ts"
 import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
 import solid from "vite-plugin-solid";
@@ -606,16 +611,25 @@ export default defineConfig({
 
 <Step number={13} title="Internationalisieren Sie Ihre Metadaten">
 
-Sie können auch die Funktion `getIntlayer` verwenden, um innerhalb des `head`-Loaders auf Ihre Inhaltswörterbücher für lokalisierungsbewusste Metadaten zuzugreifen:
+<Tabs>
+
+<Tab label="Statische Auflösung" value="static">
+
+`getIntlayer` löst synchron gegen das **zusammengeführte** Dictionary auf, also gegen jenes, das alle deklarierten Locales enthält. `head` bleibt synchron und es wird nichts erwartet, aber das gesamte mehrsprachige Dictionary landet im Route-Chunk, der an den Browser geht.
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createFileRoute } from "@tanstack/solid-router";
-import { getIntlayer } from "intlayer";
+import {
+  defaultLocale,
+  getIntlayer,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
 
 export const Route = createFileRoute("/{-$locale}/")({
   component: RouteComponent,
   head: ({ params }) => {
-    const { locale } = params;
+    const { locale = defaultLocale } = params;
     const path = "/"; // The path for this route
 
     const metaContent = getIntlayer("app", locale);
@@ -649,6 +663,143 @@ export const Route = createFileRoute("/{-$locale}/")({
 });
 ```
 
+Am besten für kleine Metadaten-Dictionaries, wenige Locales oder beim Prototyping.
+
+</Tab>
+
+<Tab label="Dynamische Auflösung" value="dynamic">
+
+`getIntlayerAsync` (verfügbar ab **v9.4**) verhält sich wie `getIntlayer`, doch das Build-Plugin verweist es auf den Locale-Chunk in `.intlayer/dynamic_dictionaries/` statt auf das zusammengeführte Dictionary. Eine Seite liefert damit nur die Locale aus, die sie rendert. Da dieser Chunk bei Bedarf geladen wird, wird `head` zu `async`:
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+import { createFileRoute } from "@tanstack/solid-router";
+import {
+  defaultLocale,
+  getIntlayerAsync,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  head: async ({ params }) => {
+    const { locale = defaultLocale } = params;
+    const path = "/"; // The path for this route
+
+    const metaContent = await getIntlayerAsync("app", locale);
+
+    return {
+      links: [
+        // Canonical link: Points to the current localized page
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+
+        // Hreflang: Tell Google about all localized versions
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+
+        // x-default: For users in unmatched languages
+        // Define the default fallback locale (usually your primary language)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
+      meta: [
+        { title: metaContent.title },
+        { name: "description", content: metaContent.meta.description },
+      ],
+    };
+  },
+});
+```
+
+> Liest ein `head` mehrere Dictionaries, lösen Sie sie mit `Promise.all` auf; jedes `getIntlayerAsync` einzeln zu awaiten verkettet die Anfragen, statt sie parallel auszuführen.
+
+Der Kompromiss: Der dynamische Import wird während der Ausführung von `head` aufgelöst, also auf dem kritischen Pfad des Dokument-Renderings. Auf einer kalten Route verzögert das den `head` um einige Millisekunden und kann den **LCP** leicht verschlechtern.
+
+</Tab>
+
+<Tab label="Gecachte dynamische Auflösung" value="cached">
+
+Lösen Sie das Dictionary stattdessen im `loader` der Route auf und lesen Sie es in `head` aus `loaderData` zurück. Die Loader der gematchten Routen laufen parallel, und `staleTime: Infinity` teilt TanStack Router mit, dass das Ergebnis nie veraltet, der Locale-Chunk wird also einmal aufgelöst und danach aus dem Router-Cache bedient, während `head` synchron bleibt.
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+import { createFileRoute } from "@tanstack/solid-router";
+import {
+  defaultLocale,
+  getIntlayerAsync,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  // Resolved in parallel with the other matched routes, off the head critical path
+  loader: async ({ params }) => {
+    const { locale = defaultLocale } = params;
+
+    return { metaContent: await getIntlayerAsync("app", locale) };
+  },
+  // The dictionary never changes for a given locale: resolve the chunk once
+  staleTime: Infinity,
+  head: ({ params, loaderData }) => {
+    const { locale = defaultLocale } = params;
+    const path = "/"; // The path for this route
+
+    return {
+      links: [
+        // Canonical link: Points to the current localized page
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+
+        // Hreflang: Tell Google about all localized versions
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+
+        // x-default: For users in unmatched languages
+        // Define the default fallback locale (usually your primary language)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
+      meta: [
+        { title: loaderData?.metaContent.title },
+        {
+          name: "description",
+          content: loaderData?.metaContent.meta.description,
+        },
+      ],
+    };
+  },
+});
+```
+
+> `head` kann aufgerufen werden, bevor der Loader fertig ist; `loaderData` ist deshalb als möglicherweise `undefined` typisiert. Behalten Sie die Optional-Chaining-Aufrufe bei oder geben Sie einen Fallback-Titel zurück.
+
+Sie behalten den Locale-Chunk, ohne seine Kosten auf dem kritischen Pfad des `head` zu bezahlen. Der Preis ist die Developer Experience: Der Inhalt muss explizit vom Loader über `loaderData` an den `head` durchgereicht werden.
+
+</Tab>
+
+</Tabs>
+
+### Welche Auflösung soll ich wählen?
+
+|                       | Statische Auflösung       | Dynamische Auflösung              | Gecachte dynamische Auflösung          |
+| --------------------- | ------------------------- | --------------------------------- | -------------------------------------- |
+| API                   | `getIntlayer`             | `getIntlayerAsync` (v9.4+)        | `getIntlayerAsync` im `loader` (v9.4+) |
+| `head`-Signatur       | synchron                  | `async`                           | synchron, liest `loaderData`           |
+| Ausgelieferte Locales | alle deklarierten Locales | nur die angeforderte Locale       | nur die angeforderte Locale            |
+| Client-Navigationen   | nichts aufzulösen         | bei jedem Match erneut ausgeführt | aus dem Router-Cache bedient           |
+| Developer Experience  | am einfachsten            | ein `await`                       | Inhalt über `loaderData` durchgereicht |
+
 ---
 
 </Step>