@intlayer/docs 9.3.3 → 9.4.0

package/docs/vi/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-06-23
+updatedAt: 2026-08-25
 title: "TanStack Start i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng TanStack Start đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 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: "So sánh phân giải tĩnh, động và động có cache cho từ điển metadata trong hàm head của route"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Cập nhật cách sử dụng API useIntlayer của Solid sang truy cập thuộc tính trực tiếp"
@@ -81,7 +84,7 @@ Xác định phạm vi nội dung ứng dụng của bạn **tạo điều kiệ
 
 <Accordion header="Đại lý AI">
 
-Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
+Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
 
 </Accordion>
 
@@ -317,14 +320,6 @@ function RootDocument({ children }: { children: ReactNode }) {
 }
 ```
 
-> Nếu bạn muốn sử dụng nội dung của mình trong một thuộc tính `string`, như `alt`, `title`, `href`, `aria-label`, v.v., bạn phải gọi giá trị của hàm, ví dụ:
-
-> ```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="Tạo Layout Locale">
@@ -516,13 +511,14 @@ export const useLocalizedNavigate = () => {
 
 <Step number={9} title="Sử dụng Intlayer trong các Trang của Bạn">
 
+> Hãy dùng **`useIntlayer`** theo mặc định: đây là cách được khuyến nghị để đọc nội dung bên trong component, và trình biên dịch sẽ phân giải nó về đúng locale đang được render. Chỉ dùng `getIntlayer` / `getIntlayerAsync` bên ngoài cây React: `head` của route, loader và server function.
+
 Truy cập các từ điển nội dung của bạn trong toàn bộ ứng dụng:
 
-#### Trang Chủ Đã Được Địa Phương Hóa
+#### Trang Chủ Được Bản Địa Hóa
 
 ```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,11 +556,19 @@ function RouteComponent() {
 }
 ```
 
+> Nếu bạn muốn sử dụng nội dung của mình trong một thuộc tính `string`, chẳng hạn như `alt`, `title`, `href`, `aria-label`, v.v., bạn có thể sử dụng giá trị của hàm, như:
+>
+> ```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)}" />
+> ```
+
 > Để tìm hiểu thêm về hook `useIntlayer`, hãy tham khảo [tài liệu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useIntlayer.md).
 
 </Step>
 
-<Step number={10} title="Tạo một Thành phần Chuyển đổi Ngôn ngữ">
+<Step number={9} title="Tạo Thành Phần Chuyển Đổi Ngôn Ngữ">
 
 Tạo một thành phần để cho phép người dùng thay đổi ngôn ngữ:
 
@@ -600,19 +604,19 @@ export const LocaleSwitcher: FC = () => {
             to={pathWithoutLocale as To}
           >
             <span>
-              {/* Mã ngôn ngữ - ví dụ: FR */}
+              {/* Locale - ví dụ FR */}
               {localeEl}
             </span>
             <span>
-              {/* Ngôn ngữ theo mã ngôn ngữ của chính nó - ví dụ: Français */}
+              {/* Ngôn ngữ trong Locale của chính nó - ví dụ Français */}
               {getLocaleName(localeEl, locale)}
             </span>
             <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
-              {/* Ngôn ngữ theo mã ngôn ngữ hiện tại - ví dụ: Francés khi mã ngôn ngữ hiện tại là Locales.SPANISH */}
+              {/* Ngôn ngữ trong Locale hiện tại - ví dụ Francés khi Locale hiện tại được đặt thành Locales.SPANISH */}
               {getLocaleName(localeEl)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Ngôn ngữ bằng tiếng Anh - ví dụ: French */}
+              {/* Ngôn ngữ trong tiếng Anh - ví dụ French */}
               {getLocaleName(localeEl, Locales.ENGLISH)}
             </span>
           </LocalizedLink>
@@ -623,15 +627,17 @@ export const LocaleSwitcher: FC = () => {
 };
 ```
 
-> Để tìm hiểu thêm về hook `useLocale`, tham khảo [tài liệu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useLocale.md).
+> Để tìm hiểu thêm về hook `useLocale`, hãy tham khảo [tài liệu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useLocale.md).
 
 </Step>
 
-<Step number={11} title="Quản lý Thuộc tính HTML">
+<Step number={10} title="Quản Lý Thuộc Tính HTML">
 
-Như đã thấy trong Bước 5, bạn có thể quản lý các thuộc tính `lang` và `dir` của thẻ `html` bằng cách sử dụng `useParams` trong component gốc của bạn. Điều này đảm bảo các thuộc tính được đặt đúng trên server và client.
+Như đã thấy trong Bước 5, bạn có thể quản lý các thuộc tính `lang` và `dir` của thẻ `html` bằng cách sử dụng `useParams` trong thành phần gốc của mình. Điều này đảm bảo rằng các thuộc tính chính xác được đặt trên máy chủ và máy khách.
 
 ```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="Thêm middleware">
+<Step number={11} title="Thêm middleware">
+
+Bạn cũng có thể sử dụng `intlayerProxy` để thêm định tuyến phía máy chủ vào ứng dụng của mình. Plugin này sẽ tự động phát hiện ngôn ngữ hiện tại dựa trên URL và đặt cookie ngôn ngữ thích hợp. Nếu không có ngôn ngữ nào được chỉ định, plugin sẽ xác định ngôn ngữ phù hợp nhất dựa trên tùy chọn ngôn ngữ trình duyệt của người dùng. Nếu không phát hiện được ngôn ngữ nào, nó sẽ chuyển hướng đến ngôn ngữ mặc định.
 
-Bạn cũng có thể sử dụng `intlayerProxy` để thêm routing phía server vào ứng dụng của bạn. Plugin này sẽ tự động phát hiện locale hiện tại dựa trên URL và thiết lập cookie locale phù hợp. Nếu không có locale nào được chỉ định, plugin sẽ xác định locale phù hợp nhất dựa trên ngôn ngữ trình duyệt của người dùng. Nếu không phát hiện được locale nào, nó sẽ chuyển hướng đến locale mặc định.
+> Lưu ý rằng để sử dụng `intlayerProxy` trong production, bạn cần chuyển package `vite-intlayer` từ `devDependencies` sang `dependencies`.
 
-> Lưu ý rằng để sử dụng `intlayerProxy` trong môi trường production, bạn cần chuyển gói `vite-intlayer` từ `devDependencies` sang `dependencies`.
+> Kể từ Intlayer v9, `intlayerProxy()` được bao gồm trực tiếp trong plugin `intlayer()` và được bật theo mặc định thông qua tùy chọn `routing.enableProxy` (`true` theo mặc định). Đăng ký nó riêng như hình dưới đây giờ đây là tùy chọn: nó được giữ lại để tương thích ngược và cho các thiết lập cần kiểm soát thứ tự plugin. Đặt `routing.enableProxy: false` để từ chối. Xem [ghi chú phát hành v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/releases/v9.md).
 
 ```typescript fileName="vite.config.ts"
 import { tanstackStart } from "@tanstack/react-start/plugin/vite";
@@ -684,36 +692,99 @@ export default defineConfig({
 
 </Step>
 
-<Step number={13} title="Quốc tế hóa siêu dữ liệu của bạn">
+<Step number={12} title="Bản Địa Hóa Metadata của Bạn">
 
-Bạn cũng có thể sử dụng hook `getIntlayer` để truy cập các từ điển nội dung của bạn trong toàn bộ ứng dụng:
+<Tabs>
+
+<Tab label="Phân giải tĩnh" value="static">
+
+`getIntlayer` phân giải đồng bộ dựa trên từ điển **đã hợp nhất**, từ điển chứa mọi ngôn ngữ được khai báo. `head` vẫn đồng bộ và không có gì bị chờ đợi, nhưng toàn bộ từ điển đa ngôn ngữ được kéo vào phần tuyến đường được gửi đến trình duyệt.
 
 ```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 = "/"; // Đường dẫn cho tuyến đường này
 
     const metaContent = getIntlayer("app", locale);
 
     return {
       links: [
-        // Canonical link: Points to the current localized page
+        // Liên kết chính tắc: Trỏ đến trang được bản địa hóa hiện tại
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+
+        // Hreflang: Thông báo cho Google về tất cả các phiên bản được bản địa hóa
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+
+        // x-default: Cho người dùng ở các ngôn ngữ không phù hợp
+        // Xác định ngôn ngữ dự phòng mặc định (thường là ngôn ngữ chính của bạn)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
+      meta: [
+        { title: metaContent.title },
+        { name: "description", content: metaContent.meta.description },
+      ],
+    };
+  },
+});
+```
+
+Tốt nhất cho các từ điển metadata nhỏ, một số ngôn ngữ, hoặc trong khi tạo mẫu.
+
+</Tab>
+
+<Tab label="Phân giải động" value="dynamic">
+
+`getIntlayerAsync` (có sẵn từ **v9.4**) hoạt động như `getIntlayer`, nhưng plugin xây dựng chỉ nó đến phần theo ngôn ngữ trong `.intlayer/dynamic_dictionaries/` thay vì từ điển đã hợp nhất. Do đó, một trang chỉ vận chuyển ngôn ngữ nó kết xuất. Vì phần đó được tải theo yêu cầu, `head` trở thành `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 = "/"; // Đường dẫn cho tuyến đường này
+
+    const metaContent = await getIntlayerAsync("app", locale);
+
+    return {
+      links: [
+        // Liên kết chính tắc: Trỏ đến trang được bản địa hóa hiện tại
         { rel: "canonical", href: getLocalizedUrl(path, locale) },
 
-        // Hreflang: Tell Google about all localized versions
+        // Hreflang: Thông báo cho Google về tất cả các phiên bản được bản địa hóa
         ...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: Cho người dùng ở các ngôn ngữ không phù hợp
+        // Xác định ngôn ngữ dự phòng mặc định (thường là ngôn ngữ chính của bạn)
         {
           rel: "alternate",
           hrefLang: "x-default",
@@ -729,16 +800,99 @@ export const Route = createFileRoute("/{-$locale}/")({
 });
 ```
 
+> Nếu `head` đọc nhiều từ điển, hãy giải quyết chúng với `Promise.all`: chờ từng `getIntlayerAsync` trên dòng riêng của nó sẽ kết chuỗi các yêu cầu thay vì chạy chúng song song.
+
+Sự cân bằng: nhập động được phân giải trong khi `head` chạy, trên đường dẫn quan trọng của kết xuất tài liệu. Trên một tuyến đường lạnh, điều này làm trễ head một vài mili giây và có thể làm giảm nhẹ **LCP**.
+
+</Tab>
+
+<Tab label="Phân giải động được lưu trong bộ nhớ cache" value="cached">
+
+Giải quyết từ điển trong `loader` tuyến đường và đọc lại từ `loaderData` trong `head`. Loaders của các tuyến đường khớp chạy song song, và `staleTime: Infinity` cho TanStack Router biết rằng kết quả không bao giờ cũ, vì vậy phần theo ngôn ngữ được giải quyết một lần và được phục vụ từ bộ nhớ cache của router sau đó, để `head` đồng bộ.
+
+```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,
+  // Được giải quyết song song với các tuyến đường khớp khác, không ngoài đường dẫn quan trọng của head
+  loader: async ({ params }) => {
+    const { locale = defaultLocale } = params;
+
+    return { metaContent: await getIntlayerAsync("app", locale) };
+  },
+  // Từ điển không bao giờ thay đổi cho một ngôn ngữ nhất định: giải quyết phần một lần
+  staleTime: Infinity,
+  head: ({ params, loaderData }) => {
+    const { locale = defaultLocale } = params;
+    const path = "/"; // Đường dẫn cho tuyến đường này
+
+    return {
+      links: [
+        // Liên kết chính tắc: Trỏ đến trang được bản địa hóa hiện tại
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+
+        // Hreflang: Thông báo cho Google về tất cả các phiên bản được bản địa hóa
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+
+        // x-default: Cho người dùng ở các ngôn ngữ không phù hợp
+        // Xác định ngôn ngữ dự phòng mặc định (thường là ngôn ngữ chính của bạn)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
+      meta: [
+        { title: loaderData?.metaContent.title },
+        {
+          name: "description",
+          content: loaderData?.metaContent.meta.description,
+        },
+      ],
+    };
+  },
+});
+```
+
+> `head` có thể được gọi trước khi loader hoàn thành, vì vậy `loaderData` được gõ là có thể `undefined`. Giữ tùy chọn chaining, hoặc trả về tiêu đề dự phòng.
+
+Bạn giữ phần theo ngôn ngữ mà không phải trả giá của nó trên đường dẫn quan trọng của head. Giá là trải nghiệm nhà phát triển: nội dung phải được luồng rõ ràng từ loader đến `head` thông qua `loaderData`.
+
+</Tab>
+
+</Tabs>
+
+### Tôi nên chọn độ phân giải nào?
+
+|                      | Độ phân giải tĩnh     | Độ phân giải động          | Độ phân giải động được lưu cache       |
+| -------------------- | --------------------- | -------------------------- | -------------------------------------- |
+| 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="Lấy locale trong server actions của bạn">
+<Step number={13} title="Truy xuất locale trong các server actions của bạn">
 
-Bạn có thể muốn truy cập locale hiện tại từ bên trong server actions hoặc API endpoints của mình.
-Bạn có thể làm điều này bằng cách sử dụng helper `getLocale` từ `intlayer`.
+Bạn có thể muốn truy cập locale hiện tại từ bên trong các server actions hoặc API endpoints của mình.
+Bạn có thể thực hiện điều này bằng cách sử dụng helper `getLocale` từ `intlayer`.
 
-Đây là một ví dụ sử dụng server functions của TanStack Start:
+Đây là một ví dụ sử dụng các server functions của TanStack Start:
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createServerFn } from "@tanstack/react-start";
@@ -761,7 +915,7 @@ export const getLocaleServer = createServerFn().handler(async () => {
     getHeader: (name) => getRequestHeader(name),
   });
 
-  // Lấy một số nội dung bằng getIntlayer()
+  // Truy xuất một số nội dung sử dụng getIntlayerAsync()
   const content = getIntlayer("app", locale);
 
   return { locale, content };
@@ -772,101 +926,155 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 </Step>
 
-<Step number={15} title="Quản lý trang không tìm thấy">
+<Step number={14} title="Quản lý các trang không tìm thấy">
 
-Khi người dùng truy cập một trang không tồn tại, bạn có thể hiển thị một trang không tìm thấy tùy chỉnh và tiền tố locale có thể ảnh hưởng đến cách trang không tìm thấy được kích hoạt.
+Khi một người dùng truy cập một trang không tồn tại, bạn có thể hiển thị một trang không tìm thấy tùy chỉnh và tiền tố locale có thể ảnh hưởng đến cách trang không tìm thấy được kích hoạt.
 
-#### Hiểu về xử lý 404 của TanStack Router với tiền tố locale
+#### Trang Chủ Đã Được Địa Phương Hóa
 
-Trong TanStack Router, xử lý các trang 404 với các route đã được bản địa hóa yêu cầu một cách tiếp cận nhiều lớp:
+> Nếu bạn muốn sử dụng nội dung của bạn trong một thuộc tính `string`, chẳng hạn như `alt`, `title`, `href`, `aria-label`, v.v., bạn có thể sử dụng giá trị của hàm, như:
+>
+> ```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. **Route 404 chuyên dụng**: Một route cụ thể để hiển thị giao diện 404
-2. **Xác thực cấp route**: Xác thực các tiền tố locale và chuyển hướng các tiền tố không hợp lệ đến 404
-3. **Route catch-all**: Bắt tất cả các đường dẫn không khớp trong phân đoạn locale
+> Để tìm hiểu thêm về hook `useIntlayer`, hãy tham khảo [tài liệu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useIntlayer.md).
 
-```tsx fileName="src/routes/{-$locale}/404.tsx"
-import { createFileRoute } from "@tanstack/react-router";
+</Step>
 
-// Điều này tạo một tuyến đường /[locale]/404 chuyên dụng
-// Nó được sử dụng cả như một tuyến đường trực tiếp và được nhập như một thành phần trong các tệp khác
-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);
 
-// Xuất riêng để có thể tái sử dụng trong notFoundComponent và các tuyến 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>
+              {/* Mã ngôn ngữ - ví dụ: FR */}
+              {localeEl}
+            </span>
+            <span>
+              {/* Ngôn ngữ theo mã ngôn ngữ của chính nó - ví dụ: Français */}
+              {getLocaleName(localeEl, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
+              {/* Ngôn ngữ theo mã ngôn ngữ hiện tại - ví dụ: Francés khi mã ngôn ngữ hiện tại là Locales.SPANISH */}
+              {getLocaleName(localeEl)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* Ngôn ngữ bằng tiếng Anh - ví dụ: 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";
+> Để tìm hiểu thêm về hook `useLocale`, tham khảo [tài liệu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useLocale.md).
 
-export const Route = createFileRoute("/{-$locale}")({
-  // beforeLoad chạy trước khi route được render (trên cả server và client)
-  // Đây là nơi lý tưởng để xác thực tiền tố locale
-  beforeLoad: ({ params }) => {
-    const localeParam = params.locale;
+</Step>
 
-    // validatePrefix kiểm tra xem locale có hợp lệ theo cấu hình intlayer của bạn không
-    const { isValid, localePrefix } = validatePrefix(localeParam);
+<Step number={11} title="Quản lý Thuộc tính HTML">
 
-    if (!isValid) {
-      // Tiền tố locale không hợp lệ - chuyển hướng đến trang 404 với tiền tố locale hợp lệ
-      throw redirect({
-        to: "/{-$locale}/404",
-        params: { locale: localePrefix },
-      });
-    }
-  },
-  component: Outlet,
-  // notFoundComponent được gọi khi một route con không tồn tại
-  // ví dụ: /en/trang-khong-ton-tai kích hoạt điều này trong 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);
 
-// Tuyến đường $ (splat/catch-all) khớp với bất kỳ đường dẫn nào không khớp với các tuyến đường khác
-// ví dụ: /en/mot/duong/dan/sau/long/khong-hop-le
-// Điều này đảm bảo TẤT CẢ các đường dẫn không khớp trong một locale hiển thị trang 404
-// Nếu không có điều này, các đường dẫn sâu không khớp có thể hiển thị trang trống hoặc lỗi
-export const Route = createFileRoute("/{-$locale}/$")({
-  component: NotFoundComponent,
-});
-```
+````
+
+> Nếu một `head` đọc nhiều từ điển, hãy phân giải chúng bằng `Promise.all`; await từng `getIntlayerAsync` trên một dòng riêng sẽ khiến các yêu cầu nối đuôi nhau thay vì chạy song song.
+
+Đánh đổi: import động được phân giải trong lúc `head` chạy, nằm trên đường găng của quá trình render tài liệu. Trên một route "nguội", điều này làm `head` trễ vài mili giây và có thể làm **LCP** kém đi đôi chút.
+
+</Tab>
+
+<Tab label="Phân giải động có cache" value="cached">
+
+Hãy phân giải từ điển trong `loader` của route rồi đọc lại từ `loaderData` trong `head`. Loader của các route khớp chạy song song, và `staleTime: Infinity` cho TanStack Router biết kết quả không bao giờ cũ, nhờ đó chunk theo locale chỉ được phân giải một lần rồi phục vụ từ cache của router, giữ cho `head` đồng bộ.
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+      return getCookie(name, cookieString);
+    },
+    // Lấy header từ request (mặc định: 'x-intlayer-locale')
+    // Fallback sử dụng Accept-Language negotiation
+    getHeader: (name) => getRequestHeader(name),
+  });
+
+  // Lấy một số nội dung bằng getIntlayer()
+  const content = getIntlayer("app", locale);
+
+````
 
 ---
 
 </Step>
 
