Synchronisation en direct

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.

Table des matières

Activer la synchronisation en direct

Activez la synchronisation en direct en mettant à jour votre configuration Intlayer :

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 utilisant un serveur autonome :

{
  "scripts": {
    // ... autres scripts
    "live:start": "npx intlayer live",
  },
}

Vous pouvez également utiliser votre serveur d'application en parallèle en utilisant l'argument --process.

Exemple avec Next.js :

{
  "scripts": {
    // ... autres scripts
    "build": "next build",
    "dev": "next dev",
    "start": "npx intlayer live --with 'next start'",
  },
}

Exemple avec Vite :

{
  "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) :

Comment cela fonctionne :

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 :

{
  "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 :

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 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.

Liens utiles

• CMS Intlayer
• Éditeur Visuel Intlayer
• Référence de configuration
• Guide d'auto-hébergement