Enterprise Angular 20+ Caching: Smart Polling, Exponential Backoff, and Stale‑While‑Revalidate with NgRx + Signals

The dashboard that paged me: smart caching or sorry quotas

Why Angular 20+ teams need SWR, smart polling, and backoff

NgRx + Signals SWR cache architecture

// kpi-cache.models.ts
export interface CacheEntry<T> {
  data: T | null;
  fetchedAt: number | null;
  ttlMs: number; // e.g., 30_000
  etag?: string;
  pending: boolean;
  error?: string | null;
}

export const isStale = (e: CacheEntry<unknown>, now = Date.now()) =>
  !e.fetchedAt || now - e.fetchedAt > e.ttlMs;

// kpi-cache.feature.ts
import { createFeature, createReducer, on, createSelector } from '@ngrx/store';
import { createActionGroup, props } from '@ngrx/store';

export interface KpiState {
  byKey: Record<string, CacheEntry<number>>; // key = `${tenantId}:${role}:${metric}`
}

const initialState: KpiState = { byKey: {} };

export const KpiActions = createActionGroup({
  source: 'KPI',
  events: {
    load: props<{ key: string; force?: boolean }>(),
    loaded: props<{ key: string; data: number; etag?: string }>(),
    notModified: props<{ key: string }>(),
    error: props<{ key: string; error: string }>(),
  },
});

export const kpiFeature = createFeature({
  name: 'kpi',
  reducer: createReducer(
    initialState,
    on(KpiActions.load, (state, { key }) => ({
      ...state,
      byKey: {
        ...state.byKey,
        [key]: { ...(state.byKey[key] ?? { data: null, fetchedAt: null, ttlMs: 30_000 }), pending: true, error: null },
      },
    })),
    on(KpiActions.loaded, (state, { key, data, etag }) => ({
      ...state,
      byKey: {
        ...state.byKey,
        [key]: { data, fetchedAt: Date.now(), ttlMs: state.byKey[key]?.ttlMs ?? 30_000, etag, pending: false, error: null },
      },
    })),
    on(KpiActions.notModified, (state, { key }) => ({
      ...state,
      byKey: { ...state.byKey, [key]: { ...state.byKey[key], fetchedAt: Date.now(), pending: false } },
    })),
    on(KpiActions.error, (state, { key, error }) => ({
      ...state,
      byKey: { ...state.byKey, [key]: { ...(state.byKey[key] ?? { data: null, ttlMs: 30_000 }), pending: false, error } },
    })),
  ),
});

const selectEntry = (key: string) => createSelector(kpiFeature.selectByKey, (byKey) => byKey[key]);
export const selectKpiVm = (key: string) =>
  createSelector(selectEntry(key), (e) => ({
    value: e?.data ?? null,
    isStale: e ? isStale(e) : true,
    isRefreshing: !!e?.pending,
    error: e?.error ?? null,
  }));

// kpi.component.ts
import { selectSignal, Store } from '@ngrx/store';
import { Component, computed, inject, input } from '@angular/core';

@Component({
  selector: 'kpi-tile',
  standalone: true,
  template: `
    <p-panel header="{{metric()}}" [toggleable]="true">
      <ng-container *ngIf="vm().value as v; else loading">
        <span class="value">{{ v | number }}</span>
        <span class="badge" [class.stale]="vm().isStale">{{ vm().isStale ? 'stale' : 'fresh' }}</span>
      </ng-container>
      <ng-template #loading>Loading…</ng-template>
    </p-panel>
  `,
})
export class KpiTileComponent {
  private store = inject(Store);
  metric = input.required<string>();
  tenantId = input.required<string>();
  role = input.required<string>();

  private key = computed(() => `${this.tenantId()}:${this.role()}:${this.metric()}`);
  vm = this.store.pipe(selectSignal(selectKpiVm(this.key())));
}

SWR revalidate effect with ETag and exponential backoff