-<Step number={16} title="Cấu hình TypeScript">
+<Step number={15} title="Quản lý trang không tìm thấy">
 
-Intlayer sử dụng module augmentation để tận dụng các lợi ích của TypeScript và làm cho codebase của bạn mạnh mẽ hơn.
+Khi người dùng truy cập một trang không tồn tại, bạn có thể hiển thị một trang không tìm thấy tùy chỉnh và tiền tố locale có thể ảnh hưởng đến cách trang không tìm thấy được kích hoạt.
 
-Đảm bảo cấu hình TypeScript của bạn bao gồm các kiểu được tạo tự động:
+#### Hiểu về xử lý 404 của TanStack Router với tiền tố locale
+
+Trong TanStack Router, xử lý các trang 404 với các route đã được bản địa hóa yêu cầu một cách tiếp cận nhiều lớp:
+
+1. **Route 404 chuyên dụng**: Một route cụ thể để hiển thị giao diện 404
+2. **Xác thực cấp route**: Xác thực các tiền tố locale và chuyển hướng các tiền tố không hợp lệ đến 404
+3. **Route catch-all**: Bắt tất cả các đường dẫn không khớp trong phân đoạn locale
+
+```tsx fileName="src/routes/{-$locale}/404.tsx"
 
-```json5 fileName="tsconfig.json"
-{
-  // ... các cấu hình hiện có của bạn
-  include: [
-    // ... các include hiện có của bạn
-    ".intlayer/**/*.ts", // Bao gồm các kiểu được tạo tự động
-  ],
-}
 ```
 
----
+```tsx fileName="src/routes/{-$locale}/route.tsx"
+
+```
+
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+
+```
 
 </Step>
 
