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

When dashboards jitter and APIs throttle: why caching matters in Angular 20+

Why Angular dashboards need smart caching beyond basic HTTP interceptors

Implementing SWR, smart polling, and backoff in NgRx + Signals

Here’s a stripped example I’ve shipped in Nx monorepos. It uses NgRx Entity, selectSignal, and RxJS backoff with jitter.

Code walkthrough: NgRx SWR cache for KPIs with smart polling

// kpi.actions.ts
import { createActionGroup, emptyProps, props } from '@ngrx/store';

export const KpiActions = createActionGroup({
  source: 'KPI',
  events: {
    'Ensure KPIs': props<{ tenantId: string; force?: boolean }>(),
    'Load KPIs': props<{ tenantId: string }>(),
    'Load KPIs Success': props<{ tenantId: string; data: any }>(),
    'Load KPIs Failure': props<{ tenantId: string; error: unknown; retryAfterMs?: number }>(),
    'Start Polling': props<{ tenantId: string }>(),
    'Stop Polling': props<{ tenantId: string }>(),
    'WebSocket Health': props<{ tenantId: string; healthy: boolean }>(),
  }
});

// kpi.reducer.ts
import { createEntityAdapter, EntityState } from '@ngrx/entity';
import { createReducer, on } from '@ngrx/store';
import { KpiActions } from './kpi.actions';

export interface KpiCache {
  tenantId: string;
  data: any | null;
  updatedAt: number | null;
  status: 'idle'|'loading'|'error'|'ready';
  error?: unknown;
}

export interface State extends EntityState<KpiCache> {}

const adapter = createEntityAdapter<KpiCache>({ selectId: m => m.tenantId });
export const initialState: State = adapter.getInitialState();

export const reducer = createReducer(initialState,
  on(KpiActions.LoadKpis, (state, { tenantId }) => adapter.upsertOne({ tenantId, data: null, updatedAt: null, status: 'loading' }, state)),
  on(KpiActions.LoadKpisSuccess, (state, { tenantId, data }) => adapter.upsertOne({ tenantId, data, updatedAt: Date.now(), status: 'ready' }, state)),
  on(KpiActions.LoadKpisFailure, (state, { tenantId, error }) => adapter.updateOne({ id: tenantId, changes: { status: 'error', error } }, state)),
);

export const { selectEntities } = adapter.getSelectors();

// kpi.selectors.ts
import { createSelector } from '@ngrx/store';

export const selectKpiEntities = (s: any) => s.kpi as State;
export const selectKpiByTenant = (tenantId: string) => createSelector(
  selectKpiEntities,
  (state) => state.entities[tenantId] ?? { tenantId, data: null, updatedAt: null, status: 'idle' }
);

export const selectKpiView = (tenantId: string, ttlMs: number) => createSelector(
  selectKpiByTenant(tenantId),
  (kpi) => {
    const updatedAt = kpi.updatedAt ?? 0;
    const isStale = Date.now() - updatedAt > ttlMs;
    return { data: kpi.data, status: kpi.status, isStale };
  }
);

// backoff.util.ts
import { delay, mergeMap, of, throwError } from 'rxjs';

export function retryBackoffWithJitter(maxRetries = 5, baseMs = 500, capMs = 15000) {
  return <T>(src: any) => src.pipe(
    mergeMap((err: any, i: number) => {
      const attempt = i + 1;
      if (attempt > maxRetries) return throwError(() => err);
      const retryAfterMs = err?.retryAfterMs ?? err?.headers?.get?.('Retry-After') * 1000;
      const rawDelay = retryAfterMs || Math.min(capMs, Math.random() * baseMs * Math.pow(2, attempt));
      const jitter = rawDelay * 0.2 * Math.random();
      return of(err).pipe(delay(rawDelay + jitter));
    })
  );
}

// kpi.effects.ts
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Injectable, inject } from '@angular/core';
import { Store } from '@ngrx/store';
import { KpiActions } from './kpi.actions';
import { HttpClient } from '@angular/common/http';
import { catchError, filter, map, merge, mergeMap, of, switchMap, takeUntil, timer } from 'rxjs';
import { selectKpiView } from './kpi.selectors';
import { retryBackoffWithJitter } from './backoff.util';

@Injectable({ providedIn: 'root' })
export class KpiEffects {
  private http = inject(HttpClient);
  private store = inject(Store);
  private actions$ = inject(Actions);
  private defaultTtlMs = 60_000; // overridable via Remote Config
  private basePollMs = 15_000;   // overridable via Remote Config

  ensure$ = createEffect(() => this.actions$.pipe(
    ofType(KpiActions.EnsureKpis),
    switchMap(({ tenantId, force }) => this.store.selectSignal(selectKpiView(tenantId, this.defaultTtlMs))()),
    switchMap(view => {
      if (view.status === 'idle' || !view.data || view.isStale) {
        return of(KpiActions.LoadKpis({ tenantId: (view as any).tenantId }));
      }
      return of(); // cached and fresh: no-op
    })
  ));

  load$ = createEffect(() => this.actions$.pipe(
    ofType(KpiActions.LoadKpis),
    mergeMap(({ tenantId }) => this.http.get(`/api/tenants/${tenantId}/kpis`).pipe(
      map(data => KpiActions.LoadKpisSuccess({ tenantId, data })),
      catchError((error) => of(KpiActions.LoadKpisFailure({ tenantId, error, retryAfterMs: parseRetryAfter(error) })))
    ).pipe(retryBackoffWithJitter()))
  ));

  poll$ = createEffect(() => this.actions$.pipe(
    ofType(KpiActions.StartPolling),
    switchMap(({ tenantId }) => {
      const visibility$ = fromVisibility();
      const online$ = fromOnline();
      const wsHealthy$ = fromWsHealth(this.store, tenantId);

      const cadence$ = merge(visibility$, online$, wsHealthy$).pipe(mapTo(0));
      return cadence$.pipe(
        switchMap(() => {
          // If hidden/offline or WebSocket healthy, pause polling
          return merge(
            visibility$.pipe(filter(v => !v)),
            online$.pipe(filter(o => !o)),
            wsHealthy$.pipe(filter(h => h))
          ).pipe(
            switchMap(() => of()), // paused
            takeUntil(merge(
              visibility$.pipe(filter(Boolean)),
              online$.pipe(filter(Boolean)),
              wsHealthy$.pipe(filter(h => !h))
            ))
          );
        }),
        switchMap(() => timer(0, this.basePollMs).pipe(map(() => KpiActions.EnsureKpis({ tenantId })))),
        takeUntil(this.actions$.pipe(ofType(KpiActions.StopPolling)))
      );
    })
  ));
}

function parseRetryAfter(error: any): number | undefined {
  const header = error?.headers?.get?.('Retry-After');
  return header ? Number(header) * 1000 : undefined;
}

// util streams
import { fromEvent, map, startWith } from 'rxjs';
function fromVisibility() { return fromEvent(document, 'visibilitychange').pipe(map(() => document.visibilityState === 'visible'), startWith(document.visibilityState === 'visible')); }
function fromOnline() { return fromEvent(window, 'online').pipe(map(() => true), startWith(navigator.onLine)); }
function fromWsHealth(store: Store, tenantId: string) { return store.selectSignal(selectWsHealthy(tenantId))(); }

// dashboard.component.ts (Signals-friendly)
import { Component, inject, effect } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectKpiView } from './kpi.selectors';
import { KpiActions } from './kpi.actions';

@Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html' })
export class DashboardComponent {
  private store = inject(Store);
  private tenantId = 'acme';
  kpi = this.store.selectSignal(selectKpiView(this.tenantId, 60_000));

  constructor() {
    this.store.dispatch(KpiActions.EnsureKpis({ tenantId: this.tenantId }));
    this.store.dispatch(KpiActions.StartPolling({ tenantId: this.tenantId }));
  }
}

<!-- dashboard.component.html -->
<p-panel header="KPIs" *ngIf="kpi().data; else loading">
  <app-kpi-grid [data]="kpi().data"></app-kpi-grid>
  <small *ngIf="kpi().isStale">Stale • refreshing…</small>
</p-panel>
<ng-template #loading>
  <p-skeleton width="100%" height="240px"></p-skeleton>
</ng-template>

Production guardrails: telemetry and config

# .github/workflows/ci.yaml (excerpt)
name: ci
on: [pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - run: pnpm install
      - run: npx nx affected -t lint test --parallel
      - run: npx nx e2e dashboard-e2e --configuration=ci

How an Angular consultant approaches Signals‑ready caching in NgRx

If you need to hire an Angular developer to stabilize a dashboard under load, this is the exact toolkit I’ll bring: NgRx SWR caches, Signals interop, and measurable wins within the first sprint.

When to Hire an Angular Developer for Legacy Rescue

I’m available as a remote Angular contractor. If you’re evaluating an Angular expert for hire, let’s review your caching and Signals roadmap.