@intlayer/docs 9.0.0-canary.15 → 9.0.0-canary.16

package/docs/id/live-sync.md

@@ -0,0 +1,185 @@
+---
+createdAt: 2026-07-08
+updatedAt: 2026-07-08
+title: Sinkronisasi langsung | Refleksikan perubahan konten CMS saat runtime
+description: Biarkan aplikasi Anda merefleksikan perubahan konten Intlayer CMS saat runtime, tanpa perlu build ulang atau deploy ulang.
+keywords:
+  - Sinkronisasi langsung
+  - Live Sync
+  - CMS
+  - Editor Visual
+  - Internasionalisasi
+  - Dokumentasi
+  - Intlayer
+  - Next.js
+  - Vite
+history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Dipindahkan dari dokumentasi Intlayer CMS ke halamannya sendiri"
+  - version: 6.0.1
+    date: 2025-09-22
+    changes: "Menambahkan dokumentasi live sync"
+  - version: 6.0.0
+    date: 2025-09-04
+    changes: "Mengganti field `hotReload` dengan `liveSync`"
+author: aymericzip
+---
+
+# Sinkronisasi langsung
+
+Sinkronisasi Langsung memungkinkan aplikasi Anda mencerminkan perubahan konten CMS secara real-time. Tidak perlu membangun ulang atau menerapkan ulang. Saat diaktifkan, pembaruan dikirimkan ke server Sinkronisasi Langsung yang menyegarkan kamus yang dibaca aplikasi Anda.
+
+## Daftar Isi
+
+<TOC/>
+
+---
+
+## Mengaktifkan Sinkronisasi langsung
+
+Aktifkan Sinkronisasi Langsung dengan memperbarui konfigurasi Intlayer Anda:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... pengaturan konfigurasi lainnya
+  editor: {
+    /**
+     * Mengaktifkan hot reloading konfigurasi locale saat perubahan terdeteksi.
+     * Misalnya, ketika sebuah kamus ditambahkan atau diperbarui, aplikasi akan memperbarui
+     * konten yang ditampilkan pada halaman.
+     *
+     * Karena hot reloading memerlukan koneksi terus-menerus ke server, fitur ini
+     * hanya tersedia untuk klien dengan paket `enterprise`.
+     *
+     * Default: false
+     */
+    liveSync: true,
+  },
+  dictionary: {
+    /**
+     * Mengontrol bagaimana kamus diimpor:
+     *
+     * - "live": Kamus diambil secara dinamis menggunakan Live Sync API.
+     *   Menggantikan useIntlayer dengan useDictionaryDynamic.
+     *
+     * Catatan: Mode live menggunakan Live Sync API untuk mengambil kamus. Jika panggilan API
+     * gagal, kamus diimpor secara dinamis.
+     * Catatan: Hanya kamus dengan konten jarak jauh dan flag "live" yang menggunakan mode live.
+     * Yang lain menggunakan mode dinamis untuk kinerja.
+     */
+    importMode: "fetch",
+  },
+};
+
+export default config;
+```
+
+Mulai server Live Sync untuk membungkus aplikasi Anda:
+
+Contoh menggunakan server mandiri:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... skrip lainnya
+    "live:start": "npx intlayer live",
+  },
+}
+```
+
+Anda juga dapat menggunakan server aplikasi Anda secara paralel dengan menggunakan argumen `--process`.
+
+Contoh menggunakan Next.js:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... skrip lainnya
+    "build": "next build",
+    "dev": "next dev",
+    "start": "npx intlayer live --with 'next start'",
+  },
+}
+```
+
+Contoh menggunakan Vite:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... skrip lainnya
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "npx intlayer live --with 'vite start'",
+  },
+}
+```
+
+Server Live Sync membungkus aplikasi Anda dan secara otomatis menerapkan konten yang diperbarui saat konten tersebut tiba.
+
+Untuk menerima notifikasi perubahan dari CMS, server Live Sync mempertahankan koneksi SSE ke backend. Ketika konten berubah di CMS, backend meneruskan pembaruan ke server Live Sync, yang kemudian menulis kamus baru. Aplikasi Anda akan mencerminkan pembaruan tersebut pada navigasi berikutnya atau saat memuat ulang browser, tidak perlu membangun ulang.
+
+Diagram alur (CMS/Backend -> Server Live Sync -> Server Aplikasi -> Frontend):
+
+![Alur Live Sync CMS/Backend/Server Live Sync/Server Aplikasi/Frontend](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
+
+Cara kerjanya:
+
+![Skema Logika Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
+
+## Alur kerja pengembangan (lokal)
+
+- Dalam pengembangan, semua kamus jarak jauh diambil saat aplikasi dimulai, sehingga Anda dapat menguji pembaruan dengan cepat.
+- Untuk menguji Live Sync secara lokal dengan Next.js, bungkus server dev Anda:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... skrip lainnya
+    "dev": "npx intlayer live --with 'next dev'",
+    // "dev": "npx intlayer live --with 'vite dev'", // Untuk Vite
+  },
+}
+```
+
+Aktifkan optimasi agar Intlayer menerapkan transformasi impor Live selama pengembangan:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  dictionary: {
+    importMode: "fetch",
+  },
+  build: {
+    optimize: true,
+  },
+};
+
+export default config;
+```
+
+Pengaturan ini membungkus server dev Anda dengan server Live Sync, mengambil kamus jarak jauh saat startup, dan mengalirkan pembaruan dari CMS melalui SSE. Segarkan halaman untuk melihat perubahan.
+
+## Catatan dan batasan
+
+- Tambahkan origin live sync ke kebijakan keamanan situs Anda (CSP). Pastikan URL live sync diizinkan dalam `connect-src` (dan `frame-ancestors` jika relevan).
+- Live Sync tidak berfungsi dengan output statis. Untuk Next.js, halaman harus dinamis agar dapat menerima pembaruan saat runtime (misalnya, gunakan `generateStaticParams`, `generateMetadata`, `getServerSideProps`, atau `getStaticProps` secara tepat untuk menghindari batasan hanya statis penuh).
+- Di CMS, setiap kamus memiliki flag `live`. Hanya kamus dengan `live=true` yang diambil melalui API live sync; yang lain diimpor secara dinamis dan tetap tidak berubah saat runtime.
+- Flag `live` dievaluasi untuk setiap kamus saat build. Jika konten jarak jauh tidak diberi flag `live=true` selama build, Anda harus membangun ulang untuk mengaktifkan Live Sync untuk kamus tersebut.
+- Server live sync harus dapat menulis ke `.intlayer`. Dalam container, pastikan akses tulis ke `/.intlayer`.
+
+## Tautan berguna
+
+- [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md)
+- [Editor Visual Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md)
+- [Referensi Konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md)
+- [Panduan Self-Hosting](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/self_hosting.md)

