Caching – Performance & Invalidation Patterns

Production patterns for Redis, HTTP caching, cache invalidation, and memoization

When to Use This Skill

Use this skill when:

• Implementing Redis or in-memory caching
• Setting up HTTP cache headers
• Designing cache invalidation strategies
• Optimizing database query performance
• Configuring CDN caching
• Implementing memoization patterns

Don’t use this skill when:

• Data must always be fresh (real-time requirements)
• Cache adds more complexity than value
• Storage costs exceed compute savings

Critical Patterns

Pattern 1: Cache-Aside (Lazy Loading)

When: Most common pattern for database caching

// ✅ GOOD: Cache-aside pattern with Redis
import Redis from 'ioredis';

const redis = new Redis(process.env.REDIS_URL);

async function getUser(userId: string): Promise<User> {
  const cacheKey = `user:${userId}`;

  // 1. Try cache first
  const cached = await redis.get(cacheKey);
  if (cached) {
    return JSON.parse(cached);
  }

  // 2. Cache miss - fetch from database
  const user = await db.user.findUnique({ where: { id: userId } });

  if (!user) {
    throw new NotFoundError('User');
  }

  // 3. Store in cache with TTL
  await redis.setex(cacheKey, 3600, JSON.stringify(user)); // 1 hour TTL

  return user;
}

// ✅ GOOD: Generic cache wrapper
async function withCache<T>(
  key: string,
  ttlSeconds: number,
  fetcher: () => Promise<T>
): Promise<T> {
  const cached = await redis.get(key);
  if (cached) {
    return JSON.parse(cached);
  }

  const data = await fetcher();
  await redis.setex(key, ttlSeconds, JSON.stringify(data));
  return data;
}

// Usage
const user = await withCache(
  `user:${userId}`,
  3600,
  () => db.user.findUnique({ where: { id: userId } })
);

// ❌ BAD: No TTL (cache lives forever)
await redis.set(cacheKey, JSON.stringify(user)); // Never expires!

Pattern 2: Cache Invalidation

When: Keeping cache in sync with data changes

// ✅ GOOD: Invalidate on write
async function updateUser(userId: string, data: UpdateUserInput) {
  // Update database
  const user = await db.user.update({
    where: { id: userId },
    data,
  });

  // Invalidate cache
  await redis.del(`user:${userId}`);

  // Also invalidate related caches
  await redis.del(`user-profile:${userId}`);
  await redis.del(`user-settings:${userId}`);

  return user;
}

// ✅ GOOD: Pattern-based invalidation
async function invalidateUserCaches(userId: string) {
  // Find and delete all keys matching pattern
  const keys = await redis.keys(`user:${userId}:*`);
  if (keys.length > 0) {
    await redis.del(...keys);
  }
}

// ✅ GOOD: Write-through cache (update cache on write)
async function updateProduct(id: string, data: UpdateProductInput) {
  const product = await db.product.update({
    where: { id },
    data,
  });

  // Update cache with new data (instead of just deleting)
  await redis.setex(`product:${id}`, 3600, JSON.stringify(product));

  return product;
}

// ❌ BAD: Forgetting to invalidate
async function updateUser(userId: string, data: UpdateUserInput) {
  const user = await db.user.update({ where: { id: userId }, data });
  // Cache still has old data!
  return user;
}

Pattern 3: HTTP Cache Headers

When: Caching API responses at CDN/browser level

// ✅ GOOD: Immutable static assets
// Next.js: next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/_next/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

// ✅ GOOD: API responses with revalidation
// Express/Next.js API route
export async function GET(request: Request) {
  const products = await getProducts();

  return Response.json(products, {
    headers: {
      'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300',
      // CDN caches for 60s, serves stale for 5min while revalidating
    },
  });
}

// ✅ GOOD: Private user data (no CDN caching)
export async function GET(request: Request) {
  const user = await getCurrentUser();

  return Response.json(user, {
    headers: {
      'Cache-Control': 'private, no-cache, no-store, must-revalidate',
    },
  });
}

// ✅ GOOD: ETag for conditional requests
import { createHash } from 'crypto';

export async function GET(request: Request) {
  const data = await getData();
  const etag = createHash('md5').update(JSON.stringify(data)).digest('hex');

  // Check if client has current version
  if (request.headers.get('if-none-match') === etag) {
    return new Response(null, { status: 304 });
  }

  return Response.json(data, {
    headers: {
      'ETag': etag,
      'Cache-Control': 'public, max-age=0, must-revalidate',
    },
  });
}

// ❌ BAD: Caching user-specific data publicly
return Response.json(userDashboard, {
  headers: { 'Cache-Control': 'public, max-age=3600' }, // Other users see this!
});

Pattern 4: Memoization

When: Caching function results in memory

