made with ❤ by [push-based.io](https://www.push-based.io)

sidebar_label: Cache Variants

sidebar_position: 11

title: Cache Variants

In some apps, pages are displayed in different variants. This can be the case, for example, if the application has a login. Users who are already logged in may not see a login button or something similar, whereas an authenticated user will.

These scenarios would lead to a content shift after delivery of the cached variant that does not correspond to the user status.

For these cases the configuration can be extended by any number of render variants by the `variants` property.

```typescript title="server.ts"

const isr = new ISRHandler({

...

// highlight-next-line

variants: [] // 👈 register your variants here

});

The `RenderVariant` interface is defined as follows:

export interface RenderVariant {

identifier: string;

detectVariant: (req: Request) => boolean;

simulateVariant?: (req: Request) => Request;

}

The `identifier` must be unique and is used next to the URL as a key for the cache.

The `detectVariant` callback detects from the current request whether a defined variant must be delivered. This can happen e.g. on the basis of a cookie or similar. The return value is a boolean which determines whether this request fits the variant or not.

If on-demand revalidation is also to be used for the different variants, a way must be provided to modify the request so that it can be recognized again by the `detectVariant` callback.

For example, a placeholder for an authentication cookie can be added so that an authenticated variant of the app is rendered.

For this we use the `simulateVariant` callback, which is called before rendering to modify the request.

```typescript title="server.ts"

const isr = new ISRHandler({

...

variants: [

{

identifier: 'logged-in', // 👈 key to cache the variant

detectVariant: (req) => {

// 👇 Variant is recognized as soon as the request contains a cookie 'access_token'

return req.cookies && req.cookies.access_token;

},

simulateVariant: (req) => {

// 👇 For on-demand revalidation we insert a placeholder 'access_token' cookie

req.cookies['access_token'] = 'isr';

return req;

}

},

]

});

If more than one variant is registered, the one where the `detectVariant` returns `true` the first time is used.

If a variant is to become a combination of different variants, this state should be registered as an independent variant before the corresponding single variant.

```typescript title="server.ts"

const isr = new ISRHandler({

...

variants: [

{

identifier: 'A_AND_B',

detectVariant: (req) => req.cookies && req.cookies.is_A && req.cookies.is_B,

simulateVariant: (req) => {

req.cookies['is_A'] = true;

req.cookies['is_B'] = true;

return req;

}

},

{

identifier: 'A',

detectVariant: (req) => req.cookies && req.cookies.is_A,

simulateVariant: (req) => {

req.cookies['is_A'] = true;

return req;

}

},

{

identifier: 'B',

detectVariant: (req) => req.cookies && req.cookies.is_B,

simulateVariant: (req) => {

req.cookies['is_B'] = true;

return req;

}

},

]

});

:::caution **Important:**

For each variant entered here, a corresponding duplicate is cached per page. So be aware that depending on the cache handler this could significantly increase the disk or RAM usage.

:::

Note that when using placeholder cookies or similar, the application should have appropriate exceptions defined to avoid runtime errors caused by invalid values.

import { Request } from 'express';

export interface RenderVariant {

identifier: string;

detectVariant: (req: Request) => boolean;

simulateVariant?: (req: Request) => Request;

export interface VariantRebuildItem {

url: string;

cacheKey: string;

reqSimulator: (req: Request) => Request;

RenderVariant,

VariantRebuildItem,

import { CacheHandler, RenderVariant } from './cache-handler';

/**

variants?: RenderVariant[];

import { RenderVariant, VariantRebuildItem } from '@rx-angular/isr/models';

// Include all possible variants in the list of URLs to be invalidated including

// their modified request to regenerate the pages

const variantUrlsToInvalidate =

this.getVariantUrlsToInvalidate(urlsToInvalidate);

for (const variantUrl of variantUrlsToInvalidate) {

const { cacheKey, url, reqSimulator } = variantUrl;

const urlExists = await this.cache.has(cacheKey);

notInCache.push(cacheKey);

req: reqSimulator(req),

urlWithErrors[cacheKey] = errors;

await this.cache.add(cacheKey, html, cacheConfig);

urlWithErrors[cacheKey] = err;

const invalidatedUrls = variantUrlsToInvalidate

.map((val) => val.cacheKey)

.filter(

(cacheKey) => !notInCache.includes(cacheKey) && !urlWithErrors[cacheKey]

);

getVariantUrlsToInvalidate(urlsToInvalidate: string[]): VariantRebuildItem[] {

const variants = this.config.variants || [];

const result: VariantRebuildItem[] = [];

const defaultVariant = (req: Request) => req;

for (const url of urlsToInvalidate) {

result.push({ url, cacheKey: url, reqSimulator: defaultVariant });

for (const variant of variants) {

result.push({

url,

cacheKey: getCacheKey(url, variant),

reqSimulator: variant.simulateVariant

? variant.simulateVariant

: defaultVariant,

});

}

}

return result;

}

const variant = this.getVariant(req);

const cacheData = await this.cache.get(getCacheKey(req.url, variant));

this.logger.log(

`Page was retrieved from cache: `,

getCacheKey(req.url, variant)

);

const variant = this.getVariant(req);

await this.cache.add(getCacheKey(req.url, variant), finalHtml, {

protected getVariant(req: Request): RenderVariant | null {

if (!this.config.variants) {

return null;

}

return (

this.config.variants.find((variant) => variant.detectVariant(req)) || null

);

}

const getCacheKey = (url: string, variant: RenderVariant | null): string => {

if (!variant) return url;

return `${url}<variantId:${variant.identifier}>`;