@@ -881,24 +1089,11 @@ Nếu bạn có một cơ sở mã hiện có, việc chuyển đổi hàng ngh
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { type IntlayerConfig } from "intlayer";
 
-const config: IntlayerConfig = {
-  // ... Phần còn lại của cấu hình
-  compiler: {
-    /**
-     * Cho biết trình biên dịch có nên được bật hay không.
-     */
-    enabled: true,
-
     /**
      * Xác định đường dẫn các tệp đầu ra
      */
     output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
-    /**
-     * Cho biết các thành phần có nên được lưu sau khi chuyển đổi hay không. Bằng cách đó, trình biên dịch có thể được chạy chỉ một lần để chuyển đổi ứng dụng, sau đó có thể được gỡ bỏ.
-     */
-    saveComponents: false,
-
     /**
      * Tiền tố khóa từ điển
      */
@@ -915,106 +1110,156 @@ export default config;
 Chạy trình trích xuất để chuyển đổi các thành phần và trích xuất nội dung
 
 ```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='Trình biên dịch Babel'>
+</Tabs>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+---
 
-Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
+I'm ready to audit and translate the Vietnamese content. Please provide **BLOCK 3 of 4** in English (en) as the reference, followed by **BLOCK 3 of 4** in Vietnamese (vi) that needs to be reviewed and updated.
 
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+I will then:
+1. Compare the Vietnamese version against the English source
+2. Insert any missing content
+3. Fix spelling, grammar, and Markdown errors
+4. Keep code blocks in their original language with translated comments
+5. Return the complete, updated Vietnamese file content between `` and `` markers
+
+Waiting for your content blocks.---
+
+bun run build # Or bun run dev
+import { localeFlatMap } from "intlayer";
+// ... các import khác
+
+export const pathList = ["", "/about", "/404"];
+
+const localizedPages = localeFlatMap(({ urlPrefix }) =>
+  pathList.map((path) => ({
+    path: `${urlPrefix}${path}`,
+    prerender: {
+      enabled: true,
+    },
+  }))
+);
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
+    // ... các plugin khác
+    tanstackStart({
+      // ... cấu hình khác
+      sitemap: {
+        enabled: false,
+      },
+      prerender: {
+        enabled: true,
+        crawlLinks: false,
+        concurrency: 10,
+      },
+      pages: localizedPages,
+    }),
   ],
 });
 ```
 
-```bash packageManager="npm"
-npm run build # Hoặc npm run dev
-```
+Sau đó, tạo một route `src/routes/sitemap[.]xml.ts` sử dụng hàm `generateSitemap`:
 
-```bash packageManager="pnpm"
-pnpm run build # Or pnpm run dev
-```
+````typescript fileName="src/routes/sitemap[.]xml.ts"
 
-```bash packageManager="yarn"
-yarn build # Or yarn dev
-```
+---
 
-```bash packageManager="bun"
-bun run build # Or bun run dev
-```
+</Step>
 
- </Tab>
-</Tabs>
+<Step number={17} title="Cấu hình TypeScript">
 
----
+Tôi sẵn sàng để kiểm tra và cập nhật bản dịch tiếng Việt. Tuy nhiên, tôi chưa nhận được nội dung cần kiểm tra.
 
-</Step>
+Vui lòng cung cấp:
+
+1. **BLOCK 4 of 4** - Nội dung hiện tại bằng tiếng Việt (vi) cần được kiểm tra
+2. Nếu cần thiết, vui lòng cung cấp lại **BLOCK 4 of 4** - Nội dung tham chiếu bằng tiếng Anh (en)
+
+Vui lòng gửi nội dung để tôi tiếp tục.---
+
+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 }
+        );
 
