Как реализовать кэширование для Angular SPA

Question

Я разрабатываю приложение Angular 7 с бэкэндом в ядре ASP.NET.Приложение размещено в службе приложений Azure, и там же находится база данных SQL.Я заметил, что есть некоторые таблицы, которые редко меняются, например, таблица Стран, но, с другой стороны, мне нужно часто использовать их в моем SPA.Интересно, какое решение для кэширования подойдет для моего случая.

Я пока не пробовал ничего конкретного.Насколько я понимаю, если я кеширую Страны на стороне SPA, я не смогу получить доступ к вновь добавленным (что происходит время от времени), пока пользователь не перезагрузит страницу и приложение не перезапустится.Я знаю, что сервис вроде Redis cache решит проблему, но он довольно дорогой.Поскольку служба приложений Azure может масштабироваться, я думаю, что не могу использовать такие решения, как SignarR.Я думал об использовании push-уведомлений, например, https://www.telerik.com/blogs/push-notifications-in-asp-net-core-with-angular

. Хотелось бы услышать, согласен ли я со своими проблемами и какое рекомендуемое решение, с плюсами и минусами, пожалуйста:)

Answer 1

Я полагаю, у вас есть DOT Net Core API, чтобы получить список стран.По моему мнению, вы должны кешировать вызов API, который фактически получает список стран.

Несмотря на то, что все приложения управляются данными и выглядят действительно динамично, что действительно менялось в одном сеансе пользователяне так уж много, но мы делали http запросы на новый контент независимо от того.

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

Может быть, мы могли бы использовать сервисный работник, поскольку он позволяет кэшировать вызовы API?Да, это был один из вариантов, поскольку он уже имеет довольно приятную интеграцию с Angular и позволил создать простое решение для выборочного кэширования ресурсов и API.Однако нам нужно было иметь возможность не только выбирать, что кэшировать, но и когда это делать.

Мы можем фактически кэшировать все результаты вызовов API, но только если мы были уверены, что источник данных сделалне изменится каким-либо образом.

Если вы используете Angular и Typescript, и все наши вызовы данных проходят через RxJ, мы можем создать декоратор Cache Observable, который мы использовали бы, чтобы дать возможность кэширования только определеннымметодов.

До:

getCountry(take?: number, skip?: number) {
    return this.http.get(
      `${environment.api}/Country/latest?take=${take}&skip=${skip}`
    );
  }

оно станет:

@Cacheable({
    cacheBusterObserver: CountryNotifier
  })
  getCountry(take?: number, skip?: number) {
    return this.http.get(
      `${environment.api}/Country/latest?take=${take}&skip=${skip}`
    );
  }

Обратите внимание, что @Cacheable () был применен только к тому методу, который мы хотели и былтакже передал cacheBusterObserver, который по сути является нашим основанным на субъекте механизмом, чтобы сказать этому точно оформленному методу для освобождения всех его кешей, когда любое значение выдается в этом потоке.

Например, метод ниже будет «cache-bust»кэши метода выше, если Observable, который он возвращает, выдает значение

@CacheBuster({
    cacheBusterNotifier: countryNotifier
  })
  saveCountry(id: string, name: string, review: string) {
    return this.http.put(`${environment.api}/Country`, {
      id,
      name,
      review
    });
  }

Это может быть самый сложный пример, но у нас также есть другие конфигурацииРеализации реализованы как maxCacheCount, maxAge, slideExpiration и настраиваемые решения и решатели кэша, которые дают нам точный контроль того, что, когда и как кэшировать.