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

package/docs/es/intlayer_CMS.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2026-06-30
+updatedAt: 2026-07-08
 title: Intlayer CMS | Externaliza tu contenido en el Intlayer CMS
 description: Externaliza tu contenido en el Intlayer CMS para delegar la gestión de tu contenido a tu equipo.
 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: "Se trasladó la sección «Sincronización en vivo» a su propia página (live-sync.md), dejando aquí una breve introducción y un enlace"
   - version: 9.0.0
     date: 2026-06-30
     changes: "Añadida sección de Auto-alojamiento: bootstrap Docker Compose, inventario de servicios, configuración SDK, características opcionales y notas de actualización"
@@ -248,145 +251,7 @@ Luego podrás ver y gestionar tu diccionario en el [Intlayer CMS](https://app.in
 
 La sincronización en vivo permite que tu aplicación refleje los cambios de contenido del CMS en runtime. No se requiere reconstrucción ni redepliegue. Cuando está habilitada, las actualizaciones se transmiten a un servidor de sincronización en vivo que actualiza los diccionarios que tu aplicación lee.
 
-> Live Sync requiere una conexión continua al servidor y está disponible en el plan enterprise.
-
-Habilita Live Sync actualizando tu configuración de Intlayer:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  // ... otras configuraciones
-  editor: {
-    /**
-     * Habilita la recarga en caliente de las configuraciones de localización cuando se detectan cambios.
-     * Por ejemplo, cuando se añade o actualiza un diccionario, la aplicación actualiza
-     * el contenido mostrado en la página.
-     *
-     * Debido a que la recarga en caliente requiere una conexión continua al servidor,
-     * solo está disponible para clientes del plan `enterprise`.
-     *
-     * Por defecto: false
-     */
-    liveSync: true,
-  },
-  dictionary: {
-    /**
-     * Controla cómo se importan los diccionarios:
-     *
-     * - "live": Los diccionarios se obtienen dinámicamente usando la API de Live Sync.
-     *   Reemplaza useIntlayer por useDictionaryDynamic.
-     *
-     * Nota: El modo live usa la API de Live Sync para obtener los diccionarios. Si la llamada a la API
-     * falla, los diccionarios se importan dinámicamente.
-     * Nota: Solo los diccionarios con contenido remoto y la bandera "live" usan el modo live.
-     * Los demás usan el modo dinámico para mejorar el rendimiento.
-     */
-    importMode: "fetch",
-  },
-};
-
-export default config;
-```
-
-Inicie el servidor Live Sync para envolver su aplicación:
-
-Ejemplo usando Next.js:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... otros scripts
-    "build": "next build",
-    "dev": "next dev",
-    "start": "npx intlayer live --with 'next start'",
-  },
-}
-```
-
-Ejemplo usando Vite:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... otros scripts
-    "build": "vite build",
-    "dev": "vite dev",
-    "start": "npx intlayer live --with 'vite start'",
-  },
-}
-```
-
-El servidor Live Sync envuelve su aplicación y aplica automáticamente el contenido actualizado a medida que llega.
-
-Para recibir notificaciones de cambios desde el CMS, el servidor Live Sync mantiene una conexión SSE con el backend. Cuando el contenido cambia en el CMS, el backend envía la actualización al servidor Live Sync, que escribe los nuevos diccionarios. Su aplicación reflejará la actualización en la siguiente navegación o recarga del navegador, sin necesidad de reconstrucción.
-
-Diagrama de flujo (CMS/Backend -> Servidor Live Sync -> Servidor de Aplicación -> Frontend):
-
-![Esquema de lógica de Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
-
-Cómo funciona:
-
-![Esquema de flujo Live Sync CMS/Backend/Servidor Live Sync/Servidor de Aplicación/Frontend](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
-
-### Flujo de trabajo de desarrollo (local)
-
-docs/ko/intlayer_CMS.md
-
-- En desarrollo, todos los diccionarios remotos se obtienen cuando la aplicación se inicia, para que puedas probar actualizaciones rápidamente.
-- Para probar Live Sync localmente con Next.js, envuelve tu servidor de desarrollo:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... otros scripts
-    "dev": "npx intlayer live --with 'next dev'",
-    // "dev": "npx intlayer live --with 'vite dev'", // Para Vite
-  },
-}
-```
-
-Habilita la optimización para que Intlayer aplique las transformaciones de importación en vivo durante el desarrollo:
-
-```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;
-```
-
-Esta configuración envuelve tu servidor de desarrollo con el servidor Live Sync, obtiene los diccionarios remotos al iniciar y transmite actualizaciones desde el CMS vía SSE. Actualiza la página para ver los cambios.
-
-Notas y restricciones:
-
-- Añade el origen de live sync a la política de seguridad de tu sitio (CSP). Asegúrate de que la URL de live sync esté permitida en `connect-src` (y en `frame-ancestors` si es relevante).
-- Live Sync no funciona con salida estática. Para Next.js, la página debe ser dinámica para recibir actualizaciones en runtime (por ejemplo, usa `generateStaticParams`, `generateMetadata`, `getServerSideProps` o `getStaticProps` adecuadamente para evitar restricciones de solo estático).
-
-Esta configuración envuelve tu servidor de desarrollo con el servidor Live Sync, obtiene diccionarios remotos al iniciar y transmite actualizaciones desde el CMS vía SSE. Actualiza la página para ver los cambios.
-
-Notas y restricciones:
-
-- Añade el origen de live sync a la política de seguridad de tu sitio (CSP). Asegúrate de que la URL de live sync esté permitida en `connect-src` (y en `frame-ancestors` si es relevante).
-- Live Sync no funciona con salida estática. Para Next.js, la página debe ser dinámica para recibir actualizaciones en runtime (por ejemplo, usa `generateStaticParams`, `generateMetadata`, `getServerSideProps` o `getStaticProps` adecuadamente para evitar restricciones de solo estático).
-- La URL de la aplicación debe coincidir con la que configuraste en la configuración del editor (`applicationURL`).
-- La URL del CMS
-
-- Asegúrate de que la configuración del proyecto se haya enviado al CMS de Intlayer.
-
-- El editor visual utiliza un iframe para mostrar tu sitio web. Asegúrate de que la Política de Seguridad de Contenidos (CSP) de tu sitio web permita la URL del CMS como `frame-ancestors` ('https://app.intlayer.org' por defecto). Revisa la consola del editor para cualquier error.
+Para la guía de configuración completa (activación, inicio del servidor Live Sync, flujo de trabajo de desarrollo local y restricciones), consulta la [documentación de Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/live-sync.md).
 
 ## Auto-alojamiento
 