-</Steps>
+        return new Response(sitemap, {
+          headers: { "Content-Type": "application/xml" },
+        });
+      },
+    },
+  },
+});
+{
+  // ... những cấu hình hiện tại của bạn
+  include: [
+    // ... những include hiện tại của bạn
+    ".intlayer/**/*.ts", // Bao gồm các kiểu được tự động tạo
+  ],
+}
 
 ### Cấu hình Git
 
-Khuyến nghị bạn nên bỏ qua các file được tạo bởi Intlayer. Điều này giúp bạn tránh việc commit chúng vào kho Git của mình.
+Bạn nên bỏ qua các tệp được tạo bởi Intlayer. Điều này cho phép bạn tránh commit chúng vào kho lưu trữ Git của mình.
 
-Để làm điều này, bạn có thể thêm các hướng dẫn sau vào file `.gitignore` của bạn:
+Để làm điều này, bạn có thể thêm các hướng dẫn sau vào tệp `.gitignore` của bạn:
 
 ```plaintext fileName=".gitignore"
-# Bỏ qua các file được tạo bởi Intlayer
+# Bỏ qua các tệp được tạo bởi Intlayer
 .intlayer
-```
+````
 
 ---
 
-## Tiện ích mở rộng VS Code
+## VS Code Extension
 