// ✅ GOOD: Simple memoization
function memoize<T extends (...args: any[]) => any>(fn: T): T {
  const cache = new Map<string, ReturnType<T>>();

  return ((...args: Parameters<T>): ReturnType<T> => {
    const key = JSON.stringify(args);

    if (cache.has(key)) {
      return cache.get(key)!;
    }

    const result = fn(...args);
    cache.set(key, result);
    return result;
  }) as T;
}

// Usage
const expensiveCalculation = memoize((n: number) => {
  // Complex computation
  return fibonacci(n);
});

// ✅ GOOD: LRU cache with size limit
import { LRUCache } from 'lru-cache';

const cache = new LRUCache<string, User>({
  max: 500, // Max 500 items
  ttl: 1000 * 60 * 5, // 5 minutes
});

async function getUser(id: string): Promise<User> {
  const cached = cache.get(id);
  if (cached) return cached;

  const user = await db.user.findUnique({ where: { id } });
  if (user) cache.set(id, user);
  return user;
}

// ✅ GOOD: React useMemo for expensive renders
function ProductList({ products, filters }) {
  const filteredProducts = useMemo(() => {
    return products.filter(p => matchesFilters(p, filters));
  }, [products, filters]);

  return <div>{filteredProducts.map(p => <ProductCard key={p.id} product={p} />)}</div>;
}

// ❌ BAD: Unbounded cache (memory leak)
const cache = new Map(); // Grows forever!

Pattern 5: Cache Stampede Prevention

When: Preventing thundering herd on cache expiry

// ✅ GOOD: Mutex lock to prevent stampede
import Redlock from 'redlock';

const redlock = new Redlock([redis], {
  retryCount: 3,
  retryDelay: 200,
});

async function getDataWithLock(key: string): Promise<Data> {
  // Try cache first
  const cached = await redis.get(key);
  if (cached) {
    return JSON.parse(cached);
  }

  // Acquire lock before fetching
  const lockKey = `lock:${key}`;
  let lock;

  try {
    lock = await redlock.acquire([lockKey], 5000);

    // Check cache again (another process might have populated it)
    const cachedAgain = await redis.get(key);
    if (cachedAgain) {
      return JSON.parse(cachedAgain);
    }

    // Fetch and cache
    const data = await fetchExpensiveData();
    await redis.setex(key, 3600, JSON.stringify(data));
    return data;
  } finally {
    if (lock) await lock.release();
  }
}

// ✅ GOOD: Stale-while-revalidate pattern
async function getWithSWR(key: string, ttl: number, staleTtl: number) {
  const cached = await redis.get(key);

  if (cached) {
    const { data, timestamp } = JSON.parse(cached);
    const age = Date.now() - timestamp;

    // Fresh - return immediately
    if (age < ttl * 1000) {
      return data;
    }

    // Stale but usable - return and refresh in background
    if (age < staleTtl * 1000) {
      refreshInBackground(key, ttl); // Don't await
      return data;
    }
  }

  // No cache or too stale - fetch synchronously
  return await fetchAndCache(key, ttl);
}

// ❌ BAD: All requests hit database on cache miss
async function getData() {
  const cached = await redis.get('data');
  if (cached) return JSON.parse(cached);

  // 1000 concurrent requests all hit database!
  const data = await db.data.findMany();
  await redis.setex('data', 60, JSON.stringify(data));
  return data;
}

Code Examples

For complete, production-ready examples, see references/examples.md:

• Redis Session Store
• Query Result Caching
• CDN Cache with Vercel
• LRU Cache with TTL

Anti-Patterns

Don’t: Cache Without TTL

// ❌ BAD: No expiration
await redis.set('user:123', JSON.stringify(user));

// ✅ GOOD: Always set TTL
await redis.setex('user:123', 3600, JSON.stringify(user));

Don’t: Cache Errors

// ❌ BAD: Caching error responses
const result = await fetchData().catch(() => ({ error: true }));
await redis.setex(key, 3600, JSON.stringify(result)); // Error cached for 1 hour!

// ✅ GOOD: Only cache successful responses
try {
  const result = await fetchData();
  await redis.setex(key, 3600, JSON.stringify(result));
  return result;
} catch (error) {
  // Don't cache errors
  throw error;
}

Don’t: Ignore Cache Serialization

// ❌ BAD: Caching non-serializable data
const user = await getUser();
user.getFullName = () => `${user.firstName} ${user.lastName}`;
await redis.set(key, JSON.stringify(user)); // Method is lost!

// ✅ GOOD: Cache plain data, reconstruct on retrieval
await redis.set(key, JSON.stringify({ ...user }));

Quick Reference

Resources

Related Skills:

• performance: Overall performance optimization
• redis: Redis-specific patterns (if exists)
• observability: Cache hit/miss monitoring

Keywords

caching, redis, cache-invalidation, http-cache, cdn, memoization, ttl, lru, stale-while-revalidate, cache-aside