@intlayer/docs 6.0.1 → 6.0.2

package/docs/fr/intlayer_CMS.md

@@ -1,11 +1,11 @@
 ---
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
-title: CMS Intlayer | Externez votre contenu dans le CMS Intlayer
-description: Externez votre contenu dans le CMS Intlayer pour déléguer la gestion de votre contenu à votre équipe.
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
+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:
   - CMS
-  - Éditeur visuel
+  - Éditeur Visuel
   - Internationalisation
   - Documentation
   - Intlayer
@@ -21,7 +21,7 @@ youtubeVideo: https://www.youtube.com/watch?v=UDDTnirwi_4
 
 # Documentation du Système de Gestion de Contenu (CMS) Intlayer
 
-<iframe title="Visual Editor + CMS for Your Web App: Intlayer Explained" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/UDDTnirwi_4?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
+<iframe title="Éditeur Visuel + CMS pour votre application Web : Intlayer expliqué" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/UDDTnirwi_4?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
 
 Le CMS Intlayer est une application qui vous permet d'externaliser le contenu d'un projet Intlayer.
 
@@ -33,31 +33,31 @@ Pour cela, Intlayer introduit le concept de « dictionnaires distants ».
 
 Intlayer fait une distinction entre les dictionnaires « locaux » et « distants ».
 
-- Un dictionnaire 'local' est un dictionnaire déclaré dans votre projet Intlayer. Comme le fichier de déclaration d'un bouton ou de votre barre de navigation. Externaliser votre contenu n'a pas de sens dans ce cas car ce contenu n'est pas censé changer fréquemment.
+- Un dictionnaire « local » est un dictionnaire déclaré dans votre projet Intlayer. Par exemple, le fichier de déclaration d’un bouton ou votre barre de navigation. Externaliser votre contenu n’a pas de sens dans ce cas, car ce contenu n’est pas censé changer fréquemment.
 
-- Un dictionnaire 'distant' est un dictionnaire géré via le CMS Intlayer. Cela peut être utile pour permettre à votre équipe de gérer directement le contenu de votre site web, et vise également à utiliser des fonctionnalités de tests A/B et d'optimisation automatique pour le SEO.
+- Un dictionnaire « distant » est un dictionnaire géré via le CMS Intlayer. Cela peut être utile pour permettre à votre équipe de gérer directement votre contenu sur votre site web, et vise également à utiliser des fonctionnalités de tests A/B et d’optimisation automatique SEO.
 
 ## Éditeur visuel vs CMS
 
-L'[éditeur visuel Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) est un outil qui vous permet de gérer votre contenu dans un éditeur visuel pour les dictionnaires locaux. Une fois une modification effectuée, le contenu sera remplacé dans la base de code. Cela signifie que l'application sera reconstruite et que la page sera rechargée pour afficher le nouveau contenu.
+L’éditeur [Intlayer Visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) est un outil qui vous permet de gérer votre contenu dans un éditeur visuel pour les dictionnaires locaux. Une fois qu’une modification est effectuée, le contenu sera remplacé dans la base de code. Cela signifie que l’application sera reconstruite et que la page sera rechargée pour afficher le nouveau contenu.
 
-En revanche, le CMS Intlayer est un outil qui vous permet de gérer votre contenu dans un éditeur visuel pour les dictionnaires distants. Une fois une modification effectuée, le contenu **n'impactera pas** votre base de code. Et le site web affichera automatiquement le contenu modifié.
+En revanche, le CMS Intlayer est un outil qui vous permet de gérer votre contenu dans un éditeur visuel pour les dictionnaires distants. Une fois qu’une modification est effectuée, le contenu n’impactera **pas** votre base de code. Et le site web affichera automatiquement le contenu modifié.
 
 ## Intégration
 
-Pour plus de détails sur l'installation du package, consultez la section correspondante ci-dessous :
+Pour plus de détails sur la façon d’installer le package, consultez la section correspondante ci-dessous :
 
 ### Intégration avec Next.js
 
-Pour l'intégration avec Next.js, consultez le [guide d'installation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_15.md).
+Pour l’intégration avec Next.js, référez-vous au [guide d’installation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_15.md).
 
 ### Intégration avec Create React App
 
-Pour l'intégration avec Create React App, consultez le [guide d'installation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_create_react_app.md).
+Pour l’intégration avec Create React App, référez-vous au [guide d’installation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_create_react_app.md).
 
 ### Intégration avec Vite + React
 
-Pour l'intégration avec Vite + React, consultez le [guide d'installation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+react.md).
+Pour l’intégration avec Vite + React, référez-vous au [guide d’installation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+react.md).
 
 ## Configuration
 