-Để cải thiện trải nghiệm phát triển với Intlayer, bạn có thể cài đặt **Tiện ích mở rộng Intlayer cho VS Code** chính thức.
+Để cải thiện trải nghiệm phát triển của bạn với Intlayer, bạn có thể cài đặt **Intlayer VS Code Extension** chính thức.
 
 [Cài đặt từ VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-Tiện ích mở rộng này cung cấp:
+Extension này cung cấp:
 
-- **Tự động hoàn thành** cho các khóa dịch.
-- **Phát hiện lỗi thời gian thực** cho các bản dịch bị thiếu.
-- **Xem trước nội dung dịch ngay trong dòng**.
-- **Hành động nhanh** để dễ dàng tạo và cập nhật các bản dịch.
+- **Autocompletion** cho các khóa dịch.
+- **Phát hiện lỗi real-time** cho các bản dịch bị thiếu.
+- **Inline previews** của nội dung được dịch.
+- **Quick actions** để dễ dàng tạo và cập nhật các bản dịch.
 
-Để biết thêm chi tiết về cách sử dụng tiện ích mở rộng, hãy tham khảo [tài liệu Tiện ích mở rộng Intlayer cho VS Code](https://intlayer.org/doc/vs-code-extension).
+Để biết thêm chi tiết về cách sử dụng extension, hãy tham khảo [tài liệu Intlayer VS Code Extension](https://intlayer.org/doc/vs-code-extension).
 
 ---
 
-## Đi xa hơn
+## Đi Xa Hơn
 
-Để đi xa hơn, bạn có thể triển khai [trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md) hoặc tách nội dung của bạn ra bên ngoài bằng cách sử dụng [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md).
+Để đi xa hơn, bạn có thể triển khai [trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md) hoặc ngoại hóa nội dung của bạn bằng [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md).
 
 ---
 
-## Tham khảo Tài liệu
+## Tài liệu tham khảo
 
-- [Intlayer Tài liệu](https://intlayer.org)
-- [Tanstack Start Tài liệu](https://reactrouter.com/)
-- [Hook useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useIntlayer.md)
+- [Tài liệu Intlayer](https://intlayer.org)
+- [Tài liệu Tanstack Start](https://reactrouter.com/)
+- [useIntlayer hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useIntlayer.md)
 - [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useLocale.md)
-- [Khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md)
-- [Cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md)
+- [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md)
+- [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md)