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

The 9:01AM Jitter—and How We Killed It

Why Angular Dashboards Break Without Caching Discipline

Implementing SWR, Smart Polling, and Backoff in NgRx + Signals

// metrics.reducer.ts
import { createEntityAdapter, EntityState } from '@ngrx/entity';

export interface Metric { id: string; value: number; updatedAt: number; }

export interface MetricsState extends EntityState<Metric> {
  lastSuccessAt: number | null;
  etag: string | null;
  ttlMs: number; // configurable via Remote Config
  backoffMs: number; // last applied delay
  network: 'online' | 'offline' | 'slow-2g' | '4g';
}

export const adapter = createEntityAdapter<Metric>({ selectId: m => m.id });

export const initialState: MetricsState = adapter.getInitialState({
  lastSuccessAt: null,
  etag: null,
  ttlMs: 15_000,
  backoffMs: 0,
  network: navigator.onLine ? '4g' : 'offline',
});

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

export const selectMetricsState = (s: any) => s.metrics as MetricsState;
export const { selectAll: selectAllMetrics } = adapter.getSelectors(selectMetricsState);
export const selectLastSuccessAt = createSelector(selectMetricsState, s => s.lastSuccessAt);
export const selectTtlMs = createSelector(selectMetricsState, s => s.ttlMs);
export const selectCacheFresh = createSelector(
  selectLastSuccessAt,
  selectTtlMs,
  (last, ttl) => !!last && Date.now() - last < ttl
);

// metrics.effects.ts
import { Actions, concatLatestFrom, createEffect, ofType } from '@ngrx/effects';
import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { Store } from '@ngrx/store';
import { combineLatest, fromEvent, merge, of, timer } from 'rxjs';
import { catchError, delayWhen, filter, map, retryWhen, scan, startWith, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';

@Injectable()
export class MetricsEffects {
  private actions$ = inject(Actions);
  private http = inject(HttpClient);
  private store = inject(Store);

  private visible$ = fromEvent(document, 'visibilitychange').pipe(
    map(() => !document.hidden),
    startWith(!document.hidden)
  );

  private online$ = merge(
    fromEvent(window, 'online').pipe(map(() => true)),
    fromEvent(window, 'offline').pipe(map(() => false))
  ).pipe(startWith(navigator.onLine));

  startSmartPolling$ = createEffect(() => this.actions$.pipe(
    ofType(MetricsActions.enterDashboard),
    switchMap(() => combineLatest([
      this.visible$,
      this.online$,
      this.store.select(selectTtlMs),
    ]).pipe(
      switchMap(([visible, online, ttl]) => {
        const base = visible && online ? ttl : ttl * 4; // adapt to focus/connectivity
        return timer(0, base).pipe(
          withLatestFrom(this.store.select(selectCacheFresh)),
          filter(([_, fresh]) => !fresh), // SWR: only fetch when stale
          map(() => MetricsActions.fetchRequested())
        );
      }),
      takeUntil(this.actions$.pipe(ofType(MetricsActions.leaveDashboard)))
    ))
  ));

  fetchWithBackoff$ = createEffect(() => this.actions$.pipe(
    ofType(MetricsActions.fetchRequested),
    concatLatestFrom(() => [this.store.select(selectMetricsState)]),
    switchMap(([_, state]) => this.http
      .get<Metric[]>(`/api/metrics`, {
        observe: 'response',
        headers: state.etag ? { 'If-None-Match': state.etag } as any : undefined,
      })
      .pipe(
        map(resp => resp.status === 304
          ? MetricsActions.fetchNotModified()
          : MetricsActions.fetchSucceeded({
              data: resp.body!,
              etag: resp.headers.get('ETag') ?? null,
            })),
        retryWhen(err$ => err$.pipe(
          scan((acc, _err) => {
            const next = Math.min(60_000, (acc || 500) * 2);
            return next;
          }, 0 as number),
          map(delayMs => MetricsActions.backoffUpdated({ delayMs })),
          // emit action and delay
          switchMap(action => {
            this.store.dispatch(action);
            return timer(action.delayMs);
          })
        )),
        catchError(error => of(MetricsActions.fetchFailed({ error })))
      ))
  ));
}

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

export const MetricsActions = createActionGroup({
  source: 'Metrics',
  events: {
    'Enter Dashboard': () => ({}),
    'Leave Dashboard': () => ({}),
    'Fetch Requested': () => ({}),
    'Fetch Succeeded': props<{ data: Metric[]; etag: string | null }>(),
    'Fetch Not Modified': () => ({}),
    'Fetch Failed': props<{ error: unknown }>(),
    'Backoff Updated': props<{ delayMs: number }>(),
  }
});

// signals facade for templates (Angular 20)
import { computed, inject, signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { Store } from '@ngrx/store';

@Injectable({ providedIn: 'root' })
export class MetricsVmStore {
  private store = inject(Store);
  metrics = toSignal(this.store.select(selectAllMetrics), { initialValue: [] });
  fresh = toSignal(this.store.select(selectCacheFresh), { initialValue: false });
  backoffMs = toSignal(this.store.select(s => (s.metrics as MetricsState).backoffMs), { initialValue: 0 });

  vm = computed(() => ({
    metrics: this.metrics(),
    isFresh: this.fresh(),
    backoffMs: this.backoffMs(),
  }));
}

<!-- dashboard.component.html (PrimeNG charts omitted) -->
<section *if="vm().isFresh; else stale" class="fresh"></section>
<ng-template #stale>
  <app-banner severity="info">Showing cached data. Refreshing…</app-banner>
</ng-template>
<app-banner *if="vm().backoffMs > 0" severity="warn">
  Network issues detected. Retrying in {{ vm().backoffMs / 1000 }}s.
</app-banner>

// Feature-flagging TTL via Firebase Remote Config
import { inject } from '@angular/core';
import { RemoteConfig } from '@angular/fire/remote-config';
import { from } from 'rxjs';
import { map } from 'rxjs/operators';

export function loadTtlFromRemoteConfig() {
  const rc = inject(RemoteConfig);
  return from(rc.getNumber('metrics_ttl_ms')).pipe(
    map(n => Number.isFinite(n) && n! > 0 ? n! : 15000)
  );
}

# nx project.json (excerpt) – guardrails for caching behavior
"targets": {
  "perf-ci": {
    "executor": "@nx/workspace:run-commands",
    "options": {
      "commands": [
        "cypress run --spec cypress/e2e/cache-swr.cy.ts",
        "node tools/metrics/assert-staleness-budget.mjs --max-stale-ms=15000"
      ]
    }
  }
}

Case Studies: a global entertainment company, Charter, United—What Worked

When to Hire an Angular Developer for Legacy Rescue

Takeaways: Instrument and Guardrail Your Refresh Pipeline

• SWR first. Serve cached, revalidate silently, and tell the user only when it matters.

• Smart polling. Adapt to focus and connectivity; fetch only when stale.

• Exponential backoff with typed actions. Make failure states observable.

• Signals on top of NgRx. Deterministic renders; fewer repaints.

• CI + Remote Config. Enforce staleness budgets; tune intervals without redeploying.

What Should We Instrument Next?