// kpi.effects.ts
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Store } from '@ngrx/store';
import { inject, Injectable } from '@angular/core';
import { KpiActions, kpiFeature } from './kpi-cache.feature';
import { catchError, filter, map, of, switchMap, withLatestFrom, retry } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class KpiEffects {
  private actions$ = inject(Actions);
  private http = inject(HttpClient);
  private store = inject(Store);

  load$ = createEffect(() =>
    this.actions$.pipe(
      ofType(KpiActions.load),
      withLatestFrom(this.store.select(kpiFeature.selectByKey)),
      filter(([{ key, force }, byKey]) => force || !byKey[key] || (Date.now() - (byKey[key].fetchedAt ?? 0)) > (byKey[key].ttlMs)),
      switchMap(([{ key } , byKey]) => {
        const entry = byKey[key];
        const headers = new HttpHeaders(entry?.etag ? { 'If-None-Match': entry.etag } : {});
        const url = `/api/kpis/${encodeURIComponent(key)}`;
        return this.http.get<number>(url, { observe: 'response', headers }).pipe(
          retry({
            count: 4,
            delay: (error, retryCount) => {
              const base = Math.min(1000 * 2 ** (retryCount - 1), 15_000);
              const jitter = Math.floor(Math.random() * 300);
              return of(0).pipe(delay(base + jitter));
            },
          }),
          map((res) => {
            if (res.status === 304) return KpiActions.notModified({ key });
            const etag = res.headers.get('ETag') ?? undefined;
            return KpiActions.loaded({ key, data: res.body as number, etag });
          }),
          catchError((e) => of(KpiActions.error({ key, error: e.message ?? 'error' }))),
        );
      })
    )
  );
}

Smart polling that respects users and quotas

// polling.service.ts
import { Injectable, NgZone, computed, signal } from '@angular/core';
import { fromEvent, interval, merge, map, startWith, filter } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class PollingService {
  visible = signal(document.visibilityState === 'visible');
  online = signal(navigator.onLine);

  constructor(zone: NgZone) {
    zone.runOutsideAngular(() => {
      fromEvent(document, 'visibilitychange').subscribe(() => this.visible.set(document.visibilityState === 'visible'));
      fromEvent(window, 'online').subscribe(() => this.online.set(true));
      fromEvent(window, 'offline').subscribe(() => this.online.set(false));
    });
  }

  // Consumers can subscribe to ticks only when visible+online
  ticks(ms = 10_000) {
    const jitter = Math.floor(Math.random() * 750);
    return merge(interval(ms + jitter)).pipe(
      startWith(0),
      filter(() => this.visible() && this.online()),
    );
  }
}

// usage in an effect
// this.polling.ticks(15000).pipe(withLatestFrom(store.select(selectStaleKeys)), ...)

Example: telemetry dashboard SWR in the wild

<!-- PrimeNG tile badge example -->
<p-badge [severity]="vm().isStale ? 'warning' : 'success'" [value]="vm().isStale ? 'stale' : 'fresh'" />

When to Hire an Angular Developer for Caching and State Rescue

Instrumentation and CI guardrails

# .github/workflows/ci.yml (excerpt)
- name: E2E cache assertions
  run: |
    npx cypress run --spec cypress/e2e/cache.cy.ts

# cypress/e2e/cache.cy.ts (excerpt)
cy.intercept('/api/kpis/**').as('kpi');
cy.visit('/dashboard');
cy.wait('@kpi');
cy.reload();
cy.wait('@kpi'); // should be conditional or 304
cy.get('[data-cy=kpi-1] .badge').should('exist');

- name: Lighthouse budget
  run: npx @lhci/cli autorun --upload.target=temporary-public-storage

Final takeaways

• Serve cached data first, revalidate in the background. Users stop waiting; APIs stop crying.
• Schedule by staleness and context (visibility/online), not fixed intervals.
• Use ETag and exponential backoff with jitter to protect upstreams.
• Signalize freshness with NgRx selectSignal; keep effects typed and idempotent.
• Measure everything, ship behind flags, and prove the win with GA4 + DevTools.

What should we implement next?