package/docs/es/live-sync.md

@@ -0,0 +1,176 @@
+---
+createdAt: 2026-07-08
+updatedAt: 2026-07-08
+title: Sincronización en vivo | Refleja los cambios de contenido del CMS en tiempo real
+description: Permite que tu aplicación refleje los cambios de contenido del CMS de Intlayer en tiempo de ejecución, sin necesidad de reconstruir ni volver a implementar.
+keywords:
+  - Sincronización en vivo
+  - Live Sync
+  - CMS
+  - Editor Visual
+  - Internacionalización
+  - Documentación
+  - Intlayer
+  - Next.js
+  - Vite
+history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Trasladado desde la documentación del CMS de Intlayer a su propia página"
+  - version: 6.0.1
+    date: 2025-09-22
+    changes: "Añadida documentación de sincronización en vivo"
+  - version: 6.0.0
+    date: 2025-09-04
+    changes: "Reemplazado el campo `hotReload` por `liveSync`"
+author: aymericzip
+---
+
+# Sincronización en vivo
+
+La sincronización en vivo permite que tu aplicación refleje los cambios de contenido del CMS en runtime. No se requiere reconstrucción ni redepliegue. Cuando está habilitada, las actualizaciones se transmiten a un servidor de sincronización en vivo que actualiza los diccionarios que tu aplicación lee.
+
+## Tabla de contenidos
+
+<TOC/>
+
+---
+
+## Activar la sincronización en vivo
+
+> Live Sync requiere una conexión continua al servidor y está disponible en el plan enterprise.
+
+Habilita Live Sync actualizando tu configuración de Intlayer:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... otras configuraciones
+  editor: {
+    /**
+     * Habilita la recarga en caliente de las configuraciones de localización cuando se detectan cambios.
+     * Por ejemplo, cuando se añade o actualiza un diccionario, la aplicación actualiza
+     * el contenido mostrado en la página.
+     *
+     * Debido a que la recarga en caliente requiere una conexión continua al servidor,
+     * solo está disponible para clientes del plan `enterprise`.
+     *
+     * Por defecto: false
+     */
+    liveSync: true,
+  },
+  dictionary: {
+    /**
+     * Controla cómo se importan los diccionarios:
+     *
+     * - "live": Los diccionarios se obtienen dinámicamente usando la API de Live Sync.
+     *   Reemplaza useIntlayer por useDictionaryDynamic.
+     *
+     * Nota: El modo live usa la API de Live Sync para obtener los diccionarios. Si la llamada a la API
+     * falla, los diccionarios se importan dinámicamente.
+     * Nota: Solo los diccionarios con contenido remoto y la bandera "live" usan el modo live.
+     * Los demás usan el modo dinámico para mejorar el rendimiento.
+     */
+    importMode: "fetch",
+  },
+};
+
+export default config;
+```
+
+Inicie el servidor Live Sync para envolver su aplicación:
+
+Ejemplo usando Next.js:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... otros scripts
+    "build": "next build",
+    "dev": "next dev",
+    "start": "npx intlayer live --with 'next start'",
+  },
+}
+```
+
+Ejemplo usando Vite:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... otros scripts
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "npx intlayer live --with 'vite start'",
+  },
+}
+```
+
+El servidor Live Sync envuelve su aplicación y aplica automáticamente el contenido actualizado a medida que llega.
+
+Para recibir notificaciones de cambios desde el CMS, el servidor Live Sync mantiene una conexión SSE con el backend. Cuando el contenido cambia en el CMS, el backend envía la actualización al servidor Live Sync, que escribe los nuevos diccionarios. Su aplicación reflejará la actualización en la siguiente navegación o recarga del navegador, sin necesidad de reconstrucción.
+
+Diagrama de flujo (CMS/Backend -> Servidor Live Sync -> Servidor de Aplicación -> Frontend):
+
+![Esquema de lógica de Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
+
+Cómo funciona:
+
+![Esquema de flujo Live Sync CMS/Backend/Servidor Live Sync/Servidor de Aplicación/Frontend](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
+
+## Flujo de trabajo de desarrollo (local)
+
+docs/ko/intlayer_CMS.md
+
+- En desarrollo, todos los diccionarios remotos se obtienen cuando la aplicación se inicia, para que puedas probar actualizaciones rápidamente.
+- Para probar Live Sync localmente con Next.js, envuelve tu servidor de desarrollo:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... otros scripts
+    "dev": "npx intlayer live --with 'next dev'",
+    // "dev": "npx intlayer live --with 'vite dev'", // Para Vite
+  },
+}
+```
+
+Habilita la optimización para que Intlayer aplique las transformaciones de importación en vivo durante el desarrollo:
+
+```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;
+```
+
+Esta configuración envuelve tu servidor de desarrollo con el servidor Live Sync, obtiene los diccionarios remotos al iniciar y transmite actualizaciones desde el CMS vía SSE. Actualiza la página para ver los cambios.
+
+## Notas y restricciones
+
+- Añade el origen de live sync a la política de seguridad de tu sitio (CSP). Asegúrate de que la URL de live sync esté permitida en `connect-src` (y en `frame-ancestors` si es relevante).
+- Live Sync no funciona con salida estática. Para Next.js, la página debe ser dinámica para recibir actualizaciones en runtime (por ejemplo, usa `generateStaticParams`, `generateMetadata`, `getServerSideProps` o `getStaticProps` adecuadamente para evitar restricciones de solo estático).
+- En el CMS, cada diccionario tiene una bandera `live`. Solo los diccionarios con `live=true` se obtienen a través de la API de live sync; los demás se importan dinámicamente y permanecen sin cambios en tiempo de ejecución.
+- La bandera `live` se evalúa para cada diccionario en el momento de la compilación. Si el contenido remoto no estaba marcado como `live=true` durante la compilación, debes recompilar para habilitar Live Sync para ese diccionario.
+- El servidor de live sync debe poder escribir en `.intlayer`. En contenedores, asegura el acceso de escritura a `/.intlayer`.
+
+## Enlaces útiles
+
+- [CMS de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md)
+- [Editor Visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md)
+- [Referencia de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md)
+- [Guía de Auto-alojamiento](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/self_hosting.md)

