Server Driven UI (SDUI) — архитектурный подход, при котором сервер определяет не только данные, но и структуру пользовательского интерфейса (какие компоненты, в каком порядке и с какими параметрами отрисовать на клиенте)
🍃В обычном приложении клиент «знает», как показать экран
🍃В SDUI клиент превращается в «движок рендеринга» — он просто отрисовывает то, что пришло с сервера в виде декларативного описания (обычно JSON)
Подход также называют BDUI (Backend-Driven UI)
⭕️В традиционной (client-driven) модели сервер отдаёт только данные, а клиент решает, как их показать:
Сервер ➡️ отправляет данные (
{"price": 1990, "currency": "RUB"})Клиент ➡️ знает, как отобразить эти данные на конкретной платформе
🟠В SDUI сервер отдаёт описание интерфейса:
Сервер ➡️ отправляет компоненты и их свойства (
{"type": "price_label", "props": {"text": "1 990 ₽"}})Клиент ➡️ по описанию собирает экран из готовых нативных компонентов
❗️Ключевое отличие: логика «что и где показать» переезжает с клиента на сервер
Как работает
Система состоит из трёх частей:
1⃣ UI-кит (компонентная база) — набор реализованных на каждой платформе нативных компонентов (кнопка, карточка, баннер, список). Это «общий язык» между сервером и клиентом.
2⃣ Движок рендеринга — клиентский механизм, который по описанию из JSON собирает экран: находит нужный компонент в UI-ките и передаёт ему свойства.
3⃣ Контракт (директивы) — описание экрана, которое сервер отдаёт клиенту.
Типовой поток
1. На сервере формируется описание экрана (какие компоненты, порядок, свойства, действия).
2. Клиент запрашивает конфигурацию и получает JSON
3. Движок рендеринга разбирает JSON, по
type находит компоненты в реестре и отрисовывает их4. Пользователь взаимодействует (например, нажимает кнопку) — клиент выполняет действие (
action), пришедшее вместе с компонентом5. Нужно поменять экран — правка конфигурации на сервере, при следующем открытии приложения пользователи видят новый UI без обновления из стора
Принципы SDUI
⭕️ Начинать с экрана, а не с данных. API проектируется под то, что нужно показать, а не под структуру БД (demand-driven подход).
⭕️ Минимум логики на клиенте. Любой
if/else про «что показать» — кандидат на переезд на сервер. Иначе логика дублируется на каждой платформе.⭕️ Отдавать продуктную информацию, а не доменные данные. Вместо
price: 1990 + currency сервер сразу отдаёт готовую строку "1 990 ₽". Форматирование, локализация, скругления — на сервере.⭕️ Единая дизайн-система. Все клиенты используют общий UI-кит, тогда серверная инструкция «отрисуй primary-кнопку» даст одинаковый результат везде.
⭕️ Внедрять инкрементально. Не переписывать всё приложение сразу, а начать с одного экрана или компонента (например, баннера на главной).
Плюсы и минусы
✅ мгновенные обновления UI — без релизов в сторах и ожидания обновления у пользователей
✅ кроссплатформенность из коробки — один JSON рендерится на iOS, Android, Web
✅ простой A/B-тестинг и персонализация — разный UI разным сегментам одним изменением на сервере
✅ единообразие платформ — все клиенты синхронны, расхождений почти нет
✅ снижение нагрузки на мобильную разработку — фронт не верстает каждый экран с нуля
➖ без интернета UI не загрузится; нужны кэширование и фолбэки, иначе пустые экраны
➖ сложность старта — нужен UI-кит, движок рендеринга и серверная часть под это
➖ двойная поддержка компонентов — компоненты живут и на клиенте (реализация), и на сервере (описание)
➖сложнее отладка — труднее понять, почему экран выглядит именно так (собрался динамически)
➖ риск «зашить» бизнес-логику в UI — границы между слоями легко размыть
Где используется
Когда много платформ, а интерфейс меняется часто и под разные сегменты пользователей:
🟠 Travel- и маркетплейс-платформы — быстрые итерации UI в разделах с динамическим контентом
🟠 соцсети и стриминговые сервисы — мгновенный rollout изменений и экспериментов
🟠 e-commerce и маркетплейсы — разные раскладки витрин для разных продавцов (например, блок «Бестселлеры» только для крупных магазинов)
🟠когда нужно обновлять интерфейс с сервера, не зависеть от сторов
📎 Материалы
1. Чем полезен Server Driven UI
2. Яндекс выпускает DivKit — фреймворк для server-driven UI с открытым кодом
3. Server Driven UI в Альфа-Банке
4. Server-Driven UI архитектура: server-driven vs content-driven
5. Как работает Server-Driven UI и зачем он фронтендеру
#архитектура
➿➿➿➿➿➿➿➿➿➿
🧑🎓 Более поробное сравнение в базе знаний по системному анализу