Как организовать взаимодействие бэкенда и фронтенда?

Question

[eugenedrvnk]

Я разрабатываю приложение, связанное с донатами на стримах.

У меня есть такие модели, как "alert" и "alert-template".
"alert" представляет собой набор различных параметров для определения, когда уведомление о донате должно быть отображено.
"alert-template" - это визуальная конфигурация для "alert" (изображение, звук, позиционирование).

В конечном итоге на стриме это должно выглядеть так:

Сейчас я работаю над частью для стримера, где он может управлять этими уведомлениями.
У меня есть страница /alerts, и на этой странице мне нужно запросить все уведомления для пользователя, включая alert-template.

Как это лучше сделать?

- создать бэкенд, который способен обрабатывать маршрут вроде api/alerts?include="alert-template".
- создать бэкенд, сосредоточенный непосредственно на страницах фронтенд-приложения, и затем путь api/frontend/alerts уже будет содержать все необходимые данные, включая alerts и alert-templates.
- создать бэкенд, у которого просто есть два отдельных маршрута для alert и alert-template, и каким-то образом обрабатывать это таким образом.

Я пытался найти какую-то информацию в интернете о том, как обрабатывать вложенные объекты в API, и пытался понять, является ли это нормальной практикой, но, к сожалению, информации об этом было немного.

Comments

[Kentavr16]

Что вы подразумеваете под вложенными обьектами? И насколько понял вопрос скорее про архитектуру приложения, а не бд. Какой стак используете?

[eugenedrvnk]

@Kentavr16
Стек - next/nest/mysql.
Под вложенными объектами подразумеваю ответ от сервера в формате:

// alerts
  [
    {
      id: '1',
      name: 'test1',
      isActive: false,
      alertTemplate: {
        id: '5',
        name: 'alert template',
        width: 800,
        height: 600,
        imageTop: 100,
        imageLeft: 300,
        ...
      }
    },
    {
      id: '2',
      name: 'test2',
      isActive: false,
      alertTemplate: {
        id: '7',
        name: 'alert template2',
        width: 800,
        height: 600,
        imageTop: 100,
        imageLeft: 300,
        ...
      }
    },
  ]

Следуя большинству материалу в интернете, вместо вложенного alertTemplate рекомендуется просто добавлять ссылку на получения соотвествующего alertTemplate'а. Но насколько я понимаю - это многократно увеличит кол-во запросов и это вряд ли есть хорошо.

[Kentavr16]

eugenedrvnk, но ведь это обычный json. Насколько я понимаю -
1) api/alerts?include="alert-template". - Это скорее про метод отправки,а не про апи.
2) api/frontend/alerts - это эндпоинт вашего апи? Абсолютно нормально, если бекент формирует json, который потом по этому апи попадет в приложение на фронт. Проблемы не вижу. Причем express и его "потомки" насколько помню очень хорошо работают с json.
3)

создать бэкенд, у которого просто есть два отдельных маршрута для alert и alert-template, и каким-то образом обрабатывать это таким образом

это я не совсем понял. Вы имеете в виду создавать два эндпоинта только потому что на беке данные хранятся в разных таблицах? Нет смысла.
Апи может отдавать сколько угодно данных в каком угодно формате. Массивы, json , хоть строки. Но на практике апи должно соответствовать стандартам rest, и уметь в CRUD. Об этом оооочень много статей. вот к примеру пример. В вашем случае для начала создайте какой-либо путь, по которому зарегистрированый (вы ведь авторизацию делаете?) пользователь получит json с 2 объектами, или как вам будет удобнее.

[Kentavr16]

Если у вас один алерт имеет один свой отдельный темплейт, свяжите их отношениями "один к одному" в sql,и пусть бек формирует из них один объект. Это вроде простая задачка.