Skip to main content

Pass extra data into the cache

ISR can store arbitrary extra data alongside a cached page, for example how long the API requests behind that page took, so you can show how much time serving from cache saved. You write to the bag with IsrService.addExtra and read it back with getExtra.

Why this exists: see the extra-data rationale in How ISR works.

Preconditions​

  • A working ISR setup rendering on @angular/ssr.
  • provideHttpClient in your application config so you can register a functional interceptor.

Steps​

  1. Write a functional interceptor (HttpInterceptorFn) that times each request and records the result via addExtra. Inject IsrService with inject() inside the interceptor.

    url-timings.interceptor.ts
    import { HttpInterceptorFn } from '@angular/common/http';
    import { inject } from '@angular/core';
    import { IsrService } from '@rx-angular/isr';
    import { tap } from 'rxjs';

    export const urlTimingsInterceptor: HttpInterceptorFn = (req, next) => {
      const isrService = inject(IsrService);
      const start = performance.now();

      return next(req).pipe(
        tap(() => {
          const timing = {
            url: req.url,
            timing: (performance.now() - start).toFixed(2) + 'ms',
          };

          const currentTimings = (isrService.getExtra()['requestsTimings'] as (typeof timing)[]) ?? [];

          const exists = currentTimings.some((t) => t.url === req.url);
          isrService.addExtra({
            requestsTimings: exists ? currentTimings.map((t) => (t.url === req.url ? timing : t)) : [...currentTimings, timing],
          });
        }),
      );
    };

  2. Register the interceptor with withInterceptors in your application config: no HTTP_INTERCEPTORS token, no NgModule.

    app.config.ts
    import { ApplicationConfig } from '@angular/core';
    import { provideHttpClient, withInterceptors } from '@angular/common/http';
    import { urlTimingsInterceptor } from './url-timings.interceptor';

    export const appConfig: ApplicationConfig = {
      providers: [provideHttpClient(withInterceptors([urlTimingsInterceptor]))],
    };

Result​

Each server-side API request is timed and its duration is stored in the ISR extra bag, embedded into the cached page. On later cache hits you can read requestsTimings back via getExtra() to report the time saved by serving from cache.

See also​