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

Why Angular 20+ Dashboards Need Smart Caching

State Shape, Cache Metadata, and SWR Selectors in NgRx

// dashboard.state.ts
import { createFeature, createReducer, on, createSelector } from '@ngrx/store';
import { createEntityAdapter, EntityState } from '@ngrx/entity';
import * as DashboardActions from './dashboard.actions';

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

export interface CacheMeta {
  lastFetched: number | null;
  ttlMs: number; // Remote-configurable
  status: 'idle' | 'loading' | 'success' | 'error';
  error?: string;
}

export interface DashboardState {
  widgets: EntityState<Widget>;
  cache: CacheMeta;
}

const adapter = createEntityAdapter<Widget>({ selectId: w => w.id });
const initialState: DashboardState = {
  widgets: adapter.getInitialState(),
  cache: { lastFetched: null, ttlMs: 10_000, status: 'idle' },
};

export const dashboardFeature = createFeature({
  name: 'dashboard',
  reducer: createReducer(
    initialState,
    on(DashboardActions.refreshStart, (state) => ({
      ...state,
      cache: { ...state.cache, status: 'loading' },
    })),
    on(DashboardActions.refreshSuccess, (state, { widgets, now }) => ({
      ...state,
      widgets: adapter.setAll(widgets, state.widgets),
      cache: { lastFetched: now, ttlMs: state.cache.ttlMs, status: 'success' },
    })),
    on(DashboardActions.refreshError, (state, { error }) => ({
      ...state,
      cache: { ...state.cache, status: 'error', error },
    })),
    on(DashboardActions.setTtl, (state, { ttlMs }) => ({
      ...state,
      cache: { ...state.cache, ttlMs },
    }))
  )
});

const { selectDashboardState } = dashboardFeature;
const selectWidgets = createSelector(selectDashboardState, s => adapter.getSelectors().selectAll(s.widgets));
const selectCache = createSelector(selectDashboardState, s => s.cache);

export const selectIsStale = createSelector(selectCache, c => {
  if (c.lastFetched == null) return true;
  return Date.now() - c.lastFetched >= c.ttlMs;
});

export const selectDashboardVm = createSelector(
  selectWidgets,
  selectCache,
  selectIsStale,
  (widgets, cache, isStale) => ({ widgets, cache, isStale })
);

Smart Polling: Visibility, Focus, and Remote Config

// dashboard.effects.ts
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Injectable, inject } from '@angular/core';
import { Store } from '@ngrx/store';
import { interval, merge, fromEvent, defer, of, timer } from 'rxjs';
import { filter, map, startWith, switchMap, withLatestFrom, exhaustMap, catchError, retry } from 'rxjs/operators';
import * as DashboardActions from './dashboard.actions';
import { selectIsStale } from './dashboard.state';
import { DashboardApi } from '../data/dashboard.api';
import { RemoteConfigService } from '../data/remote-config.service';

function backoffDelayMs(attempt: number, base = 500, max = 15_000, jitter = 0.25) {
  const exp = Math.min(max, base * Math.pow(2, attempt));
  const rand = 1 + (Math.random() * jitter - jitter / 2); // +/- jitter
  return Math.floor(exp * rand);
}

@Injectable({ providedIn: 'root' })
export class DashboardEffects {
  private actions$ = inject(Actions);
  private store = inject(Store);
  private api = inject(DashboardApi);
  private rc = inject(RemoteConfigService);

  // Visibility/focus/online gates
  private visible$ = merge(
    fromEvent(document, 'visibilitychange').pipe(map(() => !document.hidden)),
    fromEvent(window, 'focus').pipe(map(() => true)),
    fromEvent(window, 'blur').pipe(map(() => !document.hidden)),
    fromEvent(window, 'online').pipe(map(() => true)),
    fromEvent(window, 'offline').pipe(map(() => false))
  ).pipe(startWith(!document.hidden));