package/docs/es/releases/v9.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-06-14
-updatedAt: 2026-06-30
+updatedAt: 2026-07-08
 title: Nuevo Intlayer v9 - ¿Qué hay de nuevo?
 description: Descubre las novedades de Intlayer v9. Presentamos paquetes de compatibilidad directos para librerías i18n populares y soporte para Colecciones y Variantes.
 keywords:
@@ -201,6 +201,49 @@ const product = useIntlayer("product-copy", {
 
 ---
 
+## `@intlayer/analytics`: seguimiento de exposición de contenido y pruebas A/B
+
+Un nuevo paquete opcional, [`@intlayer/analytics`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md), te indica qué contenido ven realmente tus visitantes — y cierra el círculo con **Collections & Variants**, permitiéndote hacer pruebas A/B de contenido y medir conversiones por variante.
+
+- **Seguimiento a nivel de provider**: `IntlayerProvider` (React / Next.js / React Native) registra automáticamente eventos `page_view` al cargar, al cambiar de ruta y al cambiar de idioma.
+- **Seguimiento a nivel de nodo**: cada resolución de `useIntlayer` reporta un evento `content_exposure` — qué clave de diccionario, ruta de clave, idioma y, cuando aplica, qué **variante** A/B se mostró. Las exposiciones repetidas del mismo nodo dentro de una ventana de envío se combinan en un solo evento.
+- **Asignación determinista de A/B**: `getVariant(experimentKey, variants)` asigna una variante a cada sesión **sin ida y vuelta al servidor**, por lo que no hay parpadeo antes del primer renderizado.
+- **`useConversion()`**: atribuye un objetivo (registro, clic, compra…) a la variante a la que estuvo expuesta la sesión.
+- **Coste cero si no está instalado**: mismo patrón tree-shakeable que `@intlayer/editor` — `import()` dinámico envuelto en `try/catch`, más una variable de entorno en tiempo de compilación (`INTLAYER_ANALYTICS_ENABLED`) que elimina por completo la integración del bundle para las apps que no la activan.
+- **Sin nuevo esquema de configuración**: reutiliza `editor.backendURL` (endpoint de envío / auto-alojamiento) y `editor.clientId` (clave del proyecto, que también actúa como interruptor de activación).
+- **Respetuoso con la privacidad**: hash anónimo de sesión (SHA-256, sin almacenar ids en bruto), sin almacenamiento de IP, geolocalización aproximada solo por país, solicitudes enviadas por lotes aproximadamente cada 20 segundos.
+- **Panel**: una nueva página **Analytics** (visible en la barra lateral una vez seleccionado un proyecto) muestra usuarios activos, usuarios de hoy, usuarios de los últimos 7/30/90 días, un gráfico de evolución de visitantes y desgloses por idioma y ubicación.
+
+```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
+```
+
+Disponible hoy para React, Next.js y React Native (a través de `react-intlayer`); otras integraciones de frameworks (Vue, Svelte, Angular, …) están planificadas, siguiendo el mismo patrón de despliegue que `@intlayer/editor`. Consulta la [documentación de Analytics](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md) para la guía completa.
+
+---
+
 ## Plugin de Vite: Compilador Integrado y Proxy
 
 El plugin de Vite `intlayer()` ahora integra el **compilador** y el **proxy de enrutamiento de locales** directamente, por lo que la mayoría de proyectos solo necesitan un único plugin en `vite.config.ts`:
@@ -349,6 +392,7 @@ Si estás actualizando desde v8, ten en cuenta que la v9 no incluye cambios disr
 
 - [Guía de Paquetes Adaptadores de Compatibilidad](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compat/index.md)
 - [Diccionarios Dinámicos - Colecciones y Variantes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dynamic_dictionaries/index.md)
+- [Analytics - Seguimiento de exposición de contenido y pruebas A/B](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md)
 - [Referencia de Configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md)
 - [SDK de CMS - Acceso programático con @intlayer/api](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md)
 - [Guía de Auto-alojamiento](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/self_hosting.md)

package/docs/fr/cli/index.md

@@ -125,7 +125,7 @@ Pour voir comment configurer les locales disponibles ou d'autres paramètres, re
 
 ### Authentification
 
-- **[Connexion](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/login.md)** - S'authentifier auprès du CMS Intlayer et obtenir les identifiants d'accès
+- **[Connexion](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/login.md)** - S'authentifier auprès du CMS Intlayer et obtenir les identifiants d'accès
 
 ### Commandes principales
 

package/docs/fr/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-06-23
+updatedAt: 2026-07-11
 title: Configuration
 description: Apprenez à configurer Intlayer pour votre application. Comprenez les différents paramètres et options disponibles pour personnaliser Intlayer selon vos besoins.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 9.0.0
+    date: 2026-07-11
+    changes: "Ajout de la configuration `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,
   },
 
+  /**
+   * Configuration des analytics.
+   */
+  analytics: {
+    /**
+     * Indique si la collecte des analytics est activée (pages vues, expositions de contenu, événements A/B).
+     * Nécessite que `editor.clientId` soit défini pour l'attribution.
+     * Par défaut : false
+     */
+    enabled: true,
+
+    /**
+     * Millisecondes entre les envois groupés automatiques vers le backend.
+     * Par défaut : 20000
+     */
+    flushInterval: 20000,
+
+    /**
+     * Fraction des sessions à enregistrer, de 0 (aucune) à 1 (toutes).
+     * Par défaut : 1
+     */
+    sampleRate: 1,
+  },
+
   /**
    * Paramètres de traduction et de construction basés sur l'IA.
    */
@@ -671,6 +698,20 @@ Définit les paramètres liés à l'éditeur intégré, y compris le port du ser
 
 ---
 
+### Configuration des Analytics (Analytics Configuration)
+
+Définit les paramètres liés aux analytics Intlayer : la collecte du contenu réellement affiché aux utilisateurs (pages vues, expositions de contenu) et l'alimentation des tests A/B sur le contenu.
+
+Les analytics sont strictement optionnelles (opt-in) : rien n'est collecté à moins que `analytics.enabled` soit explicitement défini sur `true` **et** qu'une clé de projet (`editor.clientId`) soit configurée pour l'attribution. Lorsqu'elles sont désactivées (par défaut), l'intégralité de l'intégration analytics est éliminée du bundle de votre application (dead-code elimination).
+
+| Champ           | Description                                                                            | Type      | Par défaut | Exemple | Note                                                                                                                                    |
+| --------------- | -------------------------------------------------------------------------------------- | --------- | ---------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `enabled`       | Active la collecte des analytics (pages vues, expositions de contenu, événements A/B). | `boolean` | `false`    | `true`  | Nécessite que `editor.clientId` soit défini pour l'attribution ; sinon les analytics restent désactivées même si `enabled` vaut `true`. |
+| `flushInterval` | Millisecondes entre les envois groupés automatiques vers le backend.                   | `number`  | `20000`    | `10000` |                                                                                                                                         |
+| `sampleRate`    | Fraction des sessions à enregistrer, de `0` (aucune) à `1` (toutes).                   | `number`  | `1`        | `0.5`   | L'échantillonnage est déterministe par session, donc une session enregistrée rapporte tous ses événements (pas d'entonnoirs partiels).  |
+
+---
+
 ### Configuration du Routage (Routing Configuration)
 
 Paramètres contrôlant le comportement du routage, y compris la structure des URL, le stockage des locales et la gestion du middleware.

