Живая синхронизация

Живая синхронизация позволяет вашему приложению отражать изменения контента CMS в режиме реального времени. Пересборка или повторный деплой не требуются. Когда функция включена, обновления передаются на сервер живой синхронизации, который обновляет словари, используемые вашим приложением.

Содержание

Включение Live Sync

Включите живую синхронизацию, обновив конфигурацию Intlayer:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... другие настройки конфигурации
  editor: {
    /**
     * Включает горячую перезагрузку конфигураций локалей при обнаружении изменений.
     * Например, когда словарь добавляется или обновляется, приложение обновляет
     * отображаемый на странице контент.
     *
     * Поскольку горячая перезагрузка требует постоянного подключения к серверу,
     * она доступна только для клиентов с тарифным планом `enterprise`.
     *
     * По умолчанию: false
     */
    liveSync: true,
  },
  dictionary: {
    /**
     * Управляет способом импорта словарей:
     *
     * - "fetch": словари загружаются динамически с использованием Live Sync API.
     *   Заменяет useIntlayer на useDictionaryDynamic.
     *
     * Примечание: Режим "fetch" использует Live Sync API для загрузки словарей. Если вызов API
     * не удаётся, словари импортируются динамически.
     * Примечание: Только словари с удалённым содержимым и флагом "live" используют режим "fetch".
     * Остальные используют динамический режим для повышения производительности.
     */
    importMode: "fetch",
  },
};

export default config;

Запустите сервер Live Sync, чтобы обернуть ваше приложение:

Пример использования автономного сервера:

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

Вы также можете использовать сервер вашего приложения параллельно, используя аргумент --process.

Пример с использованием Next.js:

{  "scripts": {    // ... другие скрипты    "build": "next build",    "dev": "next dev",    "start": "npx intlayer live --with 'next start'",  },}

Пример с использованием Vite:

{  "scripts": {    // ... другие скрипты    "build": "vite build",    "dev": "vite dev",    "start": "npx intlayer live --with 'vite start'",  },}

Сервер Live Sync оборачивает ваше приложение и автоматически применяет обновлённый контент по мере его поступления.

Чтобы получать уведомления об изменениях из CMS, сервер Live Sync поддерживает SSE-соединение с бэкендом. Когда контент в CMS изменяется, бэкенд пересылает обновление серверу Live Sync, который записывает новые словари. Ваше приложение отобразит обновление при следующей навигации или перезагрузке браузера, пересборка не требуется.

Блок-схема (CMS/Backend -> Live Sync Server -> Application Server -> Frontend):

Как это работает:

Рабочий процесс разработки (локально)

• В процессе разработки все удалённые словари загружаются при запуске приложения, чтобы вы могли быстро тестировать обновления.
• Чтобы протестировать Live Sync локально с Next.js, оберните ваш dev-сервер:

{  "scripts": {    // ... другие скрипты    "dev": "npx intlayer live --with 'next dev'",    // "dev": "npx intlayer live --with 'vite dev'", // Для Vite  },}

Включите оптимизацию, чтобы Intlayer применял трансформации Live импорта во время разработки:

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, // default: process.env.NODE_ENV === 'production'
  },
};

export default config;

Эта настройка оборачивает ваш dev-сервер сервером Live Sync, загружает удалённые словари при запуске и транслирует обновления из CMS через SSE. Обновите страницу, чтобы увидеть изменения.

Примечания и ограничения

• Добавьте источник live sync в политику безопасности вашего сайта (CSP). Убедитесь, что URL live sync разрешён в connect-src (и в frame-ancestors, если это актуально).
• Live Sync не работает со статическим выводом. Для Next.js страница должна быть динамической, чтобы получать обновления во время выполнения (например, используйте generateStaticParams, generateMetadata, getServerSideProps или getStaticProps соответствующим образом, чтобы избежать ограничений полностью статического вывода).
• В CMS у каждого словаря есть флаг live. Только словари с live=true загружаются через API live sync; остальные импортируются динамически и остаются неизменными во время выполнения.
• Флаг live оценивается для каждого словаря во время сборки. Если удалённый контент не был помечен как live=true во время сборки, необходимо выполнить повторную сборку, чтобы включить Live Sync для этого словаря.
• Сервер live sync должен иметь возможность записывать в .intlayer. В контейнерах убедитесь, что есть права на запись в /.intlayer.

Полезные ссылки

• Intlayer CMS
• Визуальный редактор Intlayer
• Справочник по конфигурации
• Руководство по самостоятельному размещению