@@ -81,7 +81,7 @@ const config: IntlayerConfig = {
      * Obligatoire
      *
      * L'ID client et le secret client sont nécessaires pour activer l'éditeur.
-     * Ils permettent d'identifier l'utilisateur qui modifie le contenu.
+     * Ils permettent d'identifier l'utilisateur qui édite le contenu.
      * Ils peuvent être obtenus en créant un nouveau client dans le tableau de bord Intlayer - Projets (https://intlayer.org/dashboard/projects).
      * clientId: process.env.INTLAYER_CLIENT_ID,
      * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
@@ -95,7 +95,7 @@ const config: IntlayerConfig = {
      * Dans le cas où vous hébergez vous-même le CMS Intlayer, vous pouvez définir l'URL du CMS.
      *
      * L'URL du CMS Intlayer.
-     * Par défaut, il est défini sur https://intlayer.org
+     * Par défaut, elle est définie sur https://intlayer.org
      */
     cmsURL: process.env.INTLAYER_CMS_URL,
 
@@ -104,8 +104,8 @@ const config: IntlayerConfig = {
      *
      * Dans le cas où vous hébergez vous-même le CMS Intlayer, vous pouvez définir l'URL du backend.
      *
-     * L'URL du CMS Intlayer.
-     * Par défaut, il est défini sur https://back.intlayer.org
+     * L'URL du backend Intlayer.
+     * Par défaut, elle est définie sur https://back.intlayer.org
      */
     backendURL: process.env.INTLAYER_BACKEND_URL,
   },
@@ -128,10 +128,10 @@ const config = {
     applicationURL: process.env.INTLAYER_APPLICATION_URL,
 
     /**
-     * Obligatoire
+     * Requis
      *
      * L'ID client et le secret client sont nécessaires pour activer l'éditeur.
-     * Ils permettent d'identifier l'utilisateur qui modifie le contenu.
+     * Ils permettent d'identifier l'utilisateur qui édite le contenu.
      * Ils peuvent être obtenus en créant un nouveau client dans le tableau de bord Intlayer - Projets (https://intlayer.org/dashboard/projects).
      * clientId: process.env.INTLAYER_CLIENT_ID,
      * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
@@ -145,7 +145,7 @@ const config = {
      * Dans le cas où vous hébergez vous-même le CMS Intlayer, vous pouvez définir l'URL du CMS.
      *
      * L'URL du CMS Intlayer.
-     * Par défaut, il est défini sur https://intlayer.org
+     * Par défaut, elle est définie sur https://intlayer.org
      */
     cmsURL: process.env.INTLAYER_CMS_URL,
 
@@ -154,8 +154,8 @@ const config = {
      *
      * Dans le cas où vous hébergez vous-même le CMS Intlayer, vous pouvez définir l'URL du backend.
      *
-     * L'URL du backend Intlayer.
-     * Par défaut, il est défini sur https://back.intlayer.org
+     * L'URL du CMS Intlayer.
+     * Par défaut, elle est définie sur https://back.intlayer.org
      */
     backendURL: process.env.INTLAYER_BACKEND_URL,
   },
@@ -170,7 +170,7 @@ const config = {
   // ... autres paramètres de configuration
   editor: {
     /**
-     * Obligatoire
+     * Requis
      *
      * L'URL de l'application.
      * C'est l'URL ciblée par l'éditeur visuel.
@@ -178,11 +178,11 @@ const config = {
     applicationURL: process.env.INTLAYER_APPLICATION_URL,
 
     /**
-     * Obligatoire
+     * Requis
      *
      * L'ID client et le secret client sont nécessaires pour activer l'éditeur.
-     * Ils permettent d'identifier l'utilisateur qui modifie le contenu.
-     * Ils peuvent être obtenus en créant un nouveau client dans le tableau de bord Intlayer - Projets (https://intlayer.org/dashboard/projects).
+     * Ils permettent d'identifier l'utilisateur qui édite le contenu.
+     * Ils peuvent être obtenus en créant un nouveau client dans le Tableau de bord Intlayer - Projets (https://intlayer.org/dashboard/projects).
      * clientId: process.env.INTLAYER_CLIENT_ID,
      * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
      */
@@ -195,7 +195,8 @@ const config = {
      * Dans le cas où vous hébergez vous-même le CMS Intlayer, vous pouvez définir l'URL du CMS.
      *
      * L'URL du CMS Intlayer.
-     * Par défaut, il est défini sur https://intlayer.org
+     * Par défaut, elle est définie sur https://intlayer.org
+     */
     cmsURL: process.env.INTLAYER_CMS_URL,
 
     /**
@@ -203,7 +204,7 @@ const config = {
      *
      * Dans le cas où vous hébergez vous-même le CMS Intlayer, vous pouvez définir l'URL du backend.
      *
-     * L'URL du backend Intlayer.
+     * L'URL du CMS Intlayer.
      * Par défaut, elle est définie sur https://back.intlayer.org
      */
     backendURL: process.env.INTLAYER_BACKEND_URL,
@@ -213,37 +214,37 @@ const config = {
 module.exports = config;
 ```
 
-> Si vous n'avez pas d'ID client et de secret client, vous pouvez les obtenir en créant un nouveau client dans le [tableau de bord Intlayer - Projets](https://intlayer.org/dashboard/projects).
+> Si vous ne disposez pas d'un ID client et d'un secret client, vous pouvez les obtenir en créant un nouveau client dans le [Tableau de bord Intlayer - Projets](https://intlayer.org/dashboard/projects).
 
-> Pour voir tous les paramètres disponibles, consultez la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
+> Pour voir tous les paramètres disponibles, référez-vous à la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
 
-## Utiliser le CMS
+## Utilisation du CMS
 
-### Pousser votre configuration
+### Poussez votre configuration
 
-Pour configurer le CMS Intlayer, vous pouvez utiliser les commandes du [CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_cli.md).
+Pour configurer le CMS Intlayer, vous pouvez utiliser les commandes du [intlayer CLI](https://github.com/aymericzip/intlayer/tree/main/docs/fr/intlayer_cli.md).
 
 ```bash
 npx intlayer config push
 ```
 
-> Si vous utilisez des variables d'environnement dans votre fichier `intlayer.config.ts`, vous pouvez spécifier l'environnement souhaité en utilisant l'argument `--env` :
+> Si vous utilisez des variables d'environnement dans votre fichier de configuration `intlayer.config.ts`, vous pouvez spécifier l'environnement souhaité en utilisant l'argument `--env` :
 
 ```bash
 npx intlayer config push --env production
 ```
 
-Cette commande télécharge votre configuration sur le CMS Intlayer.
+Cette commande téléverse votre configuration vers le CMS Intlayer.
 
 ### Pousser un dictionnaire
 
-Pour transformer vos dictionnaires locaux en dictionnaires distants, vous pouvez utiliser les commandes du [CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_cli.md).
+Pour transformer vos dictionnaires de locale en un dictionnaire distant, vous pouvez utiliser les commandes du [intlayer CLI](https://github.com/aymericzip/intlayer/tree/main/docs/fr/intlayer_cli.md).
 
 ```bash
 npx intlayer dictionary push -d my-first-dictionary-key
 ```
 
-> Si vous utilisez des variables d'environnement dans votre fichier `intlayer.config.ts`, vous pouvez spécifier l'environnement souhaité en utilisant l'argument `--env` :
+> Si vous utilisez des variables d'environnement dans votre fichier de configuration `intlayer.config.ts`, vous pouvez spécifier l'environnement souhaité en utilisant l'argument `--env` :
 
 ```bash
 npx intlayer dictionary push -d my-first-dictionary-key --env production
@@ -253,14 +254,15 @@ Cette commande télécharge vos dictionnaires de contenu initiaux, les rendant d
 
 ### Modifier le dictionnaire
 
-Vous pourrez ensuite voir et gérer votre dictionnaire dans le [CMS Intlayer](https://intlayer.org/dashboard/content).
+Vous pourrez alors voir et gérer votre dictionnaire dans le [CMS Intlayer](https://intlayer.org/dashboard/content).
 
-## Rechargement à chaud
+## Synchronisation en direct
 
-Le CMS Intlayer est capable de recharger à chaud les dictionnaires lorsqu'un changement est détecté.
+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.
 
-Sans le rechargement à chaud, une nouvelle construction de l'application sera nécessaire pour afficher le nouveau contenu.
-En activant la configuration [`liveSync`](https://intlayer.org/doc/concept/configuration#editor-configuration), l'application remplacera automatiquement le contenu mis à jour lorsqu'il est détecté.
+> 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"
 import type { IntlayerConfig } from "intlayer";
@@ -268,18 +270,32 @@ import type { IntlayerConfig } from "intlayer";
 const config: IntlayerConfig = {
   // ... autres paramètres de configuration
   editor: {
-    // ... autres paramètres de configuration
-
     /**
-     * Indique si l'application doit recharger à chaud les configurations locales lorsqu'un changement est détecté.
-     * Par exemple, lorsqu'un nouveau dictionnaire est ajouté ou mis à jour, l'application mettra à jour le contenu à afficher sur la page.
+     * 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`.
+     * 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,
   },
+  build: {
+    /**
+     * 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: "live",
+  },
 };
 
 export default config;
@@ -290,18 +306,32 @@ export default config;
 const config = {
   // ... autres paramètres de configuration
   editor: {
-    // ... autres paramètres de configuration
-
     /**
-     * Indique si l'application doit recharger à chaud les configurations locales lorsqu'un changement est détecté.
-     * Par exemple, lorsqu'un nouveau dictionnaire est ajouté ou mis à jour, l'application mettra à jour le contenu à afficher sur la page.
+     * 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`.
+     * 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,
   },
+  build: {
+    /**
+     * 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.
+     * Note : 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: "live",
+  },
 };
 
 export default config;
@@ -312,29 +342,176 @@ export default config;
 const config = {
   // ... autres paramètres de configuration
   editor: {
-    // ... autres paramètres de configuration
-
     /**
-     * Indique si l'application doit recharger à chaud les configurations locales lorsqu'un changement est détecté.
-     * Par exemple, lorsqu'un nouveau dictionnaire est ajouté ou mis à jour, l'application mettra à jour le contenu à afficher sur la page.
+     * 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`.
+     * 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,
+
+    /**
+     * Le port du serveur Live Sync.
+     *
+     * Par défaut : 4000
+     */
+    liveSyncPort: 4000,
+
+    /**
+     * L'URL du serveur Live Sync.
+     *
+     * Par défaut : http://localhost:{liveSyncPort}
+     */
+    liveSyncURL: "https://live.example.com",
+  },
+  build: {
+    /**
+     * 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 des indicateurs "live" utilisent le mode live.
+     * Les autres utilisent le mode dynamique pour des raisons de performance.
+     */
+    importMode: "live",
+  },
+};
+
+module.exports = 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 --process 'next start'",
+  },
+}
+```
+
+Exemple avec Vite :
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... autres scripts
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "npx intlayer live --process '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 --process 'next dev'",
+    // "dev": "npx intlayer live --process '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"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  build: {
+    optimize: true,
+    importMode: "live",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  build: {
+    optimize: true,
+    importMode: "live",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  build: {
+    optimize: true,
+    importMode: "live",
   },
 };
 
 module.exports = config;
 ```
 
-Le rechargement à chaud remplace le contenu à la fois côté serveur et côté client.
+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 :
 
-- Côté serveur, vous devez vous assurer que le processus de l'application a un accès en écriture au répertoire `.intlayer/dictionaries`.
-- Côté client, le rechargement à chaud permet à l'application de recharger à chaud le contenu dans le navigateur, sans avoir besoin de recharger la page. Cependant, cette fonctionnalité est uniquement disponible pour les composants clients.
+- 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).
 
-> Comme le rechargement à chaud nécessite une connexion continue au serveur via un `EventListener`, il est uniquement disponible pour les clients du plan `enterprise`.
+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`.
 
 ## Débogage
 
@@ -342,14 +519,19 @@ Si vous rencontrez des problèmes avec le CMS, vérifiez les points suivants :
 
 - L'application est en cours d'exécution.
 
-- Les paramètres de configuration de l'[éditeur](https://intlayer.org/doc/concept/configuration#editor-configuration) sont correctement définis dans votre fichier de configuration Intlayer.
-  - Champs obligatoires :
-    - L'URL de l'application doit correspondre à celle que vous avez définie dans la configuration de l'éditeur (`applicationURL`).
-    - L'URL du CMS.
+- La configuration de [`editor`](https://intlayer.org/doc/concept/configuration#editor-configuration) est correctement définie dans votre fichier de configuration Intlayer.
+  - Champs requis :
+- L'URL de l'application doit correspondre à celle que vous avez définie dans la configuration de l'éditeur (`applicationURL`).
+- L'URL du CMS
 
 - Assurez-vous que la configuration du projet a été poussée vers le CMS Intlayer.
-- L'éditeur visuel utilise une iframe pour afficher votre site web. Assurez-vous que la politique de sécurité du contenu (CSP) de votre site web autorise l'URL du CMS comme `frame-ancestors` ('https://intlayer.org' par défaut). Vérifiez la console de l'éditeur pour toute erreur.
+
+- L'éditeur visuel utilise un iframe pour afficher votre site web. Assurez-vous que la politique de sécurité du contenu (Content Security Policy, CSP) de votre site autorise l'URL du CMS en tant que `frame-ancestors` ('https://intlayer.org' par défaut). Vérifiez la console de l'éditeur pour toute erreur.
 
 ## Historique de la documentation
 
-- 5.5.10 - 2025-06-29 : Historique initial
+| Version | Date       | Modifications                                              |
+| ------- | ---------- | ---------------------------------------------------------- |
+| 6.0.1   | 2025-09-22 | Ajout de la documentation sur la synchronisation en direct |
+| 6.0.0   | 2025-09-04 | Remplacement du champ `hotReload` par `liveSync`           |
+| 5.5.10  | 2025-06-29 | Historique initial                                         |