Improve dashboard performance

Wrap the backend instance with the withCaching decorator so the Dashboard component and other components reuse backend responses instead of requesting them again.

Cache the backend responses

The decorator needs a settings object to be handed over as a parameter to configure where the cache should be applied and to what size the cache should grow. For execution results, you can use either count-based eviction (maxExecutions) or time-based eviction (maxExecutionsAge). When maxExecutions is specified, it takes precedence and uses LRU policy to evict items when the limit is reached. When only maxExecutionsAge is specified, items expire after the configured duration (the cache still holds at most 500 results at a time). For other cache types, items are removed using LRU policy once the max size of the cache is reached.

You can find the recommended caching options in RecommendedCachingConfiguration within the @gooddata/sdk-backend-base package.

Caching backend configuration options

Wrap the backend

import { type IAnalyticalBackend } from "@gooddata/sdk-backend-spi";
import { withCaching, RecommendedCachingConfiguration } from "@gooddata/sdk-backend-base";

export function createCachedBackend(realBackend: IAnalyticalBackend): IAnalyticalBackend {
    return withCaching(realBackend, RecommendedCachingConfiguration);
}

Size the execution cache for your dashboards

maxExecutions is the number of execution results kept at once; the recommended value is 10. On a dashboard with more widgets than that, the least-recently-used (LRU) policy evicts the first results before the last widgets finish, and re-renders hit the analytics engine again. Set maxExecutions to at least the widget count of your largest dashboard, or use maxExecutionsAge to expire results by time instead.

import { type IAnalyticalBackend } from "@gooddata/sdk-backend-spi";
import { withCaching, RecommendedCachingConfiguration } from "@gooddata/sdk-backend-base";

export function createCachedBackend(realBackend: IAnalyticalBackend): IAnalyticalBackend {
    return withCaching(realBackend, {
        ...RecommendedCachingConfiguration,
        maxExecutions: 40,
    });
}

Invalidate the cache after a write

The caching decorator doesn’t know when your application changes data. After you save a visualization, edit the model, or change a dashboard filter configuration through the backend services, the decorated backend keeps serving the cached version until it’s evicted. Pass onCacheReady to receive a CacheControl and call the matching reset* method after each write.

import { type IAnalyticalBackend } from "@gooddata/sdk-backend-spi";
import { type CacheControl, RecommendedCachingConfiguration, withCaching } from "@gooddata/sdk-backend-base";
import { type IInsight } from "@gooddata/sdk-model";

let cacheControl: CacheControl | undefined;

export function createBackend(realBackend: IAnalyticalBackend): IAnalyticalBackend {
    return withCaching(realBackend, {
        ...RecommendedCachingConfiguration,
        onCacheReady: (control) => {
            cacheControl = control;
        },
    });
}

export async function saveVisualization(backend: IAnalyticalBackend, workspace: string, insight: IInsight) {
    const saved = await backend.workspace(workspace).insights().updateInsight(insight);

    cacheControl?.resetInsights();
    cacheControl?.resetExecutions();

    return saved;
}

CacheControl has a reset* method for every other cache too, such as facts, datasets, settings, and automations; see its source on GitHub. @gooddata/sdk-backend-base is not part of the API reference.

Clear the narrowest cache that covers the write. After you change a visualization, clear both visualizations and executions, because its cached results are stale too. After you rename a measure, call resetMeasures() and resetCatalogs(), because the catalog holds a copy of the title.