Mise en cache en TypeScript : accélérer votre application sans douleur

Pourquoi votre application ralentit (et comment y remédier)

Avez-vous déjà attendu que l'interface se redessine après un clic ? Ou observé le serveur répondre à la même requête plusieurs fois de suite ? Cela vous parle ? Alors cet article est pour vous. La mise en cache des données n'est pas simplement une « bonne pratique », mais une compétence de base pour tout développeur TypeScript qui souhaite que son application vole, plutôt que de ramper.

Aujourd'hui, nous allons voir comment mettre correctement en cache les données en TypeScript : du simple cache in-memory sur le frontend aux stratégies avancées avec TTL et Redis sur le backend. Vous obtiendrez des morceaux de code prêts à l'emploi que vous pourrez intégrer dans votre projet dès aujourd'hui.

Qu'est-ce que la mise en cache et pourquoi en a-t-on besoin en TypeScript ?

La mise en cache est une technique de stockage temporaire des données fréquemment utilisées dans un stockage rapide. Au lieu d'aller chercher les données à chaque fois dans la base de données ou sur un serveur distant, nous sauvegardons le résultat de la première requête et le renvoyons lors des accès ultérieurs.

Les avantages sont évidents :

• Réduction du temps de réponse (latence) — l'utilisateur reçoit les données en millisecondes
• Diminution de la charge sur le serveur et la base de données
• Économie de trafic et de ressources
• Possibilité de travailler hors ligne (pour le frontend)

En TypeScript, grâce au système de types, nous pouvons écrire une mise en cache sûre et prévisible qui ne se cassera pas à l'exécution. Voyons comment faire.

Stratégies de mise en cache : choisir la bonne approche

Avant d'écrire du code, il faut comprendre quelle stratégie vous allez utiliser. Cela déterminera l'efficacité de votre solution.

1. Cache In-Memory (cache en mémoire)

L'option la plus simple et la plus rapide. Les données sont stockées dans une variable, un Map ou un objet. Idéal pour le frontend et les petites applications Node.js.

Inconvénient : les données sont perdues lors du rechargement de la page ou du redémarrage du serveur.

2. LocalStorage / SessionStorage (cache dans le navigateur)

Convient au frontend lorsqu'il faut conserver des données entre les sessions. Idéal pour les paramètres utilisateur, les jetons et la mise en cache des réponses API.

Inconvénient : accès synchrone, limitation de taille (5-10 Mo).

3. Redis (cache sur le serveur)

Le standard industriel pour le backend. Rapide, fiable, avec prise en charge du TTL et des structures de données complexes. Fonctionne parfaitement avec Node.js via la bibliothèque ioredis.

Inconvénient : nécessite un service séparé (serveur Redis).

4. Service Worker + Cache API (PWA)

Cache avancé pour les Progressive Web Apps. Permet d'intercepter les requêtes réseau et de renvoyer des réponses mises en cache. Idéal pour le mode hors ligne.

Écrire un cache en TypeScript : du simple au complexe

Passons maintenant à la pratique. Je vais montrer plusieurs implémentations, de la basique à l'avancée, en utilisant les génériques TypeScript.

Cache In-Memory simple avec TTL

Commençons par le classique — un cache en mémoire avec suppression automatique des entrées obsolètes.

// cache.tsinterface CacheEntry<T> {    data: T;    expiry: number; // timestamp en millisecondes}

class SimpleCache<T> {    private store = new Map<string, CacheEntry<T>>();

    constructor(private defaultTTL: number = 60000) {} // 60 secondes par défaut

    set(key: string, data: T, ttl?: number): void {        const expiry = Date.now() + (ttl ?? this.defaultTTL);        this.store.set(key, { data, expiry });    }

    get(key: string): T | undefined {        const entry = this.store.get(key);        if (!entry) return undefined;        if (Date.now() > entry.expiry) {            this.store.delete(key);            return undefined; // expiré        }        return entry.data;    }

    has(key: string): boolean {        return this.get(key) !== undefined;    }

    clear(): void {