@intlayer/docs 9.4.0-canary.0 → 9.4.1

package/docs/id/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-06-23
+updatedAt: 2026-08-25
 title: "TanStack Start i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi TanStack Start multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -20,6 +20,9 @@ applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-templ
 applicationShowcase: https://intlayer-tanstack-start-template.vercel.app
 youtubeVideo: https://www.youtube.com/watch?v=_XTdKVWaeqg
 history:
+  - version: 9.4.0
+    date: 2026-08-25
+    changes: "Membandingkan resolusi statis, dinamis, dan dinamis dengan cache untuk kamus metadata pada fungsi head rute"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Perbarui penggunaan API useIntlayer Solid ke akses properti langsung"
@@ -317,14 +320,6 @@ function RootDocument({ children }: { children: ReactNode }) {
 }
 ```
 
-> Jika Anda ingin menggunakan konten Anda dalam atribut `string`, seperti `alt`, `title`, `href`, `aria-label`, dll., Anda harus memanggil nilai fungsi tersebut, seperti:
-
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
-> ```
-
 </Step>
 
 <Step number={6} title="Buat Layout Locale">
@@ -516,13 +511,14 @@ export const useLocalizedNavigate = () => {
 
 <Step number={9} title="Manfaatkan Intlayer di Halaman Anda">
 
+> Gunakan **`useIntlayer`** secara default: ini cara yang direkomendasikan untuk membaca konten di dalam komponen, dan compiler meresolusinya ke locale yang sedang dirender. Gunakan `getIntlayer` / `getIntlayerAsync` hanya di luar pohon React: `head` rute, loader, dan server function.
+
 Akses kamus konten Anda di seluruh aplikasi Anda:
 
-#### Halaman Beranda yang Terlokalisasi
+#### Halaman Beranda Terlokalisasi
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createFileRoute } from "@tanstack/react-router";
-import { getIntlayer } from "intlayer";
 import { useIntlayer } from "react-intlayer";
 
 import LocaleSwitcher from "@/components/locale-switcher";
@@ -560,13 +556,21 @@ function RouteComponent() {
 }
 ```
 
+> Jika Anda ingin menggunakan konten Anda dalam atribut `string`, seperti `alt`, `title`, `href`, `aria-label`, dll., Anda dapat menggunakan nilai dari fungsi, seperti:
+>
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > Untuk mempelajari lebih lanjut tentang hook `useIntlayer`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useIntlayer.md).
 
 </Step>
 
-<Step number={10} title="Buat Komponen Locale Switcher">
+<Step number={9} title="Buat Komponen Locale Switcher">
 
-Buat komponen untuk memungkinkan pengguna mengganti bahasa:
+Buat komponen untuk memungkinkan pengguna mengubah bahasa:
 
 ```tsx fileName="src/components/locale-switcher.tsx"
 import { useLocation } from "@tanstack/react-router";
