@intlayer/docs 9.5.5 → 9.5.7

package/blog/vi/i18next_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "i18next vs Intlayer: Đo kiểm và So sánh chi tiết năm 2026"
 description: "Đo lường react-i18next và next-i18next so với Intlayer trên Next.js và TanStack Start. Kích thước bundle, rò rỉ nội dung, tốc độ phản hồi khi chuyển ngôn ngữ và trải nghiệm lập trình viên."
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # i18next VS Intlayer | Đo kiểm đa ngôn ngữ (i18n) cho React & Next.js
 
+![i18next VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `i18next` là framework i18n phổ biến nhất trong hệ sinh thái JavaScript. Thông qua `react-i18next` và `next-i18next`, nó đang vận hành phần lớn các ứng dụng React và Next.js. Intlayer là một giải pháp thay thế hiện đại dựa trên trình biên dịch và cô lập phạm vi theo từng component.
 
 Bài viết này so sánh hai giải pháp dựa trên số liệu đo lường thực tế thay vì danh sách tính năng đơn thuần. Các số liệu được trích xuất từ [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) - một bộ đo lường nguồn mở xây dựng cùng một ứng dụng mẫu trên từng thư viện và ghi nhận chính xác những gì trình duyệt tải về.
@@ -99,6 +101,10 @@ Các chỉ số đo lường:
 
 ### Kết quả trên Next.js (`next-i18next`)
 
+Chọn các chỉ số và thư viện bạn quan tâm:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Thư viện                               | Chiến lược     | Dung lượng Lib (gz) | JS TB mỗi trang (gz) | Rò rỉ ngôn ngữ | Rò rỉ trang | Kích thước TB Comp (gz) | Phản hồi E2E | Thời gian Hydrate |
 | -------------------------------------- | -------------- | ------------------: | -------------------: | -------------: | ----------: | ----------------------: | -----------: | ----------------: |
 | **base** (không i18n)                  | -              |              0.0 KB |             141.0 KB |           0.0% |        0.0% |                  0.9 KB |      13.4 ms |           11.8 ms |
@@ -119,6 +125,15 @@ Các chỉ số đo lường:
 - **Kích thước từng component**: Một component gọi `useTranslation()` được đóng gói trong khoảng 26 đến 79 KB; trong khi component tương đương dùng `useIntlayer()` chỉ nặng 6.9 KB.
 - **Độ trễ khi hydrate**: Thời gian hydrate tăng vọt lên 27.7 ms ở cấu hình `dynamic` do thực thể i18next cần khởi tạo và nạp backend tại client trước khi React có thể hoàn tất quá trình hydrate.
 
+<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 (`react-i18next`)
 
 Cùng ứng dụng kiểm thử trên nền tảng TanStack Start sử dụng trực tiếp `react-i18next` nhằm loại bỏ các yếu tố can thiệp riêng của Next.js:
@@ -141,8 +156,19 @@ Cùng ứng dụng kiểm thử trên nền tảng TanStack Start sử dụng tr
 - Chế độ `static` của Intlayer đã mặc định đạt **0% rò rỉ trang** vì nó chỉ đóng gói các từ điển được import bởi component của trang đó. Bật `importMode: 'dynamic'` sẽ triệt tiêu hoàn toàn rò rỉ ngôn ngữ.
 - **Kích thước component**: 24-27 KB ở `react-i18next` so với 6-8 KB ở Intlayer. `useTranslation()` luôn gắn chặt từng component với instance i18next toàn cục.
 
+<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).
+
 ## Nguyên nhân của sự chênh lệch: Global Instance 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)
+
 `i18next` được xây dựng từ năm 2012 theo hướng runtime: một instance toàn cục nắm giữ kho tài nguyên, các plugin mở rộng nó và hàm `t()` tìm khóa khi render. Thiết kế này đem lại tính linh hoạt cao nhưng tạo ra gánh nặng lớn về dung lượng:
 
 ```bash
@@ -166,7 +192,13 @@ Cùng ứng dụng kiểm thử trên nền tảng TanStack Start sử dụng tr
                 └── page.tsx     # phải tự biết rằng trang này cần ["common", "about"]
 ```
 
