@intlayer/docs 9.5.5 → 9.5.7

package/blog/id/i18next_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "i18next vs Intlayer: Benchmark & Perbandingan 2026"
 description: "react-i18next dan next-i18next diuji terhadap Intlayer pada Next.js dan TanStack Start. Ukuran bundle, kebocoran konten, responsivitas pergantian bahasa, dan pengalaman pengembang."
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # i18next VS Intlayer | Benchmark Internasionalisasi (i18n) React & Next.js
 
+![i18next VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `i18next` adalah framework i18n yang paling banyak digunakan dalam ekosistem JavaScript. Melalui `react-i18next` dan `next-i18next`, library ini mendukung sebagian besar aplikasi React dan Next.js. Intlayer hadir sebagai alternatif modern berbasis kompilator dengan cakupan konten per komponen.
 
 Artikel ini membandingkan keduanya berdasarkan pengukuran riil, bukan sekadar daftar fitur. Angka-angka ini diperoleh dari [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), sebuah suite pengujian sumber terbuka yang membangun aplikasi yang sama persis dengan masing-masing library dan mencatat data yang diunduh oleh peramban secara akurat.
@@ -99,6 +101,10 @@ Metrik yang dicatat untuk setiap build:
 
 ### Hasil pada Next.js (`next-i18next`)
 
+Pilih metrik dan pustaka yang Anda minati:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Library                           | Strategi       | Lib size (gz) | Page JS avg (gz) | Kebocoran Bahasa | Kebocoran Halaman | Rata-rata Komp. (gz) | Reaktivitas E2E | Hydration |
 | --------------------------------- | -------------- | ------------: | ---------------: | ---------------: | ----------------: | -------------------: | --------------: | --------: |
 | **base** (tanpa i18n)             | -              |        0.0 KB |         141.0 KB |             0.0% |              0.0% |               0.9 KB |         13.4 ms |   11.8 ms |
@@ -119,6 +125,15 @@ Metrik yang dicatat untuk setiap build:
 - **Ukuran per komponen**: Komponen yang memanggil `useTranslation()` menghasilkan ukuran 26-79 KB; komponen yang sama dengan `useIntlayer()` hanya berukuran 6.9 KB.
 - **Waktu hidrasi**: Pada konfigurasi `dynamic`, waktu hidrasi melonjak menjadi 27.7 ms karena instance i18next harus diinisialisasi dan meminta data backend di sisi klien sebelum React dapat menyelesaikan hidrasi.
 
+<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;"
+/>
+
+> Tabel lengkap, setiap pustaka dan setiap strategi, ada di [laporan benchmark Next.js](https://intlayer.org/id/doc/benchmark/nextjs).
+
 ### Hasil pada TanStack Start (`react-i18next`)
 
 Aplikasi yang sama pada TanStack Start dengan `react-i18next` murni untuk memisahkan faktor arsitektur Next.js:
@@ -141,8 +156,19 @@ Aplikasi yang sama pada TanStack Start dengan `react-i18next` murni untuk memisa
 - Mode `static` pada Intlayer secara bawaan memiliki **0% kebocoran halaman** karena hanya kamus yang diimpor oleh komponen halaman tersebut yang dimasukkan ke bundle. Mengaktifkan `importMode: 'dynamic'` juga langsung meniadakan kebocoran bahasa.
 - **Ukuran per komponen**: 24-27 KB pada `react-i18next` berbanding 6-8 KB pada Intlayer. `useTranslation()` mengikat setiap komponen ke instance global i18next.
 
+<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;"
+/>
+
+> Tabel lengkap ada di [laporan benchmark TanStack Start](https://intlayer.org/id/doc/benchmark/tanstack).
+
 ## Mengapa Perbedaannya Begitu Nyata? Global Instance vs Kamus Terkompilasi
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 `i18next` dirancang pada tahun 2012 sebagai pustaka runtime: Satu instance global menyimpan data teks, serangkaian plugin memperluas fungsinya, dan fungsi `t()` mencari kunci saat perenderan. Pola ini sangat fleksibel namun memicu penumpukan ukuran:
 
 ```bash
@@ -166,7 +192,13 @@ Aplikasi yang sama pada TanStack Start dengan `react-i18next` murni untuk memisa
                 └── page.tsx     # harus tahu bahwa halaman ini membutuhkan ["common", "about"]
 ```
 
-Instance global tidak dapat mengetahui kunci apa saja yang akan dipanggil oleh suatu komponen; sehingga ia menampung seluruh namespace yang diminta. Mengoptimalkannya berarti **Anda** harus membagi file, **Anda** harus mencatat namespace yang dibutuhkan setiap halaman, dan **Anda** harus memperbaruinya saat ada komponen yang dipindahkan. Seperti dikutip dalam [laporan benchmark](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md): "Menjaga keamanan tipe data sambil memastikan namespace mana yang harus disertakan di setiap halaman adalah mimpi buruk".
+Instance global tidak dapat mengetahui kunci apa saja yang akan dipanggil oleh suatu komponen; sehingga ia menampung seluruh namespace yang diminta. Mengoptimalkannya berarti **Anda** harus membagi file, **Anda** harus mencatat namespace yang dibutuhkan setiap halaman, dan **Anda** harus memperbaruinya saat ada komponen yang dipindahkan.
+
+Biaya membengkak pada dua sumbu sekaligus, halaman dan bahasa:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
+Seperti dikutip dalam [laporan benchmark](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md): "Menjaga keamanan tipe data sambil memastikan namespace mana yang harus disertakan di setiap halaman adalah mimpi buruk".
 
 Intlayer meniadakan instance global tersebut. Konten dideklarasikan langsung di sebelah komponen, dan kompilator menyelesaikan grafik ketergantungan pada fase build:
 
@@ -193,7 +225,8 @@ Intlayer meniadakan instance global tersebut. Konten dideklarasikan langsung di
 
 ### Perbandingan Konfigurasi Awal
 
-**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 (
 
 Pengembang juga harus mengelola `I18nProvider` di klien, mengatur `generateStaticParams`, serta mendefinisikan array `namespaces` pada tiap halaman.
 
-**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>
+
 ### Komponen Klien
 
-**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 = () => {
 
 > Halaman yang memuat komponen ini wajib menyertakan namespace `about`, dan `t("counter.label")` hanyalah string biasa tanpa bantuan tipe TypeScript sebelum `CustomTypeOptions` diperluas.
 
-**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 = () => {
 
 Properti `label` dan `increment` memiliki tipe data yang sangat ketat; kesalahan ketik akan langsung terdeteksi oleh TypeScript dan terjemahan bahasa Prancis yang belum diisi akan menggagalkan proses build.
 
+</Tab>
+</Tabs>
+
 ### Komponen Server Sinkron (RSC)
 
-**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) => (
 
 Halaman harus menjalankan `i18n.getFixedT(locale, "about")` dan meneruskan `t` serta `locale` ke bawah melalui 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>
+
 ## Gunakan API i18next, Nikmati Keringanan Intlayer
 
 Anda tidak harus menulis ulang komponen yang ada untuk menikmati keuntungan benchmark di atas. Adaptor `@intlayer/i18next`, `@intlayer/react-i18next`, dan `@intlayer/next-i18next` dapat langsung dipasang: pemanggilan `useTranslation`, `t()`, `<Trans>`, dan bentuk jamak tetap berfungsi seperti biasa, disuplai oleh kamus yang dioptimalkan kompilator Intlayer di latar belakang.
@@ -415,18 +462,85 @@ Pelajari panduan migrasinya: [i18next](https://intlayer.org/id/doc/migration/i18
 
 ## Kapan Memilih yang Mana?
 
-- **Pilih i18next**: Jika Anda sangat bergantung pada ekosistem pluginnya (pendeteksi khusus, backend unik, ICU, Locize), menerapkan lokalisasi di luar React (Node services, vanilla JS, framework lain), tim Anda sudah terbiasa, atau sistem penerjemah mengharuskan struktur `locales/{lng}/{ns}.json`. Namun, pastikan Anda menyisihkan waktu untuk mengelola namespace dan rute jika kinerja adalah prioritas.
-- **Pilih Intlayer**: Jika Anda mengutamakan **konten per komponen**, **keamanan tipe TypeScript yang ketat**, **deteksi terjemahan hilang saat build**, **tree-shaking dan lazy loading otomatis tanpa repot**, pergantian bahasa instan, komponen server sinkron, dan alat terintegrasi (Visual Editor, CMS, terjemahan AI, server MCP). Pilihan sempurna untuk aplikasi modular dan design system.
-- **Pilih adaptor `@intlayer/*-i18next`**: Jika proyek Anda sudah berjalan menggunakan i18next dan ingin segera memangkas ukuran bundle serta mempercepat waktu muat tanpa perlu refactoring besar-besaran.
+<AccordionGroup>
+<Accordion header="Pilih i18next">
+
+Jika Anda sangat bergantung pada ekosistem pluginnya (pendeteksi khusus, backend unik, ICU, Locize), menerapkan lokalisasi di luar React (Node services, vanilla JS, framework lain), tim Anda sudah terbiasa, atau sistem penerjemah mengharuskan struktur `locales/{lng}/{ns}.json`. Namun, pastikan Anda menyisihkan waktu untuk mengelola namespace dan rute jika kinerja adalah prioritas.
+
+</Accordion>
+<Accordion header="Pilih Intlayer">
+
+Anda menginginkan **konten berbasis komponen**, **TypeScript yang ketat**, **kesalahan kunci yang hilang saat waktu build**, **tree-shaking dan lazy loading tanpa usaha**, pergantian bahasa instan, komponen server sinkron, dan alat editorial bawaan ([Visual Editor](https://intlayer.org/id/doc/concept/editor), [CMS](https://intlayer.org/id/doc/concept/cms), [terjemahan AI](https://intlayer.org/id/doc/concept/auto-fill), [server MCP](https://intlayer.org/id/doc/mcp-server)). Sangat relevan untuk basis kode modular yang besar dan sistem desain.
+
+</Accordion>
+<Accordion header="Pilih adaptor @intlayer/*-i18next">
+
+Anda sudah menggunakan i18next dan menginginkan efisiensi bundle serta peningkatan reaktivitas tanpa perlu menulis ulang komponen. Berkas `locales/{lng}/{ns}.json` Anda tetap menjadi sumber kebenaran utama. Diukur berdampingan dalam [i18next vs @intlayer/i18next](https://intlayer.org/id/blog/i18next-vs-intlayer-i18next).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Mengapa i18next jauh lebih berat dibandingkan pustaka lainnya?">
+
+Ia dirancang sebagai runtime agnostik framework: instance global, pipeline plugin, repositori sumber daya, resolver kunci. Fleksibilitas tersebut dikompilasi ke dalam setiap bundel. Komponen kosong yang hanya mengimpor pustaka berbobot **19.7 KB gzip** dengan `next-i18next` berbanding **5.5 KB** dengan `next-intlayer`, dan biaya tersebut dibayar pada setiap halaman apa pun isi konten Anda.
+
+</Question>
+
+<Question title="Apakah lazy loading dengan backend memperbaikinya?">
+
+Itu memperbaiki ukuran byte, bukan latensi. Beralih ke `i18next-resources-to-backend` menghemat ~49 KB per halaman tetapi menambahkan round-trip jaringan pada pergantian bahasa: **123 ms** dalam pengaturan `dynamic` dan **185 ms** dalam `scoped-static`, berbanding **3-4 ms** dengan Intlayer. Hidrasi juga melonjak ke 27.7 ms karena instance menyelesaikan backend-nya sebelum React dapat melakukan hidrasi.
+
+</Question>
+
+<Question title="Bisakah saya mencapai 0% kebocoran konten dengan i18next?">
+
+Bisa, dengan `scoped-dynamic`: satu namespace per rute, backend sumber daya, dan pemetaan halaman ke namespace yang dikelola secara manual. Ini menghasilkan 163.4 KB per halaman di Next.js, masih **+22 KB** lebih besar daripada 141.3 KB milik Intlayer yang tidak memerlukan konfigurasi tambahan. Lihat [optimasi bundel](https://intlayer.org/id/doc/concept/bundle-optimization).
+
+</Question>
+
+<Question title="Apakah saya harus menulis ulang komponen untuk bermigrasi?">
+
+Tidak. `@intlayer/i18next`, `@intlayer/react-i18next`, dan `@intlayer/next-i18next` mempertahankan `useTranslation`, `t()`, `<Trans>`, `{{interpolation}}`, bentuk jamak `_one` / `_other`, sufiks konteks, dan `returnObjects`. Cukup satu baris plugin di `next.config.ts` atau `vite.config.ts`. Panduan langkah demi langkah ada di [panduan migrasi next-i18next](https://intlayer.org/id/doc/migration/next-i18next).
+
+</Question>
+
+<Question title="Apa yang terjadi pada plugin i18next saya?">
+
+Backend dan pendeteksi bahasa tetap diterima tetapi menjadi tidak aktif: tidak ada lagi yang perlu dimuat atau dideteksi saat runtime. Deteksi bahasa menjadi konfigurasi routing Intlayer (awalan URL, cookie, header). Jika aplikasi Anda mengambil terjemahan dari CMS saat permintaan tiba, gunakan [Intlayer CMS](https://intlayer.org/id/doc/concept/cms) atau perintah `intlayer pull` / `push` sebagai gantinya.
+
+</Question>
+
+</FAQ>
 
 ## Perbandingan Terkait
 
-- [next-intl vs Intlayer](https://intlayer.org/id/blog/next-intl-vs-intlayer) (benchmark yang sama)
-- [Lingui vs Intlayer](https://intlayer.org/id/blog/lingui-vs-intlayer) (benchmark yang sama)
-- [vue-i18n vs Intlayer benchmark](https://intlayer.org/id/blog/vue-i18n-vs-intlayer-benchmark) (benchmark yang sama)
+Benchmark yang sama, pustaka lain:
+
+- [next-intl vs Intlayer](https://intlayer.org/id/blog/next-intl-vs-intlayer)
+- [Lingui vs Intlayer](https://intlayer.org/id/blog/lingui-vs-intlayer)
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/id/blog/vue-i18n-vs-intlayer-benchmark)
 - [next-i18next vs next-intl vs Intlayer](https://intlayer.org/id/blog/next-i18next-vs-next-intl-vs-intlayer)
 - [react-i18next vs react-intl vs Intlayer](https://intlayer.org/id/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+Mendalami i18next lebih lanjut:
+
+- [i18next vs @intlayer/i18next](https://intlayer.org/id/blog/i18next-vs-intlayer-i18next), perbandingan adaptor yang diukur pada aplikasi yang sama
 - [Apakah i18next sudah ketinggalan zaman?](https://intlayer.org/id/blog/is-i18next-outdated)
+- [Menggunakan Intlayer dengan i18next](https://intlayer.org/id/blog/intlayer-with-i18next) dan [dengan react-i18next](https://intlayer.org/id/blog/intlayer-with-react-i18next)
+- [Cara menginternasionalkan aplikasi Next.js dengan next-i18next](https://intlayer.org/id/blog/nextjs-internationalization-using-next-i18next)
+
+Dokumentasi referensi:
+
+- [Laporan benchmark Next.js](https://intlayer.org/id/doc/benchmark/nextjs) dan [laporan benchmark TanStack Start](https://intlayer.org/id/doc/benchmark/tanstack)
+- Adaptor kompatibilitas: [i18next](https://intlayer.org/id/doc/compatibility/i18next), [react-i18next](https://intlayer.org/id/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/id/doc/compatibility/next-i18next)
+- Panduan migrasi: [i18next](https://intlayer.org/id/doc/migration/i18next), [react-i18next](https://intlayer.org/id/doc/migration/react-i18next), [next-i18next](https://intlayer.org/id/doc/migration/next-i18next)
+- [Optimasi bundel](https://intlayer.org/id/doc/concept/bundle-optimization) dan [kompiler Intlayer](https://intlayer.org/id/doc/compiler)
+- [i18n per komponen vs terpusat](https://intlayer.org/id/blog/per-component-vs-centralized-i18n)
+- [i18n berbasis kompilator vs deklaratif](https://intlayer.org/id/blog/compiler-vs-declarative-i18n)
 
 ## Bintang GitHub
 

package/blog/id/lingui_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "Lingui vs Intlayer: Tolok Ukur & Perbandingan 2026"
 description: "Dua pustaka i18n berbasis kompiler diuji pada Next.js dan TanStack Start. Ukuran bundle, kebocoran konten, ukuran komponen, hidrasi, reaktivitas pergantian lokal, dan pengalaman pengembang."
 keywords:
@@ -24,6 +24,8 @@ author: aymericzip
 
 # Lingui VS Intlayer | Tolok Ukur Internasionalisasi (i18n) React & Next.js
 
+![JavaScript i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 Lingui dan Intlayer adalah dua pustaka dalam tolok ukur ini yang mengandalkan **kompiler** daripada runtime murni. Lingui mengekstrak pesan dari makro saat build time dan mengompilasi katalog per lokal. Intlayer mengompilasi kamus per komponen dan melakukan tree-shake per lokal. Di atas kertas keduanya seharusnya sebanding. Angka-angka berikut menunjukkan di mana keduanya berbeda.
 
 Data berasal dari [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), sebuah rangkaian pengujian sumber terbuka yang membangun aplikasi yang sama dengan masing-masing pustaka dan mencatat apa yang sebenarnya diunduh serta dieksekusi oleh peramban.
@@ -96,6 +98,10 @@ Untuk setiap build, pengujian mencatat:
 
 ### Hasil pada Next.js
 
+Pilih metrik dan pustaka yang Anda minati:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Pustaka               | Strategi       | Ukuran Lib (gz) | Rata-rata JS Halaman (gz) | Bocor Lokal | Bocor Halaman | Rata-rata Komponen (gz) | Reaktivitas E2E | Hidrasi |
 | --------------------- | -------------- | --------------: | ------------------------: | ----------: | ------------: | ----------------------: | --------------: | ------: |
 | **base** (tanpa i18n) | -              |          0.0 KB |                  141.0 KB |        0.0% |          0.0% |                  0.9 KB |         13.4 ms | 11.8 ms |
@@ -114,6 +120,15 @@ Untuk setiap build, pengujian mencatat:
 - **Fallback lokal sumber bocor.** Bahkan dalam pengaturan yang dioptimalkan, **3-15% string `en` tetap terkirim di dalam halaman `fr`**. Makro Lingui menjaga pesan sumber tetap tersedia sebagai fallback, sehingga ikut masuk ke dalam bundle bersama terjemahan. Intlayer menyelesaikan fallback pada saat build dan hanya mengirimkan lokal yang aktif.
 - **Ukuran komponen membengkak pada `scoped-dynamic`.** Setiap komponen yang dikompilasi secara terisolasi rata-rata berukuran **152.6 KB**, karena katalog setiap rute dapat diakses dari komponen yang mengimpornya. Komponen yang sama dengan `useIntlayer()` hanya berukuran rata-rata **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;"
+/>
+
+> Tabel lengkap, setiap pustaka dan setiap strategi, dalam [laporan tolok ukur Next.js](https://intlayer.org/id/doc/benchmark/nextjs).
+
 ### Hasil pada TanStack Start
 
 | Pustaka                     | Strategi       | Ukuran Lib (gz) | Rata-rata JS Halaman (gz) | Bocor Lokal | Bocor Halaman | Rata-rata Komponen (gz) | Reaktivitas E2E | Hidrasi |
@@ -135,8 +150,19 @@ Untuk setiap build, pengujian mencatat:
 - **Baris `static` Intlayer sudah memiliki 0% kebocoran halaman** karena hanya kamus yang diimpor oleh komponen halaman yang dibundel. Satu baris konfigurasi (`importMode: 'dynamic'`) menghapus kebocoran lokal juga.
 - **`@intlayer/lingui`** mempertahankan sintaks makro Lingui dan menyajikannya dari kamus Intlayer. Pendekatan ini mengorbankan sedikit ukuran halaman (137 KB, karena runtime makro tetap ada) demi komponen yang lebih kecil (12.8 KB) dan hidrasi yang lebih cepat daripada Lingui bawaan. Ini adalah langkah migrasi, bukan tujuan akhir.
 
+<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;"
+/>
+
+> Tabel lengkap dalam [laporan tolok ukur TanStack Start](https://intlayer.org/id/doc/benchmark/tanstack).
+
 ## Mengapa ada perbedaan? Dua kompiler, dua unit kerja
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Kedua pustaka melakukan kompilasi. Perbedaannya terletak pada **apa** yang mereka kompilasi.
 
 **Lingui mengompilasi katalog.** Makro dalam kode sumber Anda diekstrak ke dalam file `.po` per lokal, lalu dikompilasi menjadi modul JS per lokal. Unit kerjanya adalah **lokal**. Membaginya lebih lanjut, berdasarkan rute atau komponen, berarti membuat beberapa katalog, mengonfigurasi `lingui.config.ts` untuk mengekstrak masing-masing dari kumpulan file yang berbeda, dan memuat katalog yang tepat di setiap rute. Instans runtime `I18n` bersifat global; setiap pemanggilan `useLingui()` menghubungkan komponen ke instans tersebut.
@@ -176,7 +202,9 @@ Kedua pustaka melakukan kompilasi. Perbedaannya terletak pada **apa** yang merek
             └── about.content.ts
 ```
 
-Itulah mengapa pola `scoped-dynamic` adalah output bawaan bagi Intlayer dan merupakan proyek konfigurasi manual yang rumit bagi Lingui.
+Itulah mengapa pola `scoped-dynamic` adalah output bawaan bagi Intlayer dan merupakan proyek konfigurasi manual yang rumit bagi Lingui. Kesenjangan melebar pada dua sumbu sekaligus, halaman dan bahasa:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 > Untuk mendapatkan angka pada baris `dynamic`, atur `dictionary.importMode: 'dynamic'` di `intlayer.config.ts`. Lihat [panduan optimasi bundle](https://intlayer.org/id/doc/concept/bundle-optimization).
 
@@ -184,7 +212,8 @@ Itulah mengapa pola `scoped-dynamic` adalah output bawaan bagi Intlayer dan meru
 
 ### Pengaturan
 
-**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) => {
 
 Kemudian tambahkan `@lingui/babel-plugin-lingui-macro` (atau `@lingui/swc-plugin`) ke bundler, jalankan `lingui extract` setelah mengedit kode sumber, jalankan `lingui compile` sebelum build, dan bungkus hierarki aplikasi dengan `<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;
 
 Tambahkan `intlayer()` ke `vite.config.ts` (atau `withIntlayer()` ke `next.config.ts`) dan bungkus hierarki komponen dengan `<IntlayerProvider>`. Tidak ada langkah ekstrak atau kompilasi terpisah: kamus dibangun secara otomatis saat bundler berjalan.
 
+</Tab>
+</Tabs>
 ### Komponen
 
-**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 = () => {
 
 Teks bahasa Inggris berada di dalam komponen; teks bahasa Prancis berada di `src/locales/fr/messages.po` di bawah ID ter-hash, setelah `lingui extract` dijalankan. Jika Anda lupa menjalankannya atau lupa menjalankan `compile`, aplikasi akan secara diam-diam kembali ke bahasa Inggris.
 
-**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 = () => {
 
 Kedua lokal berada dalam satu file di samping komponen. Nilai `fr` yang hilang akan memicu error saat build, dan kunci yang salah akan menjadi error TypeScript.
 
+</Tab>
+</Tabs>
 ### Di luar komponen
 
 Metadata, loader, fungsi server: di mana saja tanpa hierarki 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 } }) => {
 
 Instans `I18n` baru dibuat per pemanggilan, katalog yang tepat dimuat secara manual, serta menggunakan `msg` + `i18n._()` daripada `t`. Sebagaimana dicatat dalam [catatan tolok ukur](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md), mengetahui kapan harus menggunakan `t`, `` t` ` ``, `i18n.t()`, `msg`, atau `<Trans>` sering kali membingungkan.
 
-**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>
+
 ## Pertahankan makro Lingui, dapatkan kamus Intlayer
 
 `@intlayer/lingui` adalah adaptor pengganti langsung untuk `@lingui/core` dan `@lingui/react`. Makro tetap dikompilasi seperti biasa; pemanggilan runtime `i18n._()` yang dihasilkannya disajikan langsung dari kamus Intlayer, dengan plugin sinkronisasi `.po` yang menjaga katalog lama Anda tetap sinkron. Bentuk jamak dan seleksi ICU dirender secara identik.
@@ -353,16 +394,82 @@ Biarkan `@lingui/babel-plugin-lingui-macro` / `@lingui/swc-plugin` tetap berada
 
 ## Kapan harus memilih yang mana?
 
-- **Pilih Lingui** jika Anda menginginkan **ICU MessageFormat** dengan makro bertipe, penerjemah Anda bekerja dengan file **`.po`** dalam alur TMS yang sudah ada, Anda menyukai string sumber inline di JSX, dan tim Anda terbiasa mengelola alur kerja ekstrak / kompilasi / pemisahan katalog. Ukuran JS per halamannya sangat kompetitif setelah lazy loading dikonfigurasi.
-- **Pilih Intlayer** jika Anda menginginkan **konten dengan cakupan komponen**, **TypeScript yang ketat**, **deteksi error kunci yang hilang saat build**, **tree-shaking dan lazy loading otomatis tanpa konfigurasi**, komponen yang ringan, hidrasi cepat, pergantian lokal instan, dan alat editorial bawaan (Visual Editor, CMS, terjemahan AI, server MCP). Sangat relevan untuk codebase modular dan sistem desain berskala besar.
-- **Pilih `@intlayer/lingui`** jika Anda saat ini menggunakan Lingui dan ingin bermigrasi ke kamus Intlayer secara bertahap tanpa mengubah makro.
+<AccordionGroup>
+<Accordion header="Pilih Lingui">
+
+Anda menginginkan **ICU MessageFormat** dengan makro bertipe, penerjemah Anda bekerja di **`.po`** dengan alur TMS yang ada, Anda lebih suka string sumber sebaris di JSX, dan tim Anda terbiasa mengelola alur kerja ekstrak / kompilasi / pemisahan katalog. JS per halamannya kompetitif setelah pemuatan lambat (lazy loading) diatur.
+
+</Accordion>
+<Accordion header="Pilih Intlayer">
+
+Anda menginginkan **konten dengan cakupan komponen**, **TypeScript yang ketat**, **kesalahan kunci yang hilang saat waktu build**, **tree-shaking dan pemuatan lambat tanpa usaha**, komponen kecil, hidrasi cepat, pergantian bahasa instan, dan alat editorial bawaan ([Editor Visual](https://intlayer.org/id/doc/concept/editor), [CMS](https://intlayer.org/id/doc/concept/cms), [terjemahan AI](https://intlayer.org/id/doc/concept/auto-fill), [server MCP](https://intlayer.org/id/doc/mcp-server)). Sangat relevan untuk basis kode modular besar dan sistem desain.
+
+</Accordion>
+<Accordion header="Pilih @intlayer/lingui">
+
+Anda menggunakan Lingui dan ingin beralih ke kamus Intlayer secara bertahap tanpa menyentuh makro. Katalog `.po` Anda tetap menjadi sumber kebenaran melalui [plugin sinkronisasi PO](https://intlayer.org/id/doc/compatibility/lingui). Diukur berdampingan dalam [Lingui vs @intlayer/lingui](https://intlayer.org/id/blog/lingui-vs-intlayer-lingui).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Lingui juga mengompilasi. Mengapa hasilnya sangat berbeda?">
+
+Karena unit kompilasinya berbeda. Lingui mengompilasi **satu katalog per bahasa**: segala sesuatu di bawahnya (katalog per rute, pemuatan lambat, menjaga fallback dari bundel) adalah konfigurasi manual. Intlayer mengompilasi **satu kamus per komponen**, sehingga pemisahan rute menjadi hasil langsung dari build. Itulah mengapa komponen Lingui yang dikompilasi secara terpisah berukuran 58-153 KB dibandingkan 6-8 KB pada Intlayer.
+
+</Question>
+
+<Question title="Mengapa kebocoran bahasa tidak pernah mencapai 0% dengan Lingui?">
+
+Makro mempertahankan pesan sumber tersedia sebagai fallback runtime, sehingga string bahasa Inggris dikirim bersama terjemahannya. Tolok ukur mengukur **3-15% string `en` di dalam halaman `fr`** di setiap pengaturan yang dioptimalkan. Intlayer menyelesaikan fallback pada waktu build dan hanya mengirim bahasa yang aktif.
+
+</Question>
+
+<Question title="Apakah JavaScript per halaman Lingui benar-benar kompetitif?">
+
+Ya, dan di TanStack Start ia menang tipis: 115.2 KB dalam mode `dynamic` dibandingkan 118.6 KB untuk Intlayer. Katalog yang dikompilasi dengan ID hash sangat ringkas. Biaya muncul di tempat lain: hidrasi pada 28-34 ms dibandingkan 11-14 ms, dan pergantian bahasa **42 ms** dalam pengaturan `scoped-dynamic`.
+
+</Question>
+
+<Question title="Apakah saya harus meninggalkan makro untuk bermigrasi?">
+
+Tidak. `@intlayer/lingui` mempertahankan kompilasi `` t`...` ``, `<Trans>`, `msg`, `plural`, `select`, dan `selectOrdinal` seperti sebelumnya; hanya target resolusi `i18n._()` yang berubah. Pertahankan `@lingui/babel-plugin-lingui-macro` atau `@lingui/swc-plugin` dalam build. Lihat [dokumentasi kompatibilitas Lingui](https://intlayer.org/id/doc/compatibility/lingui).
+
+</Question>
+
+<Question title="Bagaimana dengan langkah ekstraksi dan kompilasi?">
+
+Langkah-langkah tersebut tetap ada untuk makro, dan hilang untuk konten asli Intlayer. Kamus `.content.ts` dibangun saat bundler berjalan, tanpa perintah CLI terpisah, dan [`intlayer test`](https://intlayer.org/id/doc/concept/cli) menggagalkan CI jika ada kunci yang hilang alih-alih secara diam-diam kembali ke string sumber.
+
+</Question>
+
+</FAQ>
 
 ## Perbandingan terkait
 
-- [next-intl vs Intlayer](https://intlayer.org/id/blog/next-intl-vs-intlayer) (tolok ukur yang sama)
-- [i18next vs Intlayer](https://intlayer.org/id/blog/i18next-vs-intlayer) (tolok ukur yang sama)
-- [Tolok ukur vue-i18n vs Intlayer](https://intlayer.org/id/blog/vue-i18n-vs-intlayer-benchmark) (tolok ukur yang sama)
-- [Kompiler vs i18n deklaratif](https://intlayer.org/id/blog/compiler-vs-declarative-i18n)
+Tolok ukur yang sama, pustaka lain:
+
+- [next-intl vs Intlayer](https://intlayer.org/id/blog/next-intl-vs-intlayer)
+- [i18next vs Intlayer](https://intlayer.org/id/blog/i18next-vs-intlayer)
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/id/blog/vue-i18n-vs-intlayer-benchmark)
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/id/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/id/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+Lebih lanjut:
+
+- [Lingui vs @intlayer/lingui](https://intlayer.org/id/blog/lingui-vs-intlayer-lingui), adaptor diukur pada aplikasi yang sama
+- [Compiler-driven vs declarative i18n](https://intlayer.org/id/blog/compiler-vs-declarative-i18n)
+- [Per-component vs centralized i18n](https://intlayer.org/id/blog/per-component-vs-centralized-i18n)
+- [ICU message format explained](https://intlayer.org/id/blog/icu-message-format)
+
+Dokumen referensi:
+
+- [Laporan tolok ukur Next.js](https://intlayer.org/id/doc/benchmark/nextjs) dan [laporan tolok ukur TanStack Start](https://intlayer.org/id/doc/benchmark/tanstack)
+- [Compat adapter: Lingui](https://intlayer.org/id/doc/compatibility/lingui)
+- [Optimalisasi bundel](https://intlayer.org/id/doc/concept/bundle-optimization) dan [kompiler Intlayer](https://intlayer.org/id/doc/compiler)
 
 ## Bintang GitHub