@@ -612,7 +616,7 @@ export const LocaleSwitcher: FC = () => {
               {getLocaleName(localeEl)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Bahasa dalam bahasa Inggris - misalnya French */}
+              {/* Bahasa dalam Bahasa Inggris - misalnya French */}
               {getLocaleName(localeEl, Locales.ENGLISH)}
             </span>
           </LocalizedLink>
@@ -627,11 +631,13 @@ export const LocaleSwitcher: FC = () => {
 
 </Step>
 
-<Step number={11} title="Manajemen Atribut HTML">
+<Step number={10} title="Manajemen Atribut HTML">
 
-Seperti yang terlihat pada Langkah 5, Anda dapat mengelola atribut `lang` dan `dir` dari tag `html` menggunakan `useParams` di komponen root Anda. Ini memastikan bahwa atribut yang benar diatur pada server dan klien.
+Seperti yang terlihat di Step 5, Anda dapat mengelola atribut `lang` dan `dir` dari tag `html` menggunakan `useParams` di komponen root Anda. Ini memastikan bahwa atribut yang benar ditetapkan di server dan klien.
 
 ```tsx fileName="src/routes/__root.tsx"
+const localeRoute = getRouteApi("/{-$locale}");
+
 function RootDocument({ children }: { children: ReactNode }) {
   const params = localeRoute.useParams();
   const locale = params?.locale ?? defaultLocale;
@@ -648,11 +654,13 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 </Step>
 
-<Step number={12} title="Tambahkan middleware">
+<Step number={11} title="Tambahkan middleware">
+
+Anda juga dapat menggunakan `intlayerProxy` untuk menambahkan routing sisi server ke aplikasi Anda. Plugin ini akan secara otomatis mendeteksi locale saat ini berdasarkan URL dan menetapkan cookie locale yang sesuai. Jika tidak ada locale yang ditentukan, plugin akan menentukan locale yang paling sesuai berdasarkan preferensi bahasa browser pengguna. Jika tidak ada locale yang terdeteksi, plugin akan mengalihkan ke locale default.
 
-Anda juga dapat menggunakan `intlayerProxy` untuk menambahkan routing sisi server ke aplikasi Anda. Plugin ini akan secara otomatis mendeteksi locale saat ini berdasarkan URL dan mengatur cookie locale yang sesuai. Jika tidak ada locale yang ditentukan, plugin akan menentukan locale yang paling sesuai berdasarkan preferensi bahasa browser pengguna. Jika tidak ada locale yang terdeteksi, itu akan dialihkan ke locale default.
+> Perhatikan bahwa untuk menggunakan `intlayerProxy` dalam produksi, Anda perlu memindahkan paket `vite-intlayer` dari `devDependencies` ke `dependencies`.
 
-> Perhatikan bahwa untuk menggunakan `intlayerProxy` di produksi, Anda perlu mengganti paket `vite-intlayer` dari `devDependencies` ke `dependencies`.
+> Sejak Intlayer v9, `intlayerProxy()` dikemas langsung ke dalam plugin `intlayer()` dan diaktifkan secara default melalui opsi `routing.enableProxy` (`true` secara default). Mendaftarnya secara terpisah seperti yang ditunjukkan di bawah ini sekarang bersifat opsional: ini disimpan untuk kompatibilitas backward dan untuk setup yang perlu mengontrol urutan plugin. Atur `routing.enableProxy: false` untuk tidak memilih. Lihat [catatan rilis v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/releases/v9.md).
 
 ```typescript fileName="vite.config.ts"
 import { tanstackStart } from "@tanstack/react-start/plugin/vite";
@@ -684,36 +692,45 @@ export default defineConfig({
 
 </Step>
 
-<Step number={13} title="Internasionalisasi Metadata Anda">
+<Step number={12} title="Internasionalisasi Metadata Anda">
+
+<Tabs>
 
-Anda juga dapat menggunakan hook `getIntlayer` untuk mengakses kamus konten Anda di seluruh aplikasi Anda:
+<Tab label="Resolusi statis" value="static">
+
+`getIntlayer` menyelesaikan secara sinkron terhadap kamus **merged**, yang memegang setiap locale yang dideklarasikan. `head` tetap sinkron dan tidak ada yang diharapkan, tetapi seluruh kamus multilingua ditarik ke dalam chunk rute yang dikirim ke browser.
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createFileRoute } from "@tanstack/react-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 path = "/"; // The path for this route
+    const { locale = defaultLocale } = params;
+    const path = "/"; // Path untuk rute ini
 
     const metaContent = getIntlayer("app", locale);
 
     return {
       links: [
-        // Canonical link: Points to the current localized page
+        // Link canonical: Menunjuk ke halaman terlokalisasi saat ini
         { rel: "canonical", href: getLocalizedUrl(path, locale) },
 
-        // Hreflang: Tell Google about all localized versions
+        // Hreflang: Beritahu Google tentang semua versi terlokalisasi
         ...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)
+        // x-default: Untuk pengguna dalam bahasa yang tidak cocok
+        // Tentukan locale fallback default (biasanya bahasa utama Anda)
         {
           rel: "alternate",
           hrefLang: "x-default",
@@ -729,16 +746,153 @@ export const Route = createFileRoute("/{-$locale}/")({
 });
 ```
 
+Terbaik untuk kamus metadata kecil, beberapa locale, atau saat prototyping.
+
+</Tab>
+
+<Tab label="Resolusi dinamis" value="dynamic">
+
+`getIntlayerAsync` (tersedia dari **v9.4**) berperilaku seperti `getIntlayer`, tetapi plugin build mengarahkannya ke chunk per-locale di `.intlayer/dynamic_dictionaries/` bukan kamus merged. Halaman karenanya hanya mengirim locale yang ditampilkannya. Karena chunk itu dimuat sesuai permintaan, `head` menjadi `async`:
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  defaultLocale,
+  getIntlayerAsync,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  head: async ({ params }) => {
+    const { locale = defaultLocale } = params;
+    const path = "/"; // Path untuk rute ini
+
+    const metaContent = await getIntlayerAsync("app", locale);
+
+    return {
+      links: [
+        // Link canonical: Menunjuk ke halaman terlokalisasi saat ini
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+
+        // Hreflang: Beritahu Google tentang semua versi terlokalisasi
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+
+        // x-default: Untuk pengguna dalam bahasa yang tidak cocok
+        // Tentukan locale fallback default (biasanya bahasa utama Anda)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
+      meta: [
+        { title: metaContent.title },
+        { name: "description", content: metaContent.meta.description },
+      ],
+    };
+  },
+});
+```
+
+> Jika `head` membaca beberapa kamus, selesaikan dengan `Promise.all`: menunggu setiap `getIntlayerAsync` pada baris sendiri merantai permintaan alih-alih menjalankannya secara paralel.
+
+Tradeoff: impor dinamis diselesaikan saat `head` berjalan, di jalur penting render dokumen. Pada rute dingin ini menunda head selama beberapa milidetik dan dapat sedikit merusak **LCP**.
+
+</Tab>
+
+<Tab label="Resolusi dinamis yang di-cache" value="cached">
+
+Selesaikan kamus di route `loader` dan baca kembali dari `loaderData` di `head`. Loader dari rute yang cocok berjalan secara paralel, dan `staleTime: Infinity` memberi tahu TanStack Router bahwa hasil tidak pernah basi, jadi chunk per-locale diselesaikan sekali dan disajikan dari cache router setelahnya, meninggalkan `head` sinkron.
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  defaultLocale,
+  getIntlayerAsync,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  // Diselesaikan secara paralel dengan rute yang cocok lainnya, lepas dari jalur penting head
+  loader: async ({ params }) => {
+    const { locale = defaultLocale } = params;
+
+    return { metaContent: await getIntlayerAsync("app", locale) };
+  },
+  // Kamus tidak pernah berubah untuk locale tertentu: selesaikan chunk sekali
+  staleTime: Infinity,
+  head: ({ params, loaderData }) => {
+    const { locale = defaultLocale } = params;
+    const path = "/"; // Path untuk rute ini
+
+    return {
+      links: [
+        // Link canonical: Menunjuk ke halaman terlokalisasi saat ini
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+
+        // Hreflang: Beritahu Google tentang semua versi terlokalisasi
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+
+        // x-default: Untuk pengguna dalam bahasa yang tidak cocok
+        // Tentukan locale fallback default (biasanya bahasa utama Anda)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
+      meta: [
+        { title: loaderData?.metaContent.title },
+        {
+          name: "description",
+          content: loaderData?.metaContent.meta.description,
+        },
+      ],
+    };
+  },
+});
+```
+
+> `head` dapat dipanggil sebelum loader settles, jadi `loaderData` diketik sebagai kemungkinan `undefined`. Pertahankan rantai opsional, atau kembalikan judul fallback.
+
+Anda menyimpan chunk per-locale tanpa membayar biayanya di jalur penting head. Harganya adalah pengalaman pengembang: konten harus dithread secara eksplisit dari loader ke `head` melalui `loaderData`.
+
+</Tab>
+
+</Tabs>
+
+### Resolusi mana yang harus saya pilih?
+
+|                      | Static resolution     | Dynamic resolution         | Cached dynamic resolution              |
+| -------------------- | --------------------- | -------------------------- | -------------------------------------- |
+| API                  | `getIntlayer`         | `getIntlayerAsync` (v9.4+) | `getIntlayerAsync` in `loader` (v9.4+) |
+| `head` signature     | synchronous           | `async`                    | synchronous, reads `loaderData`        |
+| Locales shipped      | every declared locale | requested locale only      | requested locale only                  |
+| Client navigations   | nothing to resolve    | re-entered on every match  | served from the router cache           |
+| Developer experience | simplest              | one `await`                | content threaded through `loaderData`  |
+
 ---
 
 </Step>
 
-<Step number={14} title="Ambil locale dalam server actions Anda">
+<Step number={13} title="Ambil locale di server actions Anda">
 
-Anda mungkin ingin mengakses locale saat ini dari dalam server actions atau endpoint API Anda.
-Anda dapat melakukannya menggunakan pembantu `getLocale` dari `intlayer`.
+Anda mungkin ingin mengakses locale saat ini dari dalam server actions atau API endpoints Anda.
+Anda dapat melakukan ini menggunakan helper `getLocale` dari `intlayer`.
 
-Berikut adalah contoh menggunakan fungsi server TanStack Start:
+Berikut adalah contoh menggunakan TanStack Start's server functions:
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createServerFn } from "@tanstack/react-start";
@@ -750,18 +904,18 @@ import { getCookie, getIntlayer, getLocale } from "intlayer";
 
 export const getLocaleServer = createServerFn().handler(async () => {
   const locale = await getLocale({
-    // Dapatkan cookie dari permintaan (default: 'INTLAYER_LOCALE')
+    // Ambil cookie dari request (default: 'INTLAYER_LOCALE')
     getCookie: (name) => {
       const cookieString = getRequestHeader("cookie");
 
       return getCookie(name, cookieString);
     },
-    // Dapatkan header dari permintaan (default: 'x-intlayer-locale')
+    // Ambil header dari request (default: 'x-intlayer-locale')
     // Fallback menggunakan negosiasi Accept-Language
     getHeader: (name) => getRequestHeader(name),
   });
 
-  // Ambil beberapa konten menggunakan getIntlayer()
+  // Ambil beberapa konten menggunakan getIntlayerAsync()
   const content = getIntlayer("app", locale);
 
   return { locale, content };
@@ -772,101 +926,133 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 </Step>
 
-<Step number={15} title="Kelola halaman tidak ditemukan">
+<Step number={14} title="Kelola halaman not found">
 
-Ketika seorang pengguna mengunjungi halaman yang tidak ada, Anda dapat menampilkan halaman tidak ditemukan yang disesuaikan dan awalan locale dapat mempengaruhi cara halaman tidak ditemukan dipicu.
+Ketika pengguna mengunjungi halaman yang tidak ada, Anda dapat menampilkan halaman not found kustom dan prefiks locale dapat mempengaruhi cara halaman not found dipicu.
 
-#### Memahami Penanganan 404 TanStack Router dengan Awalan Locale
+#### Halaman Beranda yang Terlokalisasi
 
-Di TanStack Router, menangani halaman 404 dengan rute yang dilokalisasi memerlukan pendekatan berlapis:
+> Jika Anda ingin menggunakan konten Anda dalam atribut `string`, seperti `alt`, `title`, `href`, `aria-label`, dll., Anda dapat menggunakan nilai dari fungsi, seperti:
+>
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
 
-1. **Rute 404 khusus**: Rute khusus untuk menampilkan UI 404
-2. **Validasi tingkat rute**: Memvalidasi awalan locale dan mengalihkan yang tidak valid ke 404
-3. **Rute catch-all**: Menangkap setiap jalur yang tidak cocok dalam segmen locale
+> Untuk mempelajari lebih lanjut tentang hook `useIntlayer`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useIntlayer.md).
 
-```tsx fileName="src/routes/{-$locale}/404.tsx"
-import { createFileRoute } from "@tanstack/react-router";
+</Step>
 
-// Ini membuat rute /[locale]/404 khusus
-// Ini digunakan baik sebagai rute langsung maupun diimpor sebagai komponen di file lain
-export const Route = createFileRoute("/{-$locale}/404")({
-  component: NotFoundComponent,
-});
+```tsx fileName="src/components/locale-switcher.tsx"
+import { useLocation } from "@tanstack/react-router";
+import {
+  getHTMLTextDir,
+  getLocaleName,
+  getPathWithoutLocale,
+  getPrefix,
+  Locales,
+} from "intlayer";
+import type { FC } from "react";
+import { useLocale } from "react-intlayer";
+
+import { LocalizedLink, type To } from "./localized-link";
+
+export const LocaleSwitcher: FC = () => {
+  const { pathname } = useLocation();
+
+  const { availableLocales, locale, setLocale } = useLocale();
+
+  const pathWithoutLocale = getPathWithoutLocale(pathname);
 
-// Diekspor secara terpisah sehingga dapat digunakan kembali dalam notFoundComponent dan rute catch-all
-export function NotFoundComponent() {
   return (
-    <div>
-      <h1>404</h1>
-    </div>
+    <ol>
+      {availableLocales.map((localeEl) => (
+        <li key={localeEl}>
+          <LocalizedLink
+            aria-current={localeEl === locale ? "page" : undefined}
+            onClick={() => setLocale(localeEl)}
+            params={{ locale: getPrefix(localeEl).localePrefix }}
+            to={pathWithoutLocale as To}
+          >
+            <span>
+              {/* Locale - misalnya FR */}
+              {localeEl}
+            </span>
+            <span>
+              {/* Bahasa dalam Locale-nya sendiri - misalnya Français */}
+              {getLocaleName(localeEl, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
+              {/* Bahasa dalam Locale saat ini - misalnya Francés dengan locale saat ini diatur ke Locales.SPANISH */}
+              {getLocaleName(localeEl)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* Bahasa dalam bahasa Inggris - misalnya French */}
+              {getLocaleName(localeEl, Locales.ENGLISH)}
+            </span>
+          </LocalizedLink>
+        </li>
+      ))}
+    </ol>
   );
-}
+};
 ```
 
-```tsx fileName="src/routes/{-$locale}/route.tsx"
-import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
-import { validatePrefix } from "intlayer";
-import { NotFoundComponent } from "./404";
+> Untuk mempelajari lebih lanjut tentang hook `useLocale`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useLocale.md).
 
-export const Route = createFileRoute("/{-$locale}")({
-  // beforeLoad berjalan sebelum rute merender (di server maupun klien)
-  // Ini adalah tempat yang ideal untuk memvalidasi awalan locale
-  beforeLoad: ({ params }) => {
-    const localeParam = params.locale;
+</Step>
 
-    // validatePrefix memeriksa apakah locale valid sesuai dengan konfigurasi intlayer Anda
-    const { isValid, localePrefix } = validatePrefix(localeParam);
+<Step number={11} title="Manajemen Atribut HTML">
 
-    if (!isValid) {
-      // Awalan locale tidak valid - alihkan ke halaman 404 dengan awalan locale yang valid
-      throw redirect({
-        to: "/{-$locale}/404",
-        params: { locale: localePrefix },
-      });
-    }
-  },
-  component: Outlet,
-  // notFoundComponent dipanggil ketika rute anak tidak ada
-  // misal, /en/non-existent-page memicu ini dalam layout /en
-  notFoundComponent: NotFoundComponent,
-});
-```
+return (
+<html dir={getHTMLTextDir(locale)} lang={locale}>
+{/* ... _/}
+</html>
+);
+} {/_ ... */}
+</html>
+);
+}
 
-```tsx fileName="src/routes/{-$locale}/$.tsx"
-import { createFileRoute } from "@tanstack/react-router";
+export const Route = createFileRoute("/{-$locale}/")({
+component: RouteComponent,
+head: async ({ params }) => {
+const { locale = defaultLocale } = params;
+const path = "/"; // The path for this route
 
-import { NotFoundComponent } from "./404";
+    const metaContent = await getIntlayerAsync("app", locale);
 
-// Rute $ (splat/catch-all) cocok dengan jalur mana pun yang tidak cocok dengan rute lain
-// misal, /en/some/deeply/nested/invalid/path
-// Ini memastikan SEMUA jalur yang tidak cocok dalam suatu locale menampilkan halaman 404
-// Tanpa ini, jalur dalam yang tidak cocok mungkin menampilkan halaman kosong atau kesalahan
-export const Route = createFileRoute("/{-$locale}/$")({
-  component: NotFoundComponent,
-});
-```
+````
 
----
+> Jika sebuah `head` membaca beberapa kamus, selesaikan dengan `Promise.all`; meng-await setiap `getIntlayerAsync` di barisnya sendiri membuat permintaan berantai alih-alih berjalan paralel.
 
-</Step>
+Kompromnya: import dinamis diselesaikan saat `head` berjalan, di jalur kritis rendering dokumen. Pada rute dingin hal ini menunda `head` beberapa milidetik dan dapat sedikit memperburuk **LCP**.
 
-<Step number={16} title="Konfigurasi TypeScript">
+</Tab>
 
-Intlayer menggunakan augmentasi modul untuk mendapatkan manfaat TypeScript dan membuat basis kode Anda lebih kuat.
+<Tab label="Resolusi dinamis dengan cache" value="cached">
 
-Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dihasilkan secara otomatis:
+Selesaikan kamus di `loader` rute lalu baca kembali dari `loaderData` di `head`. Loader rute yang cocok berjalan paralel, dan `staleTime: Infinity` memberi tahu TanStack Router bahwa hasilnya tidak pernah basi, sehingga chunk per-locale diselesaikan sekali lalu disajikan dari cache router, dan `head` tetap sinkron.
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+
+<Tabs>
+ <Tab value='Extract command'>
+
+  return { locale, content };
+});
+import { createFileRoute } from "@tanstack/react-router";
+
+````
+
+```tsx fileName="src/routes/{-$locale}/route.tsx"
 
-```json5 fileName="tsconfig.json"
-{
-  // ... konfigurasi yang ada
-  include: [
-    // ... include yang ada
-    ".intlayer/**/*.ts", // Sertakan tipe yang dihasilkan otomatis
-  ],
-}
 ```
 
----
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { NotFoundComponent } from "./404";
+```
 
 </Step>
 
@@ -881,24 +1067,11 @@ Untuk mengaturnya, Anda dapat menambahkan bagian `compiler` di file `intlayer.co
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { type IntlayerConfig } from "intlayer";
 
-const config: IntlayerConfig = {
-  // ... Sisa konfigurasi Anda
-  compiler: {
-    /**
-     * Menunjukkan apakah compiler harus diaktifkan.
-     */
-    enabled: true,
-
     /**
      * Menentukan jalur file output
      */
     output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
-    /**
-     * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.
-     */
-    saveComponents: false,
-
     /**
      * Prefiks kunci kamus
      */
@@ -915,29 +1088,23 @@ export default config;
 Jalankan extractor untuk mengubah komponen Anda dan mengekstrak kontennya
 
 ```bash packageManager="npm"
-npx intlayer extract
+
 ```
 
 ```bash packageManager="pnpm"
-pnpm intlayer extract
+
 ```
 
 ```bash packageManager="yarn"
-yarn intlayer extract
+
 ```
 
 ```bash packageManager="bun"
-bun x intlayer extract
-```
 
  </Tab>
- <Tab value='Compiler Babel'>
-
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Perbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:
+</Tabs>
 
-```ts fileName="vite.config.ts"
+bun x intlayer extract
 import { defineConfig } from "vite";
 import { intlayer, intlayerCompiler } from "vite-intlayer";
 
@@ -962,59 +1129,117 @@ yarn build # Or yarn dev
 ```
 
 ```bash packageManager="bun"
+
+---
+
 bun run build # Or bun run dev
+import { localeFlatMap } from "intlayer";
+// ... import lainnya
+
+export const pathList = ["", "/about", "/404"];
+
+const localizedPages = localeFlatMap(({ urlPrefix }) =>
+  pathList.map((path) => ({
+    path: `${urlPrefix}${path}`,
+    prerender: {
+      enabled: true,
+    },
+  }))
+);
+
+export default defineConfig({
+  plugins: [
+    // ... plugin lainnya
+    tanstackStart({
+      // ... konfigurasi lainnya
+      sitemap: {
+        enabled: false,
+      },
+      prerender: {
+        enabled: true,
+        crawlLinks: false,
+        concurrency: 10,
+      },
+      pages: localizedPages,
+    }),
+  ],
+});
 ```
 
- </Tab>
-</Tabs>
+Kemudian, buat rute `src/routes/sitemap[.]xml.ts` yang menggunakan fungsi `generateSitemap`:
 
----
+````typescript fileName="src/routes/sitemap[.]xml.ts"
 
-</Step>
+---
 
-</Steps>
+export const Route = createFileRoute("/sitemap.xml")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const sitemap = generateSitemap(
+          [
+            { path: "/", changefreq: "daily", priority: 1.0 },
+            { path: "/about", changefreq: "monthly", priority: 0.8 },
+          ],
+          { siteUrl: SITE_URL }
+        );
+
+        return new Response(sitemap, {
+          headers: { "Content-Type": "application/xml" },
+        });
+      },
+    },
+  },
+});
+{
+  // ... konfigurasi yang sudah ada
+  include: [
+    // ... include yang sudah ada
+    ".intlayer/**/*.ts", // Sertakan tipe yang dibuat secara otomatis
+  ],
+}
 
 ### Konfigurasi Git
 
-Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini memungkinkan Anda menghindari melakukan commit ke repositori Git Anda.
+Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini memungkinkan Anda untuk menghindari commit mereka ke repositori Git Anda.
 
 Untuk melakukan ini, Anda dapat menambahkan instruksi berikut ke file `.gitignore` Anda:
 
 ```plaintext fileName=".gitignore"
 # Abaikan file yang dihasilkan oleh Intlayer
 .intlayer
-```
+````
 
 ---
 
 ## Ekstensi VS Code
 
-Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal **Ekstensi VS Code Intlayer** resmi.
+Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal **Intlayer VS Code Extension** resmi.
 
 [Instal dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
 Ekstensi ini menyediakan:
 
 - **Autocompletion** untuk kunci terjemahan.
-- **Deteksi kesalahan waktu nyata** untuk terjemahan yang hilang.
+- **Deteksi kesalahan real-time** untuk terjemahan yang hilang.
 - **Pratinjau inline** dari konten yang diterjemahkan.
 - **Tindakan cepat** untuk dengan mudah membuat dan memperbarui terjemahan.
 
-Untuk detail lebih lanjut tentang cara menggunakan ekstensi, lihat [dokumentasi Ekstensi VS Code Intlayer](https://intlayer.org/doc/vs-code-extension).
+Untuk detail lebih lanjut tentang cara menggunakan ekstensi, lihat [dokumentasi Intlayer VS Code Extension](https://intlayer.org/doc/vs-code-extension).
 
 ---
 
-## Melangkah Lebih Jauh
+## Lanjutkan Lebih Jauh
 
-Untuk melangkah lebih jauh, Anda dapat mengimplementasikan [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md) atau mengeksternalisasi konten Anda menggunakan [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md).
+Untuk melanjutkan lebih jauh, Anda dapat menerapkan [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md) atau mengekstensikan konten Anda menggunakan [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md).
 
 ---
 
 ## Referensi Dokumentasi
 
 - [Dokumentasi Intlayer](https://intlayer.org)
-- [Dokumentasi TanStack Start](https://reactrouter.com/)
-- [Hook useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useIntlayer.md)
-- [Hook useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useLocale.md)
-- [Deklarasi Konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md)
+- [Dokumentasi Tanstack Start](https://reactrouter.com/)
+- [hook useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useIntlayer.md)
+- [hook useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useLocale.md)
+- [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md)
 - [Konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md)