@intlayer/docs 9.5.6 → 9.5.8

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
 

package/blog/vi/next-intl_vs_intlayer-next-intl.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "next-intl vs @intlayer/next-intl: Cùng API, Bundle Khác Nhau"
 description: Những thay đổi khi các import next-intl của một ứng dụng Next.js được phục vụ bởi compat adapter @intlayer/next-intl. Kích thước bundle, rò rỉ, kích thước component và hydration được đo lường trên cùng một code, cộng với những gì adapter giữ lại, bỏ qua và không thể thay thế.
 keywords:
@@ -26,6 +26,8 @@ author: aymericzip
 
 # next-intl VS @intlayer/next-intl | Cùng API, Bundle Khác Nhau
 
+![next-intl VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `@intlayer/next-intl` là một compat adapter: nó cung cấp API của `next-intl` (`useTranslations`, `getTranslations`, `useLocale`, `t.rich()`, ICU plurals, `NextIntlClientProvider`...) và phục vụ nó từ các từ điển được biên dịch bởi Intlayer. Mã ứng dụng không thay đổi. Bundle thì có.
 
 Bài viết này so sánh hai cái trên cùng một ứng dụng Next.js, được xây dựng một lần với `next-intl` và một lần với adapter. Các con số này đến từ [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), một bộ mã nguồn mở ghi lại những gì trình duyệt thực sự tải xuống. Nếu bạn muốn so sánh `next-intl` vs Intlayer dưới dạng các thư viện, hãy đọc [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer). Cái này là về những gì adapter thay đổi khi bạn giữ nguyên các component của mình.
@@ -109,6 +111,10 @@ Suite [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) xây d
 
 ### 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/>
+
 | Setup                     | Strategy       | Lib size (gz) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity |   Hydration |
 | ------------------------- | -------------- | ------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | ----------: |
 | **base** (no i18n)        | -              |        0.0 KB |         141.0 KB |        0.0% |      0.0% |             0.9 KB |        13.4 ms |     11.8 ms |
@@ -129,6 +135,15 @@ Suite [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) xây d
 - **Hydration nhanh hơn 2 ms** (12.8 vs 14.7 ms): không có message object để deserialize từ RSC payload trước khi React có thể hydrate.
 - **Adapter không phải là native runtime.** `next-intlayer` nằm ở **141.3 KB**, +0.3 KB so với base app, với 5.5 KB runtime. Adapter mang API surface của `next-intl` (`useFormatter`, `t.rich`, ICU resolver) trên top của core của Intlayer, do đó 8.0 KB và +6 KB trên mỗi page. Đó là cây cầu, không phải đích đến.
 
+<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à core framework-agnostic của `next-intl`. Adapter của nó, `@intlayer/use-intl`, tuân theo cùng design với Vite plugin (`@intlayer/use-intl/plugin`).
@@ -152,11 +167,24 @@ Suite [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) xây d
 - **Chuyển đổi locale nhanh hơn.** Các setup `use-intl` được tối ưu hóa mất **13-21 ms** để cập nhật `html[lang]`; adapter mất **4-9 ms**. Ít component hơn được re-render, và không có gì được lấy lại từ một message tree.
 - **`static` giữ lại mọi locale.** Hàng `static` của adapter cho thấy 49.7% rò rỉ locale, giống như native Intlayer ở chế độ `static`: tất cả locale được bundled, chỉ các từ điển của trang được bundled. Một dòng config (`importMode: 'dynamic'`) sẽ loại bỏ nó.
 
+<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 các con số 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ì trong component thay đổi, vì vậy các lợi ích đều đến từ những gì `useTranslations` được liên kết tới.
 
-**Với `next-intl`**, ràng buộc là provider. `NextIntlClientProvider` nhận toàn bộ object `messages` cho locale; mỗi `useTranslations("about")` đọc từ nó. Bundler thấy một component import một hook đọc một context, và không thể biết rằng chỉ có branch `about` được sử dụng. Các routes dưới đây đều chia sẻ cùng một object message, vì vậy cột page-leak đọc ~90% cho đến khi bạn tự chia nhỏ file.
+**Với `next-intl`**, ràng buộc là provider. `NextIntlClientProvider` nhận toàn bộ object `messages` cho locale; mỗi `useTranslations("about")` đọc từ nó. Bundler thấy một component import một hook đọc một context, và không thể biết rằng chỉ có branch `about` được sử dụng. Các routes dưới đây đều chia sẻ cùng một object message, vì vậy cột page-leak đọc ~90% cho đến khi bạn tự chia nhỏ file, và sự lãng phí tăng lên 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)
 
 ```bash
 .
@@ -280,25 +308,106 @@ export default withIntlayer(nextConfig);
 
 ## Những giới hạn cần biết trước khi bạn bắt đầu
 
-- **Routing config chuyển sang `intlayer.config.ts`.** `createNavigation(routing)` và `createMiddleware(routing)` giữ nguyên signature của chúng nhưng bỏ qua argument: locales, default locale và prefix strategy đến từ Intlayer's `routing` config. Nếu bạn sử dụng `next-intl`'s localized `pathnames` (`/about` → `/a-propos`), adapter không interpolate chúng; Intlayer's `routing.rewrite` bao gồm trường hợp đó nhưng đó là một thay đổi riêng biệt.
-- **Namespace-less `useTranslations()` không được bind.** Optimize pass cần một namespace tĩnh để biết dictionary nào cần import. Một bare call vẫn hoạt động thông qua một runtime registry tham chiếu đến mọi dictionary, đó chính xác là sự rò rỉ mà bạn đang cố gắng loại bỏ. Truyền namespace.
-- **Adapter không miễn phí.** 8.0 KB runtime so với 5.5 KB cho `next-intlayer`, và +6-7 KB cho mỗi trang so với native build. Nó chi trả cho bề mặt API của `next-intl`. Nếu bạn đến điểm mà mọi component đã được chuyển sang `useIntlayer`, hãy bỏ adapter.
-- **`messages`, `timeZone`, `now` trên provider bị bỏ qua.** Các formatter được hỗ trợ bởi `Intl` native và chỉ locale ảnh hưởng đến output của chúng; nếu bạn dựa vào một time zone bắt buộc hoặc một `now` cố định cho các ngày ổn định hydration, hãy xử lý nó tại call site.
+<AccordionGroup>
+<Accordion header="Cấu hình định tuyến chuyển sang intlayer.config.ts">
+
+`createNavigation(routing)` và `createMiddleware(routing)` giữ nguyên cú pháp nhưng bỏ qua đối số: ngôn ngữ, ngôn ngữ mặc định và chiến lược tiền tố đều lấy từ cấu hình `routing` của Intlayer. Nếu bạn sử dụng `pathnames` đã bản địa hóa của `next-intl` (`/about` sang `/a-propos`), adapter sẽ không nội suy chúng; `routing.rewrite` của Intlayer hỗ trợ trường hợp này nhưng là một cấu hình riêng.
+
+</Accordion>
+<Accordion header="useTranslations() không có namespace sẽ không được liên kết">
+
+Quá trình tối ưu hóa cần một namespace tĩnh để biết cần import từ điển nào. Một lệnh gọi không tham số vẫn hoạt động thông qua một registry lúc runtime tham chiếu đến mọi từ điển, nhưng đó chính xác là sự rò rỉ mà bạn đang cố loại bỏ. Hãy truyền namespace.
+
+</Accordion>
+<Accordion header="Adapter không hoàn toàn miễn phí">
+
+8.0 KB runtime so với 5.5 KB của `next-intlayer`, và tăng thêm +6-7 KB mỗi trang so với bản build gốc. Đây là chi phí cho bề mặt API của `next-intl`. Khi mọi component đã được chuyển sang `useIntlayer`, hãy gỡ bỏ adapter.
+
+</Accordion>
+<Accordion header="messages, timeZone và now trên provider bị bỏ qua">
+
+Các trình định dạng được hỗ trợ bởi `Intl` gốc và chỉ có ngôn ngữ mới ảnh hưởng đến kết quả. Nếu bạn phụ thuộc vào múi giờ bắt buộc hoặc một giá trị `now` cố định cho ngày tháng ổn định khi hydrate, hãy xử lý tại nơi gọi. Xem [định dạng ngày, giờ và số](https://intlayer.org/vi/blog/date-time-number-formatting-locales).
+
+</Accordion>
+</AccordionGroup>
 
 ## Khi nào nên sử dụng cái nào?
 
-- **Tiếp tục với `next-intl`** nếu ứng dụng của bạn nhỏ, bundle của bạn không phải là mối quan tâm, và team của bạn thoải mái sở hữu namespaces và `pick()` cho mỗi trang.
-- **Sử dụng `@intlayer/next-intl`** nếu bạn đang dùng `next-intl` và muốn có những lợi ích về bundle, rò rỉ và hydration, typed keys cũng như CLI / CMS tooling mà không cần viết lại toàn bộ. Đây là điểm vào được khuyến nghị cho bất kỳ codebase `next-intl` hiện có nào.
-- **Đi native (`next-intlayer`)** cho các dự án mới, hoặc khi adapter đã hoàn thành công việc của nó. Đây là lựa chọn nhẹ nhất trong ba cái (5.5 KB, +0.3 KB per page) và mở khóa các server components đồng bộ, các file `.content.ts` per-component và bộ tính năng đầy đủ.
+<AccordionGroup>
+<Accordion header="Ở lại với next-intl">
+
+Ứng dụng của bạn nhỏ, kích thước gói không phải mối bận tâm và nhóm của bạn thoải mái quản lý thủ công namespace và `pick()` trên từng trang.
+
+</Accordion>
+<Accordion header="Sử dụng @intlayer/next-intl">
+
+Bạn đang dùng `next-intl` và muốn giảm kích thước bundle, hạn chế rò rỉ, tăng tốc hydrate, khóa có kiểu dữ liệu rõ ràng và bộ công cụ CLI / CMS mà không cần viết lại mã. Đây là điểm khởi đầu được khuyến nghị cho bất kỳ dự án `next-intl` nào.
+
+</Accordion>
+<Accordion header="Chuyển sang bản gốc (next-intlayer)">
+
+Dành cho các dự án mới, hoặc khi adapter đã hoàn thành nhiệm vụ chuyển tiếp. Đây là giải pháp nhẹ nhất trong cả ba (5.5 KB, +0.3 KB mỗi trang) và mở khóa các server component đồng bộ, tệp `.content.ts` theo từng component cùng đầy đủ tính năng. Bắt đầu với [Intlayer với Next.js](https://intlayer.org/vi/doc/environment/nextjs).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Mã ứng dụng của tôi có thực sự không bị xáo trộn không?">
+
+Trên Next.js, câu trả lời là có đối với các component: bản build benchmark chỉ sửa đổi `next.config.ts` và `intlayer.config.ts`. `getRequestConfig` trong `src/i18n.ts`, prop `messages` trên provider và các lệnh gọi `pick()` theo trang trở thành mã chết mà bạn có thể xóa sau đó.
+
+</Question>
+
+<Question title="Điều gì xảy ra với các thông điệp ICU?">
+
+Chúng vẫn hoạt động bình thường. `t("key", { count })`, `t.rich()`, `t.markup()`, `select`, `selectordinal`, `#` và `{ts, date, long}` đều được xử lý bởi bộ giải quyết ICU của Intlayer. Xem [định dạng thông điệp ICU](https://intlayer.org/vi/blog/icu-message-format).
+
+</Question>
+
+<Question title="Tại sao adapter lại nặng hơn next-intlayer gốc?">
+
+Nó mang theo bề mặt API của `next-intl` bên trên lõi Intlayer: `useFormatter`, `t.rich`, bộ giải quyết ICU, các helper điều hướng. Điều đó tốn 8.0 KB so với 5.5 KB, và thêm +6 KB mỗi trang. Đó là chiếc cầu nối, không phải đích đến.
+
+</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ừ `useTranslations("about")` sang `useIntlayer("about")` với tệp `.content.ts` đặ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 liền mạch.
+
+</Question>
+
+<Question title="Các đường dẫn đã bản địa hóa (pathnames) có hoạt động không?">
+
+Không hoạt động thông qua `pathnames` của `next-intl`: adapter chấp nhận nó để kiểm tra kiểu nhưng không nội suy. Thay vào đó, hãy sử dụng `routing.rewrite` của Intlayer.
+
+</Question>
+
+</FAQ>
 
 ## Các so sánh liên quan
 
-- [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer) (các thư viện, cùng benchmark)
-- [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)
-- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/blog/vue-i18n-vs-intlayer-vue-i18n) (cùng chuỗi adapter)
-- [Hướng dẫn di chuyển: next-intl sang Intlayer](https://intlayer.org/doc/migration/next-intl)
-- [Tham khảo adapter tương thích: next-intl](https://intlayer.org/doc/compatibility/next-intl)
+Cùng loạt adapter:
+
+- [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)
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-vue-i18n)
+
+So sánh trực tiếp các thư viện:
+
+- [next-intl vs Intlayer](https://intlayer.org/vi/blog/next-intl-vs-intlayer), cùng benchmark
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/vi/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [Is next-intl outdated?](https://intlayer.org/vi/blog/is-next-intl-outdated)
+
+Tài liệu tham khảo:
+
+- [Compat adapter: next-intl](https://intlayer.org/vi/doc/compatibility/next-intl)
+- [Hướng dẫn di chuyển: từ next-intl sang Intlayer](https://intlayer.org/vi/doc/migration/next-intl)
+- [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)
+- [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