package/docs/fr/intlayer_CMS.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2026-06-30
+updatedAt: 2026-07-08
 title: Intlayer CMS | Externalisez votre contenu dans le CMS Intlayer
 description: Externalisez votre contenu dans le CMS Intlayer pour déléguer la gestion de votre contenu à votre équipe.
 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: "Déplacement de la section « Synchronisation en direct » vers sa propre page (live-sync.md), conservation d'une courte introduction avec lien ici"
   - version: 9.0.0
     date: 2026-06-30
     changes: "Ajout de la section Auto-hébergement : bootstrap Docker Compose, inventaire des services, configuration SDK, fonctionnalités optionnelles et notes de mise à niveau"
@@ -248,140 +251,7 @@ Vous pourrez alors voir et gérer votre dictionnaire dans le [CMS Intlayer](http
 
 La synchronisation en direct permet à votre application de refléter les modifications du contenu CMS en temps réel. Aucune reconstruction ou redéploiement n'est nécessaire. Lorsqu'elle est activée, les mises à jour sont diffusées vers un serveur de synchronisation en direct qui actualise les dictionnaires que votre application utilise.
 
-> La synchronisation en direct nécessite une connexion continue au serveur et est disponible dans le plan entreprise.
-
-Activez la synchronisation en direct en mettant à jour votre configuration Intlayer :
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  // ... autres paramètres de configuration
-  editor: {
-    /**
-     * Active le rechargement à chaud des configurations de langue lorsque des modifications sont détectées.
-     * Par exemple, lorsqu'un dictionnaire est ajouté ou mis à jour, l'application met à jour
-     * le contenu affiché sur la page.
-     *
-     * Comme le rechargement à chaud nécessite une connexion continue au serveur,
-     * il est uniquement disponible pour les clients du plan `enterprise`.
-     *
-     * Par défaut : false
-     */
-    liveSync: true,
-  },
-  dictionary: {
-    /**
-     * Contrôle la manière dont les dictionnaires sont importés :
-     *
-     * - "live" : Les dictionnaires sont récupérés dynamiquement via l'API Live Sync.
-     *   Remplace useIntlayer par useDictionaryDynamic.
-     *
-     * Remarque : Le mode live utilise l'API Live Sync pour récupérer les dictionnaires. Si l'appel API
-     * échoue, les dictionnaires sont importés dynamiquement.
-     * Remarque : Seuls les dictionnaires avec un contenu distant et le drapeau "live" utilisent le mode live.
-     * Les autres utilisent le mode dynamique pour des raisons de performance.
-     */
-    importMode: "fetch",
-  },
-};
-
-export default config;
-```
-
-Démarrez le serveur Live Sync pour envelopper votre application :
-
-Exemple avec Next.js :
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... autres scripts
-    "build": "next build",
-    "dev": "next dev",
-    "start": "npx intlayer live --with 'next start'",
-  },
-}
-```
-
-Exemple avec Vite :
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... autres scripts
-    "build": "vite build",
-    "dev": "vite dev",
-    "start": "npx intlayer live --with 'vite start'",
-  },
-}
-```
-
-Le serveur Live Sync enveloppe votre application et applique automatiquement le contenu mis à jour dès son arrivée.
-
-Pour recevoir les notifications de changement depuis le CMS, le serveur Live Sync maintient une connexion SSE avec le backend. Lorsque le contenu change dans le CMS, le backend transmet la mise à jour au serveur Live Sync, qui écrit les nouveaux dictionnaires. Votre application reflétera la mise à jour lors de la prochaine navigation ou du rechargement du navigateur, aucune reconstruction n’est nécessaire.
-
-Organigramme (CMS/Backend -> Serveur Live Sync -> Serveur d’application -> Frontend) :
-
-![Schéma logique Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
-
-Comment cela fonctionne :
-
-![Schéma du flux Live Sync CMS/Backend/Serveur Live Sync/Serveur d’application/Frontend](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
-
-### Flux de travail en développement (local)
-
-- En développement, tous les dictionnaires distants sont récupérés au démarrage de l'application, ce qui vous permet de tester rapidement les mises à jour.
-- Pour tester Live Sync localement avec Next.js, encapsulez votre serveur de développement :
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... autres scripts
-    "dev": "npx intlayer live --with 'next dev'",
-    // "dev": "npx intlayer live --with 'vite dev'", // Pour Vite
-  },
-}
-```
-
-Activez l'optimisation afin qu'Intlayer applique les transformations d'importation Live pendant le développement :
-
-```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;
-```
-
-Cette configuration encapsule votre serveur de développement avec le serveur Live Sync, récupère les dictionnaires distants au démarrage et diffuse les mises à jour du CMS via SSE. Rafraîchissez la page pour voir les changements.
-
-Notes et contraintes :
-
-- Ajoutez l'origine de live sync à votre politique de sécurité du site (CSP). Assurez-vous que l'URL de live sync est autorisée dans `connect-src` (et `frame-ancestors` si pertinent).
-- Live Sync ne fonctionne pas avec une sortie statique. Pour Next.js, la page doit être dynamique pour recevoir les mises à jour à l'exécution (par exemple, utilisez `generateStaticParams`, `generateMetadata`, `getServerSideProps` ou `getStaticProps` de manière appropriée pour éviter les contraintes de statique complète).
-
-Cette configuration enveloppe votre serveur de développement avec le serveur Live Sync, récupère les dictionnaires distants au démarrage, et diffuse les mises à jour du CMS via SSE. Actualisez la page pour voir les changements.
-
-Notes et contraintes :
-
-- Ajoutez l'origine du live sync à la politique de sécurité de votre site (CSP). Assurez-vous que l'URL du live sync est autorisée dans `connect-src` (et `frame-ancestors` si pertinent).
-- Live Sync ne fonctionne pas avec une sortie statique. Pour Next.js, la page doit être dynamique pour recevoir les mises à jour à l'exécution (par exemple, utilisez `generateStaticParams`, `generateMetadata`, `getServerSideProps` ou `getStaticProps` de manière appropriée pour éviter les contraintes de statique complète).
-- Dans le CMS, chaque dictionnaire possède un indicateur `live`. Seuls les dictionnaires avec `live=true` sont récupérés via l'API de synchronisation en direct ; les autres sont importés dynamiquement et restent inchangés à l'exécution.
-- L'indicateur `live` est évalué pour chaque dictionnaire au moment de la compilation. Si le contenu distant n'était pas marqué `live=true` lors de la compilation, vous devez recompiler pour activer la synchronisation en direct pour ce dictionnaire.
-- Le serveur de synchronisation en direct doit pouvoir écrire dans `.intlayer`. Dans les conteneurs, assurez-vous d'avoir un accès en écriture à `/.intlayer`.
+Pour le guide de configuration complet (activation, démarrage du serveur Live Sync, flux de travail en développement local et contraintes), consultez la [documentation Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/live-sync.md).
 
 ## Auto-hébergement