如何實現Angular SPA的緩存

Question

我正在開發ASP.NET核心后端的Angular 7應用程序。 應用程序托管在Azure應用程序服務中，SQL數據庫也在那里。 我注意到有一些表很少改變，比如States表，但另一方面，我需要經常在我的SPA中使用它們。 我想知道什么樣的緩存解決方案適合我的情況。

到目前為止我還沒有嘗試任何具體的內容 根據我的理解，如果我在SPA端緩存國家/地區，我將無法訪問新添加的國家（這種情況會不時發生），直到用戶重新加載頁面並重新啟動應用程序。 我知道像Redis緩存這樣的服務可以解決問題，但是它非常昂貴。 由於Azure App服務可以擴展，我想我也不能使用像SignarR這樣的解決方案。 我在考慮使用推送通知，例如， 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，並且我們所有的數據調用都通過RxJs，我們可以創建一個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，它基本上是我們基於主題的機制，用於告訴這個精確修飾的方法，以便在該流中發出任何值時釋放其所有緩存。

例如，如果它返回的Observable發出一個值，下面的方法將“緩存 - 破壞”上述方法的緩存

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

這可能是最復雜的示例，但我們還實現了其他配置，如maxCacheCount，maxAge，slidingExpiration和自定義緩存決策器和解析器，它們為我們提供了對緩存內容，時間和方式的精細控制。