-Instance toàn cục không thể biết trước component sẽ gọi những khóa nào; vì vậy nó buộc phải lưu trữ toàn bộ các namespace được chỉ định nạp. Muốn tối ưu, **bạn** phải chia nhỏ danh mục, **bạn** phải liệt kê các namespace cần thiết cho từng trang, và **bạn** phải duy trì danh sách này khi component di chuyển. Đúng như [ghi chú benchmark](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md) đã chỉ ra: "Vừa duy trì an toàn kiểu dữ liệu vừa quản lý đúng namespace cho từng trang thực sự là một cơn ác mộng".
+Instance toàn cục không thể biết trước component sẽ gọi những khóa nào; vì vậy nó buộc phải lưu trữ toàn bộ các namespace được chỉ định nạp. Muốn tối ưu, **bạn** phải chia nhỏ danh mục, **bạn** phải liệt kê các namespace cần thiết cho từng trang, và **bạn** phải duy trì danh sách này khi component di chuyển.
+
+Chi phí gia tăng đồng thời trên hai trụ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)
+
+Đúng như [ghi chú benchmark](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md) đã chỉ ra: "Vừa duy trì an toàn kiểu dữ liệu vừa quản lý đúng namespace cho từng trang thực sự là một cơn ác mộng".
 
 Intlayer loại bỏ hoàn toàn instance toàn cục. Nội dung được khai báo ngay cạnh component và trình biên dịch sẽ giải quyết cây phụ thuộc vào lúc build:
 
@@ -193,7 +225,8 @@ Intlayer loại bỏ hoàn toàn instance toàn cục. Nội dung được khai
 
 ### Khởi tạo cấu hình
 
-**next-i18next (App Router)**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-i18next" value="i18next">
 
 ```ts fileName="src/app/i18n/server.ts"
 import { createInstance } from "i18next";
@@ -228,7 +261,8 @@ export const initI18next = async (
 
 Bên cạnh đó, bạn phải viết thêm `I18nProvider` ở phía client, khai báo `generateStaticParams` và quản lý mảng `namespaces` trên từng trang.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="intlayer.config.ts"
 import { type IntlayerConfig, Locales } from "intlayer";
@@ -264,9 +298,13 @@ const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
 export default LocaleLayout;
 ```
 
+</Tab>
+</Tabs>
+
 ### Component phía Client
 
-**react-i18next**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="react-i18next" value="i18next">
 
 ```json fileName="src/locales/en/about.json"
 {
@@ -304,7 +342,8 @@ export const Counter = () => {
 
 > Trang hiển thị component này bắt buộc phải nạp namespace `about`, và `t("counter.label")` sẽ chỉ là chuỗi thông thường nếu chưa mở rộng `CustomTypeOptions`.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -345,9 +384,13 @@ export const Counter = () => {
 
 `label` và `increment` đều được kiểm tra kiểu dữ liệu nghiêm ngặt; gõ sai tên sẽ báo lỗi TypeScript ngay lập tức, và nếu thiếu bản dịch tiếng Pháp thì quá trình build sẽ bị dừng lại.
 
+</Tab>
+</Tabs>
+
 ### Component phía Server đồng bộ
 
-**next-i18next**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-i18next" value="i18next">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 type ServerCounterProps = {
@@ -366,7 +409,8 @@ export const ServerCounter = ({ t, locale, count }: ServerCounterProps) => (
 
 Trang cha phải gọi `i18n.getFixedT(locale, "about")` rồi truyền `t` và `locale` xuống dưới dạng props.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 import { useIntlayer } from "next-intlayer/server";
@@ -385,6 +429,9 @@ export const ServerCounter = ({ count }: { count: number }) => {
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## Giữ nguyên API của i18next, nhận ngay hiệu năng của Intlayer
 
 Bạn không cần phải viết lại toàn bộ component để đạt được kết quả benchmark trên. `@intlayer/i18next`, `@intlayer/react-i18next` và `@intlayer/next-i18next` đóng vai trò là các adapter tương thích trực tiếp: các lệnh gọi `useTranslation`, `t()`, `<Trans>`, xử lý số nhiều và ngữ cảnh vẫn hoạt động bình thường, được vận hành bởi các từ điển do trình biên dịch Intlayer cung cấp.
@@ -415,18 +462,85 @@ Xem hướng dẫn chuyển đổi: [i18next](https://intlayer.org/vi/doc/migrat
 
 ## Khi nào nên chọn giải pháp nào?
 
-- **Chọn i18next**: Nếu bạn phụ thuộc chặt chẽ vào hệ sinh thái plugin (bộ nhận diện đặc thù, backend chuyên biệt, ICU, Locize), cần bản địa hóa ở cả ngoài React (Node services, vanilla JS, các framework khác), đội ngũ của bạn đã rất thành thạo, hoặc nền tảng dịch thuật bắt buộc định dạng `locales/{lng}/{ns}.json`. Hãy dành thời gian để quản lý namespace và bản đồ route nếu hiệu năng là ưu tiên hàng đầu.
-- **Chọn Intlayer**: Nếu bạn muốn **nội dung đặt ngay tại component**, **an toàn kiểu dữ liệu TypeScript nghiêm ngặt**, **báo lỗi thiếu bản dịch khi build**, **tự động tree-shaking và lazy loading không tốn công**, chuyển đổi ngôn ngữ tức thì, hỗ trợ component server đồng bộ và các công cụ biên tập tích hợp sẵn (Visual Editor, CMS, dịch thuật AI, máy chủ MCP). Rất thích hợp cho dự án dạng module lớn và Design Systems.
-- **Chọn adapter `@intlayer/*-i18next`**: Nếu bạn đã có ứng dụng chạy i18next và muốn tối ưu hóa kích thước bundle và tốc độ phản hồi ngay lập tức mà không phải refactor mã nguồn.
+<AccordionGroup>
+<Accordion header="Chọn i18next">
+
+Nếu bạn phụ thuộc chặt chẽ vào hệ sinh thái plugin (bộ nhận diện đặc thù, backend chuyên biệt, ICU, Locize), cần bản địa hóa ở cả ngoài React (Node services, vanilla JS, các framework khác), đội ngũ của bạn đã rất thành thạo, hoặc nền tảng dịch thuật bắt buộc định dạng `locales/{lng}/{ns}.json`. Hãy dành thời gian để quản lý namespace và bản đồ route nếu hiệu năng là ưu tiên hàng đầu.
+
+</Accordion>
+<Accordion header="Chọn Intlayer">
+
+Bạn mong muốn **nội dung theo phạm vi component**, **TypeScript nghiêm ngặt**, **phát hiện thiếu khóa trong thời gian build**, **tree-shaking và lazy loading không tốn công sức**, chuyển đổi ngôn ngữ tức thì, 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), [MCP server](https://intlayer.org/vi/doc/mcp-server)). Đặc biệt phù hợp cho các codebase dạng module quy mô lớn và design system.
+
+</Accordion>
+<Accordion header="Chọn adapter @intlayer/*-i18next">
+
+Bạn đã sử dụng i18next và muốn tối ưu dung lượng bundle cùng độ phản hồi mà không cần viết lại component. Các tệp `locales/{lng}/{ns}.json` hiện tại vẫn là nguồn chân lý duy nhất. Được đo lường song song trong [i18next vs @intlayer/i18next](https://intlayer.org/vi/blog/i18next-vs-intlayer-i18next).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ (Câu hỏi thường gặp)
+
+<FAQ>
+
+<Question title="Tại sao i18next lại nặng hơn nhiều so với các thư viện khác?">
+
+Nó được thiết kế như một runtime độc lập với framework: một global instance, một pipeline plugin, một kho lưu trữ tài nguyên, một bộ phân giải khóa. Sự linh hoạt đó được biên dịch vào từng bundle. Một component rỗng chỉ import thư viện đã tốn **19.7 KB gzip** với `next-i18next` so với **5.5 KB** của `next-intlayer`, và chi phí đó phải trả trên mọi trang bất kể nội dung của bạn nặng bao nhiêu.
+
+</Question>
+
+<Question title="Lazy loading với backend có giải quyết được vấn đề không?">
+
+Nó giảm dung lượng byte, nhưng không giải quyết được độ trễ. Chuyển sang `i18next-resources-to-backend` tiết kiệm ~49 KB mỗi trang nhưng lại thêm một round-trip mạng khi chuyển đổi ngôn ngữ: **123 ms** trong cấu hình `dynamic` và **185 ms** trong `scoped-static`, so với **3-4 ms** của Intlayer. Thời gian hydration cũng tăng lên 27.7 ms vì instance phải phân giải backend trước khi React có thể hydrate.
+
+</Question>
+
+<Question title="Tôi có thể đạt 0% rò rỉ nội dung với i18next không?">
+
+Có, với `scoped-dynamic`: một namespace cho mỗi route, một backend tài nguyên và một bảng ánh xạ trang - namespace bạn tự quản lý thủ công. Kích thước trang đạt 163.4 KB trên Next.js, vẫn cao hơn **+22 KB** so với 141.3 KB của Intlayer vốn không cần bất kỳ cấu hình nào. Xem [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/i18next`, `@intlayer/react-i18next` và `@intlayer/next-i18next` giữ nguyên `useTranslation`, `t()`, `<Trans>`, `{{interpolation}}`, các dạng số nhiều `_one` / `_other`, hậu tố ngữ cảnh và `returnObjects`. Chỉ một dòng plugin trong `next.config.ts` hoặc `vite.config.ts`. Chi tiết từng bước trong [hướng dẫn di chuyển next-i18next](https://intlayer.org/vi/doc/migration/next-i18next).
+
+</Question>
+
+<Question title="Điều gì xảy ra với các plugin i18next của tôi?">
+
+Các backend và plugin phát hiện ngôn ngữ vẫn được chấp nhận nhưng ở trạng thái bất hoạt: không còn gì để tải hoặc phát hiện trong thời gian chạy. Việc phát hiện ngôn ngữ trở thành cấu hình định tuyến của Intlayer (tiền tố URL, cookie, header). Nếu ứng dụng của bạn lấy bản dịch từ CMS tại thời điểm yêu cầu, hãy sử dụng [Intlayer CMS](https://intlayer.org/vi/doc/concept/cms) hoặc lệnh `intlayer pull` / `push` thay thế.
+
+</Question>
+
+</FAQ>
 
 ## Các bài so sánh liên quan
 
-- [next-intl vs Intlayer](https://intlayer.org/vi/blog/next-intl-vs-intlayer) (cùng benchmark)
-- [Lingui vs Intlayer](https://intlayer.org/vi/blog/lingui-vs-intlayer) (cùng benchmark)
-- [vue-i18n vs Intlayer benchmark](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-benchmark) (cùng benchmark)
+Cùng benchmark, các thư viện khác:
+
+- [next-intl vs Intlayer](https://intlayer.org/vi/blog/next-intl-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)
 - [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ề i18next:
+
+- [i18next vs @intlayer/i18next](https://intlayer.org/vi/blog/i18next-vs-intlayer-i18next), đo lường adapter trên cùng một ứng dụng
 - [i18next có bị lỗi thời không?](https://intlayer.org/vi/blog/is-i18next-outdated)
+- [Sử dụng Intlayer với i18next](https://intlayer.org/vi/blog/intlayer-with-i18next) và [với react-i18next](https://intlayer.org/vi/blog/intlayer-with-react-i18next)
+- [Cách quốc tế hóa ứng dụng Next.js với next-i18next](https://intlayer.org/vi/blog/nextjs-internationalization-using-next-i18next)
+
+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: [i18next](https://intlayer.org/vi/doc/compatibility/i18next), [react-i18next](https://intlayer.org/vi/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/vi/doc/compatibility/next-i18next)
+- Hướng dẫn di chuyển: [i18next](https://intlayer.org/vi/doc/migration/i18next), [react-i18next](https://intlayer.org/vi/doc/migration/react-i18next), [next-i18next](https://intlayer.org/vi/doc/migration/next-i18next)
+- [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)
+- [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)
 
 ## Lượt gắn sao trên GitHub
 

package/blog/vi/lingui_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "Lingui vs Intlayer: Điểm chuẩn & So sánh 2026"
 description: "Hai thư viện i18n dựa trên trình biên dịch được đo lường trên Next.js và TanStack Start. Kích thước bundle, rò rỉ nội dung, kích thước component, quá trình hydrate, độ phản hồi chuyển đổi ngôn ngữ và trải nghiệm lập trình viên."
 keywords:
@@ -24,6 +24,8 @@ author: aymericzip
 
 # Lingui VS Intlayer | Điểm chuẩn quốc tế hóa (i18n) trên React & Next.js
 
+![JavaScript i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 Lingui và Intlayer là hai thư viện trong bài đánh giá điểm chuẩn này dựa trên một **trình biên dịch (compiler)** thay vì một runtime thuần túy. Lingui trích xuất các thông điệp từ macro trong thời gian build và biên dịch các danh mục theo từng ngôn ngữ. Intlayer biên dịch các từ điển theo từng component và thực hiện tree-shake chúng theo từng ngôn ngữ. Về mặt lý thuyết, chúng phải rất gần nhau. Các con số cho thấy chúng bắt đầu phân kỳ ở đâu.
 
 Dữ liệu được lấy từ [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), một bộ công cụ 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.
@@ -96,6 +98,10 @@ Intlayer không có biến thể "scoped": trình biên dịch tự động gi
 
 ### Kết quả trên Next.js
 
+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 |
 | --------------------- | -------------- | ------------------: | ---------------: | -------------: | ----------: | ----------------: | --------------: | ------: |
 | **base** (không i18n) | -              |              0.0 KB |         141.0 KB |           0.0% |        0.0% |            0.9 KB |         13.4 ms | 11.8 ms |
@@ -114,6 +120,15 @@ Intlayer không có biến thể "scoped": trình biên dịch tự động gi
 - **Dự phòng ngôn ngữ nguồn bị rò rỉ.** Ngay cả trong các thiết lập tối ưu hóa, **3-15% chuỗi `en` vẫn bị đưa vào các trang `fr`**. Macro của Lingui giữ lại thông điệp nguồn như một phương án dự phòng, do đó nó nằm trong bundle bên cạnh bản dịch. Intlayer giải quyết các dự phòng tại thời gian build và chỉ gửi đúng ngôn ngữ đang hoạt động.
 - **Kích thước component bùng nổ trong `scoped-dynamic`.** Mỗi component được biên dịch riêng lẻ đạt trung bình **152.6 KB**, vì danh mục của mọi route đều có thể truy cập được từ component import nó. Component tương tự sử dụng `useIntlayer()` chỉ đạt trung bình **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
 
 | 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 |
@@ -135,8 +150,19 @@ Intlayer không có biến thể "scoped": trình biên dịch tự động gi
 - **Hàng `static` của Intlayer vốn đã có 0% rò rỉ trang** vì chỉ các từ điển được import bởi các component trên trang mới được đóng gói. Một dòng cấu hình (`importMode: 'dynamic'`) cũng loại bỏ luôn tình trạng rò rỉ ngôn ngữ.
 - **`@intlayer/lingui`** giữ nguyên cú pháp macro của Lingui và phân phối từ các từ điển Intlayer. Nó chấp nhận hy sinh một phần dung lượng trang (137 KB, do runtime của macro vẫn tồn tại) để đổi lấy component nhỏ hơn (12.8 KB) và quá trình hydrate nhanh hơn Lingui gốc. Đây là một bước chuyển đổi dần, không phải đích đến cuối cùng.
 
+<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ó khoảng cách? Hai trình biên dịch, hai đơn vị xử lý
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Cả hai thư viện đều thực hiện biên dịch. Sự khác biệt nằm ở chỗ chúng **biên dịch cái gì**.
 
 **Lingui biên dịch các danh mục.** Macro trong mã nguồn của bạn được trích xuất vào một tệp `.po` cho mỗi ngôn ngữ, sau đó được biên dịch thành một module JS cho mỗi ngôn ngữ. Đơn vị xử lý là **ngôn ngữ**. Việc chia nhỏ hơn nữa, theo từng route hoặc theo từng component, đồng nghĩa với việc tạo nhiều danh mục, cấu hình `lingui.config.ts` để trích xuất từng danh mục từ các tập tin khác nhau, và tải đúng danh mục trên mỗi route. Phiên bản `I18n` runtime là biến toàn cục; mọi lệnh gọi `useLingui()` đều đăng ký component với nó.
@@ -176,7 +202,9 @@ Cả hai thư viện đều thực hiện biên dịch. Sự khác biệt nằm
             └── about.content.ts
 ```
 
-Đó là lý do tại sao mẫu `scoped-dynamic` là kết quả build tự động của Intlayer nhưng lại là một dự án cấu hình thủ công đầy gian nan đối với Lingui.
+Đó là lý do tại sao mẫu `scoped-dynamic` là kết quả build tự động của Intlayer nhưng lại là một dự án cấu hình thủ công đầy gian nan đối với Lingui. Khoảng cách nới rộng theo cả hai chiều cùng lúc: số trang và số ngôn ngữ:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 > Để có được các số liệu của hàng `dynamic`, hãy đặt `dictionary.importMode: 'dynamic'` trong `intlayer.config.ts`. Xem thêm [tài liệu tối ưu hóa bundle](https://intlayer.org/vi/doc/concept/bundle-optimization).
 
@@ -184,7 +212,8 @@ Cả hai thư viện đều thực hiện biên dịch. Sự khác biệt nằm
 
 ### Cài đặt
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```ts fileName="lingui.config.ts"
 import { defineConfig } from "@lingui/cli";
@@ -215,7 +244,8 @@ export const loadCatalog = async (locale: string) => {
 
 Sau đó thêm `@lingui/babel-plugin-lingui-macro` (hoặc `@lingui/swc-plugin`) vào bundler, chạy `lingui extract` sau khi sửa đổi mã nguồn, chạy `lingui compile` trước khi build và bọc cây component trong `<I18nProvider i18n={i18n}>`.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="intlayer.config.ts"
 import { type IntlayerConfig, Locales } from "intlayer";
@@ -232,9 +262,12 @@ export default config;
 
 Thêm `intlayer()` vào `vite.config.ts` (hoặc `withIntlayer()` vào `next.config.ts`) và bọc cây ứng dụng trong `<IntlayerProvider>`. Không cần bước trích xuất hay biên dịch riêng biệt: từ điển được xây dựng tự động khi bundler chạy.
 
+</Tab>
+</Tabs>
 ### Component
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```tsx fileName="src/components/Counter.tsx"
 import { useState } from "react";
@@ -258,7 +291,8 @@ export const Counter = () => {
 
 Văn bản tiếng Anh nằm trực tiếp trong component; văn bản tiếng Pháp nằm trong `src/locales/fr/messages.po` dưới dạng một ID đã được băm, sau khi chạy `lingui extract`. Nếu quên chạy lệnh hoặc quên `compile`, ứng dụng sẽ lặng lẽ quay về tiếng Anh.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -297,11 +331,14 @@ export const Counter = () => {
 
 Cả hai ngôn ngữ đều nằm trong cùng một tệp ngay cạnh component. Việc thiếu giá trị `fr` sẽ gây ra lỗi khi build, và sai key sẽ báo lỗi TypeScript ngay lập tức.
 
+</Tab>
+</Tabs>
 ### Bên ngoài các component
 
 Metadata, loaders, các hàm server: bất kỳ nơi nào không có cây React.
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```ts fileName="src/routes/$locale/about.tsx"
 import { setupI18n } from "@lingui/core";
@@ -324,7 +361,8 @@ export const loader = async ({ params }: { params: { locale: string } }) => {
 
 Cần tạo phiên bản `I18n` mới cho mỗi lần gọi, tự tay tải đúng danh mục và dùng `msg` + `i18n._()` thay vì `t`. Như ghi nhận từ [báo cáo điểm chuẩn](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md), việc xác định khi nào dùng `t`, `` t` ` ``, `i18n.t()`, `msg` hay `<Trans>` không hề dễ đoán.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/routes/$locale/about.tsx"
 import { getIntlayer } from "intlayer";
@@ -336,6 +374,9 @@ export const loader = async ({ params }: { params: { locale: string } }) => {
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## Giữ lại macro Lingui, tận dụng từ điển Intlayer
 
 `@intlayer/lingui` là một adapter tương thích trực tiếp dành cho `@lingui/core` và `@lingui/react`. Các macro tiếp tục được biên dịch như trước; các lệnh gọi `i18n._()` trong runtime mà chúng biên dịch thành sẽ được cung cấp từ các từ điển Intlayer, với plugin đồng bộ `.po` giữ cho các danh mục hiện tại của bạn đóng vai trò là nguồn dữ liệu chuẩn. Các mẫu số nhiều và lựa chọn ICU hiển thị hoàn toàn tương tự.
@@ -353,16 +394,82 @@ Giữ `@lingui/babel-plugin-lingui-macro` / `@lingui/swc-plugin` chạy trước
 
 ## Khi nào nên chọn thư viện nào?
 
-- **Chọn Lingui** nếu bạn muốn **ICU MessageFormat** với các macro được định kiểu, người dịch của bạn làm việc với tệp **`.po`** trong quy trình TMS sẵn có, bạn thích viết chuỗi nguồn inline ngay trong JSX và đội ngũ của bạn thành thạo quy trình trích xuất, biên dịch và chia nhỏ danh mục. Lượng JS trên mỗi trang rất cạnh tranh sau khi thiết lập tải lười.
-- **Chọn Intlayer** nếu bạn muốn **nội dung theo phạm vi component**, **TypeScript nghiêm ngặt**, **phát hiện thiếu bản dịch khi build**, **tự động tree-shaking và tải lười mà không cần cấu hình**, component siêu nhẹ, hydrate nhanh chóng, chuyển đổi ngôn ngữ tức thì và bộ công cụ biên tập tích hợp sẵn (Visual Editor, CMS, dịch thuật AI, máy chủ MCP). Đặc biệt phù hợp cho các codebase dạng module và hệ thống thiết kế lớn.
-- **Chọn `@intlayer/lingui`** nếu bạn đang sử dụng Lingui và muốn chuyển dần sang từ điển Intlayer mà không phải sửa đổi các macro hiện có.
+<AccordionGroup>
+<Accordion header="Chọn Lingui">
+
+Bạn muốn **ICU MessageFormat** với các macro có kiểu dữ liệu, dịch giả của bạn làm việc với tệp **`.po`** qua quy trình TMS hiện có, bạn thích viết trực tiếp chuỗi nguồn trong JSX và nhóm của bạn thoải mái quản lý quy trình trích xuất / biên dịch / chia nhỏ danh mục. JS trên mỗi trang của nó rất cạnh tranh khi đã thiết lập lazy loading.
+
+</Accordion>
+<Accordion header="Chọn Intlayer">
+
+Bạn muốn **nội dung có phạm vi theo component**, **TypeScript chặt chẽ**, **báo lỗi thiếu khóa ngay khi build**, **tree-shaking và lazy loading không tốn công sức**, component nhỏ gọn, hydrate nhanh, chuyển đổi ngôn ngữ tức thì và các công cụ biên tập tích hợp ([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à hệ thống thiết kế.
+
+</Accordion>
+<Accordion header="Chọn @intlayer/lingui">
+
+Bạn đang dùng Lingui và muốn chuyển dần sang từ điển của Intlayer mà không cần chỉnh sửa macro. Các danh mục `.po` của bạn vẫn là nguồn chân lý duy nhất thông qua [plugin đồng bộ hóa PO](https://intlayer.org/vi/doc/compatibility/lingui). Được đo lường cạnh nhau trong [Lingui vs @intlayer/lingui](https://intlayer.org/vi/blog/lingui-vs-intlayer-lingui).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Lingui cũng biên dịch. Tại sao đầu ra lại khác biệt đến vậy?">
+
+Bởi vì đơn vị biên dịch khác nhau. Lingui biên dịch **một danh mục cho mỗi ngôn ngữ**: mọi thứ dưới cấp độ đó (danh mục theo route, lazy loading, loại bỏ fallback khỏi bundle) đều cần cấu hình thủ công. Intlayer biên dịch **một từ điển cho mỗi component**, do đó phạm vi theo route là kết quả tự nhiên của quá trình build. Đó là lý do component Lingui khi biên dịch độc lập nặng 58-153 KB so với 6-8 KB của Intlayer.
+
+</Question>
+
+<Question title="Tại sao rò rỉ ngôn ngữ không bao giờ đạt 0% với Lingui?">
+
+Macro giữ lại thông điệp nguồn như một giải pháp dự phòng (fallback) lúc runtime, vì vậy chuỗi tiếng Anh được gửi kèm cùng với bản dịch. Benchmark ghi nhận **3-15% chuỗi `en` nằm trong các trang `fr`** ở mọi cấu hình tối ưu. Intlayer giải quyết fallback ngay khi build và chỉ phân phối ngôn ngữ đang hoạt động.
+
+</Question>
+
+<Question title="JavaScript mỗi trang của Lingui có thực sự cạnh tranh?">
+
+Có, và trên TanStack Start nó thắng sít sao: 115.2 KB ở chế độ `dynamic` so với 118.6 KB của Intlayer. Các danh mục được biên dịch với mã ID băm rất nhỏ gọn. Nhưng chi phí phát sinh ở điểm khác: hydrate mất 28-34 ms so với 11-14 ms, và chuyển đổi ngôn ngữ mất **42 ms** trong thiết lập `scoped-dynamic`.
+
+</Question>
+
+<Question title="Tôi có phải từ bỏ macro để chuyển đổi không?">
+
+Không. `@intlayer/lingui` giữ nguyên cách biên dịch `` t`...` ``, `<Trans>`, `msg`, `plural`, `select` và `selectOrdinal`; chỉ có nguồn giải quyết của `i18n._()` thay đổi. Tiếp tục giữ `@lingui/babel-plugin-lingui-macro` hoặc `@lingui/swc-plugin` trong bản build. Xem [tài liệu tương thích Lingui](https://intlayer.org/vi/doc/compatibility/lingui).
+
+</Question>
+
+<Question title="Còn các bước trích xuất và biên dịch thì sao?">
+
+Chúng được giữ lại cho macro và biến mất đối với nội dung riêng của Intlayer. Các từ điển `.content.ts` được tạo tự động khi bundler chạy mà không cần lệnh CLI riêng, và [`intlayer test`](https://intlayer.org/vi/doc/concept/cli) sẽ làm dừng CI nếu thiếu khóa thay vì lặng lẽ quay lại chuỗi nguồn.
+
+</Question>
+
+</FAQ>
 
 ## So sánh liên quan
 
-- [next-intl vs Intlayer](https://intlayer.org/vi/blog/next-intl-vs-intlayer) (cùng bài đánh giá)
-- [i18next vs Intlayer](https://intlayer.org/vi/blog/i18next-vs-intlayer) (cùng bài đánh giá)
-- [Điểm chuẩn vue-i18n vs Intlayer](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-benchmark) (cùng bài đánh giá)
-- [Trình biên dịch vs i18n khai báo](https://intlayer.org/vi/blog/compiler-vs-declarative-i18n)
+Cùng benchmark, các thư viện khác:
+
+- [next-intl vs Intlayer](https://intlayer.org/vi/blog/next-intl-vs-intlayer)
+- [i18next vs Intlayer](https://intlayer.org/vi/blog/i18next-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)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/vi/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+Tìm hiểu thêm:
+
+- [Lingui vs @intlayer/lingui](https://intlayer.org/vi/blog/lingui-vs-intlayer-lingui), adapter được đo lường trên cùng một ứng dụng
+- [Compiler-driven vs declarative i18n](https://intlayer.org/vi/blog/compiler-vs-declarative-i18n)
+- [Per-component vs centralized i18n](https://intlayer.org/vi/blog/per-component-vs-centralized-i18n)
+- [ICU message format explained](https://intlayer.org/vi/blog/icu-message-format)
+
+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)
+- [Compat adapter: Lingui](https://intlayer.org/vi/doc/compatibility/lingui)
+- [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)
 
 ## Ngôi sao GitHub