@intlayer/docs 9.5.6 → 9.5.8

package/blog/vi/next-intl_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "next-intl vs Intlayer: Điểm chuẩn & So sánh 2026"
 description: "So sánh chi tiết giữa next-intl và Intlayer trên Next.js App Router và TanStack Start. Kích thước bundle, rò rỉ nội dung, kích thước component, hydrate và trải nghiệm lập trình viên."
 keywords:
@@ -22,15 +22,15 @@ author: aymericzip
 
 # next-intl VS Intlayer | Điểm chuẩn quốc tế hóa (i18n) trên React & Next.js
 
-`next-intl` là lựa chọn mặc định cho i18n trên Next.js App Router hiện nay: tích hợp chặt chẽ với định tuyến, hỗ trợ đầy đủ ICU MessageFormat, và trải nghiệm lập trình quen thuộc với bất kỳ ai từng sử dụng các hệ thống i18n truyền thống.
+![next-intl VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
 
-`Intlayer` tiếp cận vấn đề theo một hướng hoàn toàn mới: không có từ điển tập trung, không cần khớp nối thủ công giữa namespace và route. Nội dung được khai báo ngay cạnh từng component, và trình biên dịch tại thời điểm build sẽ chỉ đóng gói đúng những gì trang đó thực sự cần.
+`next-intl` là thư viện i18n phổ biến nhất cho Next.js. Intlayer là một giải pháp thay thế dựa trên trình biên dịch, có phạm vi theo component. Cả hai đều bản địa hóa ứng dụng App Router. Câu hỏi là chi phí thực tế của mỗi thư viện sau khi ứng dụng được xây dựng.
 
-Bài viết này so sánh cả hai thư viện dựa trên dữ liệu từ [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), một bộ kiểm thử mã nguồn mở xây dựng cùng một ứng dụng với mỗi thư viện và ghi lại những gì trình duyệt thực sự tải xuống và thực thi.
+Bài viết này không phải là hướng dẫn. Đây là một so sánh được hỗ trợ bởi các số liệu từ [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), một bộ benchmark mã nguồn mở xây dựng cùng một ứng dụng với mỗi thư viện và đo lường những gì trình duyệt thực sự tải xuống và thực thi.
 
 <TOC/>
 
-> **Tóm tắt (tl;dr)**: `next-intl` làm tăng ít nhất **+12.6 KB gzip** trên mỗi trang chỉ riêng cho runtime của nó, và làm rò rỉ **~90% chuỗi ký tự của các trang khác** trong các cấu hình tiêu chuẩn (`static` và `dynamic`). Để loại bỏ sự rò rỉ đó, lập trình viên phải chia nhỏ danh mục thành các namespace và chọn thủ công cho từng trang. Ngược lại, trình biên dịch của `Intlayer` đảm bảo **0% rò rỉ**, component **nhỏ hơn gấp 3 lần**, và chỉ tốn thêm **+0.3 KB** so với ứng dụng gốc mà không cần cấu hình phức tạp.
+> **tl;dr**: Trên cùng một ứng dụng Next.js, `next-intl` tăng thêm **+12.6 KB gzip** JavaScript trên mỗi trang, so với **+0.3 KB** của Intlayer. Nếu không tối ưu thêm, `next-intl` gửi kèm **~90% chuỗi ký tự của các trang khác** trên mỗi trang. Đạt mức rò rỉ 0% với `next-intl` yêu cầu phân chia namespace và sử dụng `pick(messages, [...])` trên từng trang. Intlayer đạt 0% theo mặc định vì trình biên dịch phân tách nội dung theo từng component. Nếu bạn muốn giữ API của `next-intl` nhưng nhận đầu ra của Intlayer, adapter `@intlayer/next-intl` đo được **147.5 KB** mỗi trang so với **153.6 KB** của bản gốc.
 
 ## Tóm lược
 
@@ -89,6 +89,10 @@ Bộ công cụ ghi lại:
 
 ### Kết quả trên Next.js (App Router)
 
+Chọn các chỉ số và thư viện mà bạn quan tâm:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Thư viện                            | Chiến lược     | Kích thước Lib (gz) | JS trang TB (gz) | Rò rỉ ngôn ngữ | Rò rỉ trang | TB component (gz) | Độ phản hồi E2E | Hydrate |
 | ----------------------------------- | -------------- | ------------------: | ---------------: | -------------: | ----------: | ----------------: | --------------: | ------: |
 | **Ứng dụng gốc** (không i18n)       | -              |              0.0 KB |         141.0 KB |           0.0% |        0.0% |            0.9 KB |         13.4 ms | 11.8 ms |
@@ -107,8 +111,19 @@ Bộ công cụ ghi lại:
 - **Rò rỉ nội dung.** Trong các cấu hình phổ biến (`static` và `dynamic`), `next-intl` gửi **~90% chuỗi của các trang khác** trên mỗi trang vì toàn bộ tệp `en.json` được đưa vào client provider. Để đạt mức 0% đòi hỏi phải chia tách thủ công rất tỉ mỉ, trong khi Intlayer đạt được điều này mặc định.
 - **Kích thước component.** Một component gọi `useTranslations()` có dung lượng trung bình 21.8 KB; cùng component đó với `useIntlayer()` chỉ nặng 6.9 KB.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Bảng đầy đủ, từng thư viện và từng chiến lược, trong [báo cáo benchmark Next.js](https://intlayer.org/vi/doc/benchmark/nextjs).
+
 ### Kết quả trên TanStack Start (`use-intl`)
 
+`use-intl` là lõi độc lập với framework của `next-intl`. Cùng API, cùng định dạng tin nhắn. So sánh nó với `intlayer` trên TanStack Start sẽ loại bỏ các phần đặc thù của Next.js khỏi phép so sánh.
+
 | Thư viện                           | Chiến lược     | Kích thước Lib (gz) | JS trang TB (gz) | Rò rỉ ngôn ngữ | Rò rỉ trang | TB component (gz) | Độ phản hồi E2E |
 | ---------------------------------- | -------------- | ------------------: | ---------------: | -------------: | ----------: | ----------------: | --------------: |
 | **Ứng dụng gốc** (không i18n)      | -              |              0.0 KB |         111.0 KB |           0.0% |        0.0% |            0.7 KB |          8.1 ms |
@@ -127,8 +142,19 @@ Bộ công cụ ghi lại:
 - Sự khác biệt về mặt kiến trúc thể hiện rất rõ ở **kích thước component**: 76-87 KB với `use-intl` so với 6-8 KB với Intlayer.
 - **Chuyển đổi ngôn ngữ** nhanh hơn từ 2 đến 4 lần với Intlayer (3 ms so với 7-21 ms).
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Bảng đầy đủ trong [báo cáo benchmark TanStack Start](https://intlayer.org/vi/doc/benchmark/tanstack).
+
 ## Tại sao lại có sự khác biệt? Danh mục tập trung vs từ điển biên dịch
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 `next-intl` tuân theo mô hình cổ điển: một tệp JSON cho mỗi ngôn ngữ, được nạp trong `getRequestConfig`, chuyển vào `NextIntlClientProvider` và đọc qua cú pháp `t("namespace.key")`.
 
 ```bash
@@ -150,6 +176,10 @@ Bộ công cụ ghi lại:
 
 Runtime không thể biết trước những key nào sẽ được trang sử dụng, vì vậy việc gửi toàn bộ danh mục là giải pháp an toàn duy nhất.
 
+Chi phí của việc không đạt được điều đó tăng lên trên hai trục cùng một lúc, số trang và ngôn ngữ:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 Intlayer đảo ngược hoàn toàn quy trình này. Nội dung được khai báo trực tiếp cạnh component:
 
 ```bash
@@ -177,7 +207,8 @@ Tại thời điểm build, trình biên dịch nhận biết component nào imp
 
 ### Client component
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```json fileName="messages/en.json"
 {
@@ -188,7 +219,7 @@ Tại thời điểm build, trình biên dịch nhận biết component nào imp
 }
 ```
 
-```tsx fileName="src/components/Counter.tsx"
+```tsx fileName="src/components/ClientCounter.tsx"
 "use client";
 
 import { useState } from "react";
@@ -210,7 +241,10 @@ export const Counter = () => {
 };
 ```
 
-**Intlayer**
+> Hãy nhớ bao gồm namespace `counter` trong các tin nhắn được truyền tới `NextIntlClientProvider` trên mỗi trang hiển thị component này.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -249,11 +283,16 @@ export const Counter = () => {
 };
 ```
 
+Không có gì cần đăng ký trên trang: component tự mang theo nội dung của riêng nó.
+
+</Tab>
+</Tabs>
 ### Component server đồng bộ
 
 Các thành phần giao diện chung (navbar, footer, thẻ) thường là các component server được kết xuất dưới dạng con của component client, do đó chúng không thể là `async`.
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 type ServerCounterProps = {
@@ -269,7 +308,10 @@ export const ServerCounter = ({ t, formattedCount }: ServerCounterProps) => (
 );
 ```
 
-**Intlayer**
+Trang phải gọi `await getTranslations("counter")` và `await getFormatter()`, sau đó truyền kết quả xuống dưới dạng props. Component không còn độc lập nữa.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 import { useIntlayer } from "next-intlayer/server";
@@ -288,9 +330,12 @@ export const ServerCounter = ({ count }: { count: number }) => {
 };
 ```
 
+</Tab>
+</Tabs>
 ### Metadata
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```tsx fileName="src/app/[locale]/about/page.tsx"
 import type { Metadata } from "next";
@@ -323,7 +368,8 @@ export const generateMetadata = async ({
 };
 ```
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/app/[locale]/about/page.tsx"
 import { getIntlayer, getMultilingualUrls } from "intlayer";
@@ -347,6 +393,9 @@ export const generateMetadata = async ({
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## Giữ lại API next-intl, tận dụng hiệu năng Intlayer
 
 Bạn không cần viết lại toàn bộ component để có được kết quả hiệu năng vượt trội như trên. Gói `@intlayer/next-intl` là một adapter tương thích trực tiếp: nó giữ lại `useTranslations`, `getTranslations`, `useFormatter`, `t.rich()` và các dạng số nhiều ICU, đồng thời phân phối chúng từ các từ điển Intlayer được biên dịch bởi trình biên dịch Intlayer.
@@ -368,17 +417,84 @@ Xem thêm [hướng dẫn chuyển đổi next-intl](https://intlayer.org/vi/doc
 
 ## Khi nào nên chọn thư viện nào?
 
-- **Chọn next-intl** nếu bạn muốn tiêu chuẩn phổ biến trong cộng đồng Next.js, phụ thuộc nhiều vào ICU MessageFormat, ứng dụng có quy mô vừa và nhỏ, hoặc đang tích hợp với các nền tảng dịch thuật tập trung (Crowdin, Phrase, Lokalise...).
-- **Chọn Intlayer** nếu bạn muốn **nội dung theo phạm vi component**, **TypeScript nghiêm ngặt**, **báo lỗi thiếu khóa ngay khi build**, **tự động tree-shaking và lazy loading không cần cấu hình**, component server đồng bộ, và bộ công cụ chỉnh sửa tích hợp sẵn (Visual Editor, CMS, dịch thuật AI, máy chủ MCP).
-- **Chọn `@intlayer/next-intl`** nếu bạn đã dùng `next-intl` và muốn tối ưu dung lượng bundle mà không cần viết lại mã nguồn.
+<AccordionGroup>
+<Accordion header="Chọn next-intl">
+
+Bạn muốn tiêu chuẩn của hệ sinh thái cho Next.js, dựa vào ICU MessageFormat, ứng dụng của bạn có quy mô vừa và nhỏ, hoặc bạn tích hợp với nền tảng dịch thuật (Crowdin, Phrase, Lokalise...) yêu cầu JSON tập trung. Hãy dành thời gian để phân chia danh mục thành các namespace và chọn thông điệp bằng `pick()` cho từng trang nếu hiệu năng là yếu tố quan trọng.
+
+</Accordion>
+<Accordion header="Chọn Intlayer">
+
+Bạn muốn **nội dung theo phạm vi component**, **TypeScript chặt chẽ**, **lỗi thiếu khóa trong quá trình build**, **tree-shaking và tải chậm (lazy loading) hoàn toàn tự động**, server component đồng bộ và các công cụ biên tập tích hợp sẵn ([Visual Editor](https://intlayer.org/vi/doc/concept/editor), [CMS](https://intlayer.org/vi/doc/concept/cms), [dịch thuật AI](https://intlayer.org/vi/doc/concept/auto-fill), [máy chủ MCP](https://intlayer.org/vi/doc/mcp-server)). Đặc biệt phù hợp cho các codebase mô-đun lớn và design system.
+
+</Accordion>
+<Accordion header="Chọn @intlayer/next-intl">
+
+Bạn đã sử dụng `next-intl` và muốn tối ưu kích thước bundle mà không cần viết lại toàn bộ mã nguồn. [Adapter tương thích](https://intlayer.org/vi/doc/compatibility/next-intl) giữ nguyên các import và tệp `messages/{locale}.json` của bạn làm nguồn chân lý duy nhất. Được đo lường cạnh nhau trong [next-intl vs @intlayer/next-intl](https://intlayer.org/vi/blog/next-intl-vs-intlayer-next-intl).
+
+</Accordion>
+</AccordionGroup>
+
+## Câu hỏi thường gặp (FAQ)
+
+<FAQ>
+
+<Question title="next-intl có chậm hơn Intlayer không?">
+
+Không phải ở thời gian render. Sự khác biệt nằm ở lượng dữ liệu gửi về trình duyệt: `next-intl` tiêu tốn **+12.6 KB gzip** runtime trên mỗi trang và trong hầu hết các cấu hình phổ biến sẽ gửi ~90% chuỗi ký tự của các trang khác kèm theo mỗi trang. Thời gian chuyển đổi ngôn ngữ và hydration tương đương nhau trên Next.js (15-18 ms); trên TanStack Start, `use-intl` mất 7-21 ms so với 3-4 ms của Intlayer.
+
+</Question>
+
+<Question title="Tôi có thể đạt 0% rò rỉ nội dung với next-intl không?">
+
+Có thể, với cấu hình `scoped-dynamic`: chia `messages/{locale}.json` thành một namespace cho mỗi route, sau đó dùng `pick(messages, [...])` ở mỗi trang và duy trì sự khớp nối đó khi các component thay đổi. Các hàng `scoped-*` trong benchmark chính là phản ánh công việc này. Intlayer đạt 0% mặc định mà không cần làm gì thêm vì compiler tự động giới hạn phạm vi nội dung theo từng component. Xem thêm [tối ưu hóa bundle](https://intlayer.org/vi/doc/concept/bundle-optimization).
+
+</Question>
+
+<Question title="Tôi có phải viết lại các component để di chuyển không?">
+
+Không. `@intlayer/next-intl` giữ nguyên `useTranslations`, `getTranslations`, `useFormatter`, `t.rich()`, số nhiều ICU và các navigation helper, đồng thời phục vụ chúng từ các từ điển đã biên dịch. Chỉ cần một dòng plugin trong `next.config.ts`. Chi tiết từng bước trong [hướng dẫn di chuyển next-intl](https://intlayer.org/vi/doc/migration/next-intl).
+
+</Question>
+
+<Question title="Intlayer có hỗ trợ ICU MessageFormat không?">
+
+Hỗ trợ ICU đang được hoàn thiện trên API gốc. Các adapter tương thích (`@intlayer/next-intl`, `@intlayer/use-intl`) đã hỗ trợ đầy đủ ICU: số nhiều, `select`, `selectordinal`, `#` và `{ts, date, long}` đều đi qua bộ phân giải ICU của Intlayer. Xem thêm [định dạng tin nhắn ICU](https://intlayer.org/vi/blog/icu-message-format).
+
+</Question>
+
+<Question title="Tôi có thể giữ lại các tệp messages/{locale}.json không?">
+
+Có. [Plugin đồng bộ JSON](https://intlayer.org/vi/doc/compatibility/next-intl) sẽ đọc chúng, chia các khóa cấp cao nhất thành từ điển và ghi lại các bản dịch vào chính các tệp đó khi CLI hoặc CMS cập nhật. Quy trình làm việc của đội ngũ dịch thuật hoàn toàn không bị ảnh hưởng.
+
+</Question>
+
+</FAQ>
 
 ## So sánh liên quan
 
-- [i18next vs Intlayer](https://intlayer.org/vi/blog/i18next-vs-intlayer) (cùng bài kiểm tra)
-- [Lingui vs Intlayer](https://intlayer.org/vi/blog/lingui-vs-intlayer) (cùng bài kiểm tra)
-- [Điểm chuẩn vue-i18n vs Intlayer](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-benchmark) (cùng bài kiểm tra)
+Cùng bài benchmark, các thư viện khác:
+
+- [i18next vs Intlayer](https://intlayer.org/vi/blog/i18next-vs-intlayer)
+- [Lingui vs Intlayer](https://intlayer.org/vi/blog/lingui-vs-intlayer)
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-benchmark)
 - [next-i18next vs next-intl vs Intlayer](https://intlayer.org/vi/blog/next-i18next-vs-next-intl-vs-intlayer)
-- [next-intl có lỗi thời không?](https://intlayer.org/vi/blog/is-next-intl-outdated)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/vi/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+Tìm hiểu sâu hơn về next-intl:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/vi/blog/next-intl-vs-intlayer-next-intl), adapter được đo lường trên cùng một ứng dụng
+- [Is next-intl outdated?](https://intlayer.org/vi/blog/is-next-intl-outdated)
+- [Using Intlayer with next-intl](https://intlayer.org/vi/blog/intlayer-with-next-intl)
+- [How to internationalize a Next.js app with next-intl](https://intlayer.org/vi/blog/nextjs-internationalization-using-next-intl)
+
+Tài liệu tham khảo:
+
+- [Báo cáo benchmark Next.js](https://intlayer.org/vi/doc/benchmark/nextjs) và [báo cáo benchmark TanStack Start](https://intlayer.org/vi/doc/benchmark/tanstack)
+- [Adapter tương thích: next-intl](https://intlayer.org/vi/doc/compatibility/next-intl) và [hướng dẫn di chuyển](https://intlayer.org/vi/doc/migration/next-intl)
+- [Tối ưu hóa bundle](https://intlayer.org/vi/doc/concept/bundle-optimization) và [Intlayer compiler](https://intlayer.org/vi/doc/compiler)
+- [i18n theo component vs i18n tập trung](https://intlayer.org/vi/blog/per-component-vs-centralized-i18n)
+- [i18n dựa trên compiler vs khai báo](https://intlayer.org/vi/blog/compiler-vs-declarative-i18n)
 
 ## Ngôi sao GitHub
 

package/blog/vi/vue-i18n_vs_intlayer-vue-i18n.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "vue-i18n vs @intlayer/vue-i18n: API Giống Nhau, Bundle Khác"
 description: Những thay đổi khi một ứng dụng Vue 3 giữ các lệnh gọi vue-i18n của nó nhưng phục vụ chúng qua bộ điều hợp tương thích @intlayer/vue-i18n. JavaScript mỗi trang, kích thước runtime, kích thước thành phần và rò rỉ được đo lường trên cùng một mã Vite + Vue, cộng với những gì bộ điều hợp giữ lại, bỏ qua và không thể thay thế.
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # vue-i18n VS @intlayer/vue-i18n | API Giống Nhau, Bundle Khác
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 `@intlayer/vue-i18n` là một compat adapter: nó expose API của `vue-i18n` (`createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t`, `v-t`, `i18n.global.locale`...) và phục vụ nó từ các dictionaries được biên dịch bởi Intlayer. Các file `.vue` của bạn không thay đổi. Cái mà `t("footer.github")` được bind tới thì có.
 
 Bài viết này đo lường việc thay thế đó trên cùng một ứng dụng Vite + Vue 3, được xây dựng một lần với `vue-i18n` và một lần với adapter. Các con số đến từ [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Để so sánh `vue-i18n` và Intlayer như các thư viện, hãy đọc [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) và [benchmark vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark). Bài này nói về những gì adapter thay đổi khi bạn giữ các component của mình như cũ.
@@ -105,6 +107,10 @@ Cả hai đều được xây dựng trong cấu hình **tĩnh**, cấu hình m
 
 ### Kết quả trên Vite + Vue 3
 
+Chọn số liệu và thư viện mà bạn quan tâm:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
 | Setup                    | Strategy | Lib size (gz) | Lib size (min) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity |  Page load |
 | ------------------------ | -------- | ------------: | -------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | ---------: |
 | **base** (no i18n)       | -        |        0.0 KB |         0.0 KB |          41.3 KB |        0.0% |         - |             1.1 KB |         1.8 ms |    10.8 ms |
@@ -124,11 +130,24 @@ Cả hai đều được xây dựng trong cấu hình **tĩnh**, cấu hình m
 - **Reactivity và page load.** Chuyển đổi locale rẻ tiền cho cả hai (1.5-2.8 ms); hệ thống reactivity của Vue làm cho nó diễn ra một khi các message đã ở trong bộ nhớ. Page load giảm từ 13.6 ms xuống **9.3 ms**, phù hợp với 88 KB JavaScript ít hơn để phân tích.
 - **Về các hàng gốc.** `vue-intlayer` trong lần chạy này đã đóng gói mọi locale ở chế độ `static` và đạt 57.1 KB với runtime 3.9 KB; các từ điển đồng bộ của adapter mang ít chuỗi locale ngoài hơn, do đó con số trên mỗi trang thấp hơn. Runtime gốc vẫn là nhẹ nhất trong ba cái, và mô hình `.content.ts` của nó là nơi các khối `<i18n>` SFC tìm thấy tương đương của chúng.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Bảng đầy đủ, từng thư viện và từng chiến lược, trong [báo cáo benchmark Vue](https://intlayer.org/vi/doc/benchmark/vue).
+
 ## Tại sao các số liệu thay đổi
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Không có gì thay đổi trong `src/components/`, vì vậy những lợi ích đến từ những gì `useI18n` được ràng buộc với.
 
-**Với `vue-i18n`**, binding là global instance. `createI18n({ messages: { en, fr, ... } })` là một import chứa toàn bộ; mọi component gọi `useI18n()` đều có thể truy cập tất cả nó, vì vậy bundler không thể split dưới instance. Tối ưu hóa có nghĩa là _bạn_ phải split `en.json` theo route, gọi `setLocaleMessage()` trong router guard, và giữ route-to-file map chính xác khi components di chuyển.
+**Với `vue-i18n`**, binding là global instance. `createI18n({ messages: { en, fr, ... } })` là một import chứa toàn bộ; mọi component gọi `useI18n()` đều có thể truy cập tất cả nó, vì vậy bundler không thể split dưới instance. Tối ưu hóa có nghĩa là _bạn_ phải split `en.json` theo route, gọi `setLocaleMessage()` trong router guard, và giữ route-to-file map chính xác khi components di chuyển. Sự lãng phí gia tăng trên cả hai trục cùng một lúc, trang và ngôn ngữ:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -258,26 +277,107 @@ export const i18n = createI18n({ locale: "en" });
 
 ## Những giới hạn cần biết trước khi bắt đầu
 
-- **Các khối SFC `<i18n>` không được đọc.** Nếu các tin nhắn của bạn nằm bên trong các component, chúng cần được di chuyển đến các file locale (hoặc đến `.content.ts`, đó là ý tưởng tương tự nhưng có kiểu dữ liệu).
-- **Tải tin nhắn trong thời gian chạy không còn nữa.** `setLocaleMessage()` và `mergeLocaleMessage()` cảnh báo và trả về. Các bản dịch được tìm nạp từ CMS trong thời gian chạy cần Intlayer's CMS hoặc các lệnh `intlayer pull` / `push`.
-- **`messages` là một fallback, không miễn phí.** Giữ lại các import JSON trong `createI18n()` sẽ giữ 75 KB trong bundle. Xóa chúng khi `intlayer test` vượt qua.
-- **Adapter không phải là runtime gốc.** 7.9 KB so với 3.9 KB cho `vue-intlayer`. Khi mọi component đã chuyển sang `useIntlayer`, hãy loại bỏ nó.
+<AccordionGroup>
+<Accordion header="Các khối SFC <i18n> không được đọc">
+
+Nếu các tin nhắn của bạn nằm bên trong các component, chúng cần được chuyển sang các tệp ngôn ngữ hoặc sang `.content.ts`, cùng ý tưởng với các kiểu được tạo tự động.
+
+</Accordion>
+<Accordion header="Tải tin nhắn tại runtime đã bị loại bỏ">
+
+`setLocaleMessage()` và `mergeLocaleMessage()` đưa ra cảnh báo và trả về. Bản dịch được lấy từ CMS tại runtime cần [Intlayer CMS](https://intlayer.org/vi/doc/concept/cms) hoặc các lệnh `intlayer pull` / `push`.
+
+</Accordion>
+<Accordion header="messages là phương án dự phòng, không miễn phí">
+
+Việc giữ các import JSON trong `createI18n()` vẫn giữ 75 KB trong bundle. Hãy xóa chúng khi `intlayer test` thành công.
+
+</Accordion>
+<Accordion header="Adapter không phải là runtime gốc">
+
+7.9 KB so với 3.9 KB của `vue-intlayer`. Khi mọi component đã chuyển sang `useIntlayer`, hãy gỡ bỏ nó.
+
+</Accordion>
+</AccordionGroup>
 
 ## Khi nào sử dụng cái nào?
 
-- **Ở lại trên `vue-i18n`** nếu ứng dụng của bạn phụ thuộc vào các khối SFC `<i18n>`, vào các luồng `setLocaleMessage()` runtime, hoặc nếu 90 KB cho mỗi trang không phải là mối quan tâm cho khán giả của bạn.
-- **Sử dụng `@intlayer/vue-i18n`** nếu bạn đang dùng `vue-i18n` và muốn giảm 88 KB, các component nhỏ hơn 23 lần, 0% page leakage, các key được gõ và kiểm tra CI mà không cần chỉnh sửa tệp `.vue`. Đây là điểm vào cho một codebase `vue-i18n` hiện có.
-- **Đi native (`vue-intlayer`)** cho các dự án mới, hoặc khi adapter đã hoàn thành công việc của nó. Nó có runtime nhẹ nhất (3.9 KB) và mô hình `.content.ts` cho từng component thay thế các khối `<i18n>` bằng nội dung được gõ.
+<AccordionGroup>
+<Accordion header="Ở lại với vue-i18n">
+
+Ứng dụng của bạn phụ thuộc vào các khối SFC `<i18n>`, quy trình `setLocaleMessage()` tại runtime hoặc 90 KB mỗi trang không phải là vấn đề đối với người dùng của bạn.
+
+</Accordion>
+<Accordion header="Sử dụng @intlayer/vue-i18n">
+
+Bạn đang dùng `vue-i18n` và muốn tiết kiệm 88 KB, component nhỏ hơn 23 lần, 0% rò rỉ trang, khóa có định kiểu và kiểm tra CI mà không cần chỉnh sửa tệp `.vue`. Đây là điểm khởi đầu cho codebase `vue-i18n` hiện có.
+
+</Accordion>
+<Accordion header="Chuyển sang native (vue-intlayer)">
+
+Dành cho các dự án mới hoặc khi adapter đã hoàn thành nhiệm vụ. Nó có runtime nhẹ nhất (3.9 KB) và mô hình `.content.ts` cho từng component thay thế các khối `<i18n>` bằng nội dung có định kiểu. Bắt đầu với [Intlayer với Vue](https://intlayer.org/vi/doc/environment/vite-and-vue) hoặc [với Nuxt](https://intlayer.org/vi/doc/environment/nuxt-and-vue).
+
+</Accordion>
+</AccordionGroup>
+
+## Câu hỏi thường gặp
+
+<FAQ>
+
+<Question title="Tôi có phải chỉnh sửa các tệp .vue của mình không?">
+
+Không. Bản build benchmark chỉ thay đổi `vite.config.ts`, `intlayer.config.ts` và một dòng trong `src/i18n.ts`, import `messages`. Mọi vị trí gọi `useI18n()`, `$t`, `v-t` và Options API đều được giữ nguyên.
+
+</Question>
+
+<Question title="Tại sao kích thước component lại nhỏ hơn 23 lần?">
+
+Bởi vì `useI18n()` không còn truy cập vào instance toàn cục. `createI18n({ messages })` chứa tất cả tin nhắn của mọi ngôn ngữ, do đó một component được biên dịch riêng lẻ sẽ kéo theo 196 KB. Với adapter, nó chỉ truy cập từ điển của riêng mình: 8.4 KB.
+
+</Question>
+
+<Question title="Định dạng d() và n() thì sao?">
+
+Được giữ nguyên. Các cấu hình `datetimeFormats` và `numberFormats` được truyền vào `createI18n()` đều được tuân thủ, hỗ trợ bởi API `Intl` gốc. Xem [định dạng ngày, giờ và số](https://intlayer.org/vi/blog/date-time-number-formatting-locales).
+
+</Question>
+
+<Question title="Nó có hoạt động với Nuxt không?">
+
+`@intlayer/vue-i18n` nhắm tới Vite + Vue. Đối với `@nuxtjs/i18n`, hãy sử dụng [adapter tương thích Nuxt i18n](https://intlayer.org/vi/doc/compatibility/nuxtjs-i18n) và xem [Intlayer với Nuxt](https://intlayer.org/vi/doc/environment/nuxt-and-vue) để thiết lập native.
+
+</Question>
+
+<Question title="Tôi có thể di chuyển từng component một không?">
+
+Có. Bất kỳ component nào cũng có thể chuyển từ `useI18n()` sang `useIntlayer("footer")` với tệp nội dung được đặt cùng vị trí. Các từ điển JSON và `.content.ts` cùng tồn tại và hợp nhất.
+
+</Question>
+
+</FAQ>
 
 ## Những so sánh liên quan
 
-- [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) (tính năng và DX)
-- [vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark) (các thư viện, cùng benchmark)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/blog/next-intl-vs-intlayer-next-intl) (cùng chuỗi adapter)
-- [i18next vs @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (cùng chuỗi adapter)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (cùng chuỗi adapter)
-- [Hướng dẫn di chuyển: vue-i18n to Intlayer](https://intlayer.org/doc/migration/vue-i18n)
-- [Tài liệu tham khảo bộ chuyển đổi tương thích: vue-i18n](https://intlayer.org/doc/compatibility/vue-i18n), [Nuxt i18n](https://intlayer.org/doc/compatibility/nuxtjs-i18n)
+Cùng loạt adapter:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/vi/blog/next-intl-vs-intlayer-next-intl)
+- [i18next vs @intlayer/i18next](https://intlayer.org/vi/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/vi/blog/lingui-vs-intlayer-lingui)
+
+Các thư viện được so sánh trực tiếp:
+
+- [vue-i18n vs Intlayer](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer), features and DX
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-benchmark)
+- [Is vue-i18n outdated?](https://intlayer.org/vi/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/vi/blog/how-to-pick-vue-i18n-library)
+
+Tài liệu tham khảo:
+
+- [Compat adapter: vue-i18n](https://intlayer.org/vi/doc/compatibility/vue-i18n) and [Nuxt i18n](https://intlayer.org/vi/doc/compatibility/nuxtjs-i18n)
+- [Hướng dẫn di chuyển: vue-i18n sang Intlayer](https://intlayer.org/vi/doc/migration/vue-i18n)
+- [Báo cáo benchmark Vue](https://intlayer.org/vi/doc/benchmark/vue)
+- [Tối ưu hóa bundle](https://intlayer.org/vi/doc/concept/bundle-optimization) và [trình biên dịch Intlayer](https://intlayer.org/vi/doc/compiler)
+- [Visual Editor](https://intlayer.org/vi/doc/concept/editor), [CMS](https://intlayer.org/vi/doc/concept/cms) và [dịch thuật AI](https://intlayer.org/vi/doc/concept/auto-fill)
 
 ## Kết luận
 
@@ -285,4 +385,4 @@ export const i18n = createI18n({ locale: "en" });
 
 Tất cả dữ liệu thô, các ứng dụng thử nghiệm và các script đều có trong [kho lưu trữ Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Chạy nó bằng chính bạn.
 
-Tham khảo [tài liệu 'Why Intlayer?'](https://intlayer.org/doc/why) để biết thêm chi tiết.
+Tham khảo [tài liệu 'Why Intlayer?'](https://intlayer.org/vi/doc/why) để biết thêm chi tiết.