package/docs/id/releases/v9.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-06-14
-updatedAt: 2026-06-29
+updatedAt: 2026-07-08
 title: Intlayer v9 Baru - Apa yang baru?
 description: Temukan apa yang baru di Intlayer v9. Memperkenalkan paket kompatibilitas drop-in untuk pustaka i18n populer dan dukungan untuk Collections dan Variants.
 keywords:
@@ -203,6 +203,49 @@ const product = useIntlayer("product-copy", {
 
 ---
 
+## `@intlayer/analytics`: pelacakan eksposur konten & pengujian A/B
+
+Paket opsional baru, [`@intlayer/analytics`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md), memberi tahu Anda konten apa yang benar-benar ditampilkan kepada pengunjung Anda — dan melengkapi **Collections & Variants** dengan memungkinkan Anda melakukan pengujian A/B pada konten serta mengukur konversi per varian.
+
+- **Pelacakan tingkat provider**: `IntlayerProvider` (React / Next.js / React Native) secara otomatis mencatat peristiwa `page_view` saat memuat, berpindah rute, dan berganti locale.
+- **Pelacakan tingkat node**: setiap resolusi `useIntlayer` melaporkan peristiwa `content_exposure` — kunci dictionary, key path, locale mana, dan (jika berlaku) **varian** A/B mana yang ditampilkan. Eksposur berulang pada node yang sama dalam satu jendela flush digabungkan menjadi satu peristiwa.
+- **Penetapan A/B deterministik**: `getVariant(experimentKey, variants)` menetapkan varian ke setiap sesi **tanpa round-trip ke server**, sehingga tidak ada kedipan sebelum render pertama.
+- **`useConversion()`**: mengaitkan sebuah goal (pendaftaran, klik, pembelian…) dengan varian yang dilihat sesi tersebut.
+- **Tanpa biaya jika tidak dipasang**: pola tree-shakeable yang sama seperti `@intlayer/editor` — `import()` dinamis yang dibungkus `try/catch`, ditambah variabel lingkungan waktu build (`INTLAYER_ANALYTICS_ENABLED`) yang menghapus seluruh integrasi melalui dead-code elimination untuk aplikasi yang tidak mengaktifkannya.
+- **Tanpa skema konfigurasi baru**: menggunakan kembali `editor.backendURL` (endpoint pengiriman / self-hosting) dan `editor.clientId` (kunci proyek, sekaligus saklar pengaktif).
+- **Menghormati privasi**: hashing sesi anonim (SHA-256, tanpa menyimpan id mentah), tanpa penyimpanan IP, geolokasi kasar hanya berdasarkan negara, permintaan dikirim secara batch kira-kira setiap 20 detik.
+- **Dashboard**: halaman **Analytics** baru (muncul di sidebar setelah proyek dipilih) menampilkan pengguna aktif, pengguna hari ini, pengguna 7/30/90 hari terakhir, grafik evolusi pengunjung, serta rincian Locale vs Lokasi.
+
+```tsx fileName="CTAButton.tsx" codeFormat="tsx"
+import { useConversion } from "react-intlayer";
+
+const CTAButton = () => {
+  const trackConversion = useConversion();
+
+  return (
+    <button
+      onClick={() =>
+        trackConversion({
+          experimentKey: "homepage-hero",
+          variant: "black_friday",
+          goal: "cta_click",
+        })
+      }
+    >
+      Get started
+    </button>
+  );
+};
+```
+
+```bash packageManager="npm"
+npm install @intlayer/analytics
+```
+
+Sudah tersedia hari ini untuk React, Next.js, dan React Native (melalui `react-intlayer`); binding framework lain (Vue, Svelte, Angular, …) direncanakan, mengikuti pola rilis yang sama seperti `@intlayer/editor`. Lihat [dokumentasi Analytics](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md) untuk panduan lengkap.
+
+---
+
 ## Vite Plugin: Bundled Compiler & Proxy
 
 Plugin Vite `intlayer()` sekarang menggabungkan **compiler** dan **locale-routing proxy** secara langsung, sehingga sebagian besar proyek hanya memerlukan satu plugin di `vite.config.ts`:
@@ -324,5 +367,6 @@ Jika Anda memperbarui dari v8, perhatikan bahwa v9 tidak menyertakan breaking ch
 
 - [Panduan Compat Adapter Packages](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/compat/index.md)
 - [Dynamic Dictionaries - Collections & Variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dynamic_dictionaries/index.md)
+- [Analytics - Pelacakan eksposur konten & pengujian A/B](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md)
 - [Referensi Konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md)
 - [SDK CMS - Akses terprogram dengan @intlayer/api](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md)

package/docs/it/cli/index.md

@@ -125,7 +125,7 @@ Per vedere come configurare le lingue disponibili o altri parametri, fai riferim
 
 ### Autenticazione
 
-- **[Login](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/login.md)** - Autenticati con l'Intlayer CMS e ottieni le credenziali di accesso
+- **[Login](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/cli/login.md)** - Autenticati con l'Intlayer CMS e ottieni le credenziali di accesso
 
 ### Comandi principali
 

package/docs/it/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-06-23
+updatedAt: 2026-07-11
 title: Configurazione
 description: Scopri come configurare Intlayer per la tua applicazione. Comprendi le diverse impostazioni e opzioni disponibili per personalizzare Intlayer secondo le tue necessità.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 9.0.0
+    date: 2026-07-11
+    changes: "Aggiunta la configurazione `analytics`"
   - version: 9.0.0
     date: 2026-06-24
     changes: "Add `enableProxy` option to the routing configuration"
@@ -355,6 +358,30 @@ const config: IntlayerConfig = {
     liveSync: true,
   },
 
+  /**
+   * Configurazione degli analytics.
+   */
+  analytics: {
+    /**
+     * Se la raccolta degli analytics è abilitata (visualizzazioni di pagina, esposizioni di contenuto, eventi A/B).
+     * Richiede che `editor.clientId` sia impostato per l'attribuzione.
+     * Predefinito: false
+     */
+    enabled: true,
+
+    /**
+     * Millisecondi tra gli invii automatici in batch al backend.
+     * Predefinito: 20000
+     */
+    flushInterval: 20000,
+
+    /**
+     * Frazione di sessioni da registrare, da 0 (nessuna) a 1 (tutte).
+     * Predefinito: 1
+     */
+    sampleRate: 1,
+  },
+
   /**
    * Impostazioni per le traduzioni e la generazione tramite IA.
    */
@@ -671,6 +698,20 @@ Definisce le impostazioni per l'editor visuale, incluse la porta del server e lo
 
 ---
 
+### Configurazione Analytics (Analytics)
+
+Definisce le impostazioni relative agli analytics di Intlayer: la raccolta di quale contenuto viene effettivamente mostrato agli utenti (visualizzazioni di pagina, esposizioni di contenuto) e il supporto ai test A/B sui contenuti.
+
+Gli analytics sono rigorosamente opt-in: non viene raccolto nulla a meno che `analytics.enabled` non sia esplicitamente impostato su `true` **e** una chiave di progetto (`editor.clientId`) sia configurata per l'attribuzione. Quando disabilitati (impostazione predefinita), l'intera integrazione analytics viene eliminata dal bundle dell'applicazione (dead-code elimination).
+
+| Campo           | Descrizione                                                                                            | Tipo      | Predefinito | Esempio | Nota                                                                                                                                          |
+| --------------- | ------------------------------------------------------------------------------------------------------ | --------- | ----------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `enabled`       | Abilita la raccolta degli analytics (visualizzazioni di pagina, esposizioni di contenuto, eventi A/B). | `boolean` | `false`     | `true`  | Richiede che `editor.clientId` sia impostato per l'attribuzione; altrimenti gli analytics rimangono disabilitati anche se `enabled` è `true`. |
+| `flushInterval` | Millisecondi tra gli invii automatici in batch al backend.                                             | `number`  | `20000`     | `10000` |                                                                                                                                               |
+| `sampleRate`    | Frazione di sessioni da registrare, da `0` (nessuna) a `1` (tutte).                                    | `number`  | `1`         | `0.5`   | Il campionamento è deterministico per sessione, quindi una sessione registrata riporta tutti i suoi eventi (nessun funnel parziale).          |
+
+---
+
 ### Configurazione Routing (Routing)
 
 Impostazioni che controllano il comportamento del routing, inclusa la struttura dell'URL, lo storage del locale e la gestione del middleware.

package/docs/it/intlayer_CMS.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2026-06-30
+updatedAt: 2026-07-08
 title: Intlayer CMS | Esternalizza i tuoi contenuti nel CMS di Intlayer
 description: Esternalizza i tuoi contenuti nel CMS di Intlayer per delegare la gestione dei tuoi contenuti al tuo team.
 keywords:
@@ -18,6 +18,9 @@ slugs:
   - cms
 youtubeVideo: https://www.youtube.com/watch?v=UDDTnirwi_4
 history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Spostata la sezione «Sincronizzazione live» nella propria pagina (live-sync.md), lasciando qui una breve introduzione con link"
   - version: 9.0.0
     date: 2026-06-30
     changes: "Aggiunta sezione Self-Hosting: bootstrap Docker Compose, inventario dei servizi, configurazione SDK, funzionalità opzionali e note di aggiornamento"
@@ -248,133 +251,7 @@ Successivamente potrai visualizzare e gestire il tuo dizionario nel [Intlayer CM
 
 La Sincronizzazione Live consente alla tua app di riflettere le modifiche ai contenuti del CMS in tempo reale. Non è necessario ricostruire o ridistribuire. Quando abilitata, gli aggiornamenti vengono trasmessi a un server di Sincronizzazione Live che aggiorna i dizionari letti dalla tua applicazione.
 
-> Live Sync richiede una connessione continua al server ed è disponibile nel piano enterprise.
-
-Abilita Live Sync aggiornando la configurazione di Intlayer:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  // ... altre impostazioni di configurazione
-  editor: {
-    /**
-     * Abilita il caricamento a caldo delle configurazioni locali quando vengono rilevate modifiche.
-     * Ad esempio, quando un dizionario viene aggiunto o aggiornato, l'applicazione aggiorna
-     * il contenuto visualizzato nella pagina.
-     *
-     * Poiché il caricamento a caldo richiede una connessione continua al server, è
-     * disponibile solo per i clienti del piano `enterprise`.
-     *
-     * Predefinito: false
-     */
-    liveSync: true,
-  },
-  dictionary: {
-    /**
-     * Controlla come vengono importati i dizionari:
-     *
-     * - "live": I dizionari vengono recuperati dinamicamente utilizzando l'API Live Sync.
-     *   Sostituisce useIntlayer con useDictionaryDynamic.
-     *
-     * Nota: La modalità live utilizza l'API Live Sync per recuperare i dizionari. Se la chiamata API
-     * fallisce, i dizionari vengono importati dinamicamente.
-     * Nota: Solo i dizionari con contenuto remoto e flag "live" utilizzano la modalità live.
-     * Gli altri usano la modalità dinamica per le prestazioni.
-     */
-    importMode: "fetch",
-  },
-};
-
-export default config;
-```
-
-Avvia il server Live Sync per avvolgere la tua applicazione:
-
-Esempio con Next.js:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... altri script
-    "build": "next build",
-    "dev": "next dev",
-    "start": "npx intlayer live --with 'next start'",
-  },
-}
-```
-
-Esempio con Vite:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... altri script
-    "build": "vite build",
-    "dev": "vite dev",
-    "start": "npx intlayer live --with 'vite start'",
-  },
-}
-```
-
-Il server Live Sync avvolge la tua applicazione e applica automaticamente i contenuti aggiornati non appena arrivano.
-
-Per ricevere notifiche di modifica dal CMS, il server Live Sync mantiene una connessione SSE con il backend. Quando il contenuto cambia nel CMS, il backend inoltra l'aggiornamento al server Live Sync, che scrive i nuovi dizionari. La tua applicazione rifletterà l'aggiornamento alla successiva navigazione o al reload del browser, non è necessario ricostruire.
-
-Diagramma di flusso (CMS/Backend -> Server Live Sync -> Server Applicazione -> Frontend):
-
-![Schema Logica Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
-
-Come funziona:
-
-![Schema Flusso Live Sync CMS/Backend/Server Live Sync/Server Applicazione/Frontend](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
-
-### Flusso di lavoro di sviluppo (locale)
-
-- In fase di sviluppo, tutti i dizionari remoti vengono recuperati all'avvio dell'applicazione, così puoi testare rapidamente gli aggiornamenti.
-- Per testare Live Sync localmente con Next.js, avvolgi il tuo server di sviluppo:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... altri script
-    "dev": "npx intlayer live --with 'next dev'",
-    // "dev": "npx intlayer live --with 'vite dev'", // Per Vite
-  },
-}
-```
-
-Abilita l'ottimizzazione affinché Intlayer applichi le trasformazioni di importazione Live durante lo sviluppo:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  editor: {
-    applicationURL: "http://localhost:5173",
-    liveSyncURL: "http://localhost:4000",
-    liveSync: true,
-  },
-  dictionary: {
-    importMode: "fetch",
-  },
-  build: {
-    optimize: true,
-  },
-};
-
-export default config;
-```
-
-Questa configurazione avvolge il tuo server di sviluppo con il server Live Sync, recupera i dizionari remoti all'avvio e trasmette aggiornamenti dal CMS tramite SSE. Aggiorna la pagina per vedere le modifiche.
-
-Note e vincoli:
-
-- Aggiungi l'origine del live sync alla tua politica di sicurezza del sito (CSP). Assicurati che l'URL del live sync sia consentito in `connect-src` (e in `frame-ancestors` se pertinente).
-- Live Sync non funziona con output statico. Per Next.js, la pagina deve essere dinamica per ricevere aggiornamenti in fase di esecuzione (ad esempio, usa `generateStaticParams`, `generateMetadata`, `getServerSideProps` o `getStaticProps` in modo appropriato per evitare vincoli di solo statico completo).
-- Nel CMS, ogni dizionario ha un flag `live`. Solo i dizionari con `live=true` vengono recuperati tramite l'API di live sync; gli altri vengono importati dinamicamente e rimangono invariati a runtime.
-- Il flag `live` viene valutato per ogni dizionario al momento della build. Se il contenuto remoto non era contrassegnato come `live=true` durante la build, è necessario ricostruire per abilitare Live Sync per quel dizionario.
-- Il server di live sync deve poter scrivere nella cartella `.intlayer`. Nei container, assicurarsi che sia garantito l'accesso in scrittura a `/.intlayer`.
+Per la guida completa alla configurazione (attivazione, avvio del server Live Sync, flusso di lavoro di sviluppo locale e limitazioni), consulta la [documentazione di Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/live-sync.md).
 
 ## Self-Hosting
 

package/docs/it/live-sync.md

@@ -0,0 +1,174 @@
+---
+createdAt: 2026-07-08
+updatedAt: 2026-07-08
+title: Sincronizzazione live | Rifletti le modifiche dei contenuti del CMS in tempo reale
+description: Consenti alla tua applicazione di riflettere le modifiche dei contenuti del CMS Intlayer in tempo reale, senza ricompilazione né nuova distribuzione.
+keywords:
+  - Sincronizzazione live
+  - Live Sync
+  - CMS
+  - Editor Visivo
+  - Internazionalizzazione
+  - Documentazione
+  - Intlayer
+  - Next.js
+  - Vite
+history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Spostato dalla documentazione del CMS Intlayer in una pagina dedicata"
+  - version: 6.0.1
+    date: 2025-09-22
+    changes: "Aggiunta documentazione sulla sincronizzazione live"
+  - version: 6.0.0
+    date: 2025-09-04
+    changes: "Sostituito il campo `hotReload` con `liveSync`"
+author: aymericzip
+---
+
+# Sincronizzazione live
+
+La Sincronizzazione Live consente alla tua app di riflettere le modifiche ai contenuti del CMS in tempo reale. Non è necessario ricostruire o ridistribuire. Quando abilitata, gli aggiornamenti vengono trasmessi a un server di Sincronizzazione Live che aggiorna i dizionari letti dalla tua applicazione.
+
+## Indice
+
+<TOC/>
+
+---
+
+## Attivare la sincronizzazione live
+
+> Live Sync richiede una connessione continua al server ed è disponibile nel piano enterprise.
+
+Abilita Live Sync aggiornando la configurazione di Intlayer:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... altre impostazioni di configurazione
+  editor: {
+    /**
+     * Abilita il caricamento a caldo delle configurazioni locali quando vengono rilevate modifiche.
+     * Ad esempio, quando un dizionario viene aggiunto o aggiornato, l'applicazione aggiorna
+     * il contenuto visualizzato nella pagina.
+     *
+     * Poiché il caricamento a caldo richiede una connessione continua al server, è
+     * disponibile solo per i clienti del piano `enterprise`.
+     *
+     * Predefinito: false
+     */
+    liveSync: true,
+  },
+  dictionary: {
+    /**
+     * Controlla come vengono importati i dizionari:
+     *
+     * - "live": I dizionari vengono recuperati dinamicamente utilizzando l'API Live Sync.
+     *   Sostituisce useIntlayer con useDictionaryDynamic.
+     *
+     * Nota: La modalità live utilizza l'API Live Sync per recuperare i dizionari. Se la chiamata API
+     * fallisce, i dizionari vengono importati dinamicamente.
+     * Nota: Solo i dizionari con contenuto remoto e flag "live" utilizzano la modalità live.
+     * Gli altri usano la modalità dinamica per le prestazioni.
+     */
+    importMode: "fetch",
+  },
+};
+
+export default config;
+```
+
+Avvia il server Live Sync per avvolgere la tua applicazione:
+
+Esempio con Next.js:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... altri script
+    "build": "next build",
+    "dev": "next dev",
+    "start": "npx intlayer live --with 'next start'",
+  },
+}
+```
+
+Esempio con Vite:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... altri script
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "npx intlayer live --with 'vite start'",
+  },
+}
+```
+
+Il server Live Sync avvolge la tua applicazione e applica automaticamente i contenuti aggiornati non appena arrivano.
+
+Per ricevere notifiche di modifica dal CMS, il server Live Sync mantiene una connessione SSE con il backend. Quando il contenuto cambia nel CMS, il backend inoltra l'aggiornamento al server Live Sync, che scrive i nuovi dizionari. La tua applicazione rifletterà l'aggiornamento alla successiva navigazione o al reload del browser, non è necessario ricostruire.
+
+Diagramma di flusso (CMS/Backend -> Server Live Sync -> Server Applicazione -> Frontend):
+
+![Schema Logica Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
+
+Come funziona:
+
+![Schema Flusso Live Sync CMS/Backend/Server Live Sync/Server Applicazione/Frontend](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
+
+## Flusso di lavoro di sviluppo (locale)
+
+- In fase di sviluppo, tutti i dizionari remoti vengono recuperati all'avvio dell'applicazione, così puoi testare rapidamente gli aggiornamenti.
+- Per testare Live Sync localmente con Next.js, avvolgi il tuo server di sviluppo:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... altri script
+    "dev": "npx intlayer live --with 'next dev'",
+    // "dev": "npx intlayer live --with 'vite dev'", // Per Vite
+  },
+}
+```
+
+Abilita l'ottimizzazione affinché Intlayer applichi le trasformazioni di importazione Live durante lo sviluppo:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  dictionary: {
+    importMode: "fetch",
+  },
+  build: {
+    optimize: true,
+  },
+};
+
+export default config;
+```
+
+Questa configurazione avvolge il tuo server di sviluppo con il server Live Sync, recupera i dizionari remoti all'avvio e trasmette aggiornamenti dal CMS tramite SSE. Aggiorna la pagina per vedere le modifiche.
+
+## Note e vincoli
+
+- Aggiungi l'origine del live sync alla tua politica di sicurezza del sito (CSP). Assicurati che l'URL del live sync sia consentito in `connect-src` (e in `frame-ancestors` se pertinente).
+- Live Sync non funziona con output statico. Per Next.js, la pagina deve essere dinamica per ricevere aggiornamenti in fase di esecuzione (ad esempio, usa `generateStaticParams`, `generateMetadata`, `getServerSideProps` o `getStaticProps` in modo appropriato per evitare vincoli di solo statico completo).
+- Nel CMS, ogni dizionario ha un flag `live`. Solo i dizionari con `live=true` vengono recuperati tramite l'API di live sync; gli altri vengono importati dinamicamente e rimangono invariati a runtime.
+- Il flag `live` viene valutato per ogni dizionario al momento della build. Se il contenuto remoto non era contrassegnato come `live=true` durante la build, è necessario ricostruire per abilitare Live Sync per quel dizionario.
+- Il server di live sync deve poter scrivere nella cartella `.intlayer`. Nei container, assicurarsi che sia garantito l'accesso in scrittura a `/.intlayer`.
+
+## Link utili
+
+- [CMS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md)
+- [Editor Visivo di Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md)
+- [Riferimento di configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md)
+- [Guida al Self-Hosting](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/self_hosting.md)