  poll$ = createEffect(() => this.actions$.pipe(
    ofType(DashboardActions.init),
    switchMap(() => this.rc.config$('pollMs', 5_000).pipe( // Firebase Remote Config or env fallback
      switchMap(pollMs => merge(
        // periodic tick while visible
        this.visible$.pipe(
          switchMap(visible => visible ? interval(pollMs).pipe(startWith(0)) : of())
        ),
        // manual refresh events can also be merged here
      ).pipe(
        withLatestFrom(this.store.select(selectIsStale)),
        filter(([, isStale]) => isStale), // SWR: only fetch when stale
        exhaustMap(() => {
          const now = Date.now();
          return defer(() => this.api.fetchWidgets()).pipe(
            retry({ count: 4, delay: (_, count) => timer(backoffDelayMs(count)) }),
            map(widgets => DashboardActions.refreshSuccess({ widgets, now })),
            catchError(err => of(DashboardActions.refreshError({ error: String(err) })))
          );
        })
      ))
    ))
  ));
}

SWR in the Component with Signals and PrimeNG

// dashboard.component.ts
import { Component, inject, signal } from '@angular/core';
import { Store } from '@ngrx/store';
import { toSignal } from '@angular/core/rxjs-interop';
import { selectDashboardVm } from './state/dashboard.state';
import * as DashboardActions from './state/dashboard.actions';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
})
export class DashboardComponent {
  private store = inject(Store);
  vm = toSignal(this.store.select(selectDashboardVm), { initialValue: { widgets: [], cache: { status: 'idle', ttlMs: 10_000, lastFetched: null }, isStale: true } as any });
  manualRefresh = () => this.store.dispatch(DashboardActions.manualRefresh());
}

<!-- dashboard.component.html -->
<p-panel header="KPIs" [toggleable]="true">
  <ng-container *ngIf="vm().widgets.length; else skeleton">
    <p-table [value]="vm().widgets" [paginator]="false">
      <ng-template pTemplate="header">
        <tr><th>Metric</th><th>Value</th><th>Updated</th></tr>
      </ng-template>
      <ng-template pTemplate="body" let-w>
        <tr>
          <td>{{ w.id }}</td>
          <td>{{ w.value | number:'1.0-0' }}</td>
          <td>
            <span [class.text-warning]="vm().isStale">{{ w.updatedAt | date:'mediumTime' }}</span>
          </td>
        </tr>
      </ng-template>
    </p-table>
  </ng-container>
  <ng-template #skeleton>
    <p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
    <p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
  </ng-template>
  <p-toolbar>
    <button pButton label="Refresh" icon="pi pi-refresh" (click)="manualRefresh()"></button>
    <span class="ml-auto" [pTooltip]="'Stale-While-Revalidate'" tooltipPosition="left">
      <i class="pi" [ngClass]="vm().isStale ? 'pi-clock text-warning' : 'pi-check text-success'"></i>
    </span>
  </p-toolbar>
</p-panel>

Exponential Backoff with Jitter That Ops Will Love

// http wrapper used by DashboardApi
getWithBackoff<T>(url: string) {
  return this.http.get<T>(url).pipe(
    retry({ count: 4, delay: (_, i) => timer(backoffDelayMs(i)) })
  );
}

// optional: lightweight analytics hook
pipe(tap({
  next: () => this.telemetry.log('cache_miss'),
  error: (e) => this.telemetry.log('retry_error', { e }),
}))

When to Hire an Angular Developer for Legacy Rescue

Full Pattern Together: SWR + Smart Polling + Signals

// dashboard.store.ts — SignalStore facade over NgRx
import { SignalStore, withState, withMethods } from '@ngrx/signals';
import { inject } from '@angular/core';
import { Store } from '@ngrx/store';
import * as DashboardActions from './state/dashboard.actions';
import { selectDashboardVm } from './state/dashboard.state';
import { toSignal } from '@angular/core/rxjs-interop';

export class DashboardStore extends SignalStore(
  withState({}),
  withMethods((store) => {
    const ngrx = inject(Store);
    const vm = toSignal(ngrx.select(selectDashboardVm), { initialValue: { widgets: [], cache: { status: 'idle', ttlMs: 10_000, lastFetched: null }, isStale: true } as any });
    return {
      vm,
      refresh: () => ngrx.dispatch(DashboardActions.manualRefresh()),
      setTtl: (ttlMs: number) => ngrx.dispatch(DashboardActions.setTtl({ ttlMs })),
    };
  })
) {}

Measuring the Win: Angular DevTools, GA4, and Logs