Caching Strategies for Web Applications

Caching dramatically improves application performance. This guide covers caching strategies at every layer of your application stack.

Caching Layers#

┌─────────────────────────────────────────────────────┐
│                    Browser Cache                     │
├─────────────────────────────────────────────────────┤
│                    CDN Cache                         │
├─────────────────────────────────────────────────────┤
│               Application Cache (Redis)              │
├─────────────────────────────────────────────────────┤
│                 Database Query Cache                 │
└─────────────────────────────────────────────────────┘

Browser Caching#

Cache-Control Headers#

// Next.js API route
export async function GET(request: Request) {
  const data = await fetchData();

  return Response.json(data, {
    headers: {
      // Cache for 1 hour, revalidate if stale
      'Cache-Control': 'public, max-age=3600, stale-while-revalidate=86400',

      // Or for private/user-specific data
      // 'Cache-Control': 'private, max-age=60',

      // ETags for conditional requests
      'ETag': generateETag(data),
    },
  });
}

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

Service Worker Caching#

// sw.js
const CACHE_NAME = 'app-v1';
const STATIC_ASSETS = [
  '/',
  '/styles.css',
  '/app.js',
];

// Cache static assets on install
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(STATIC_ASSETS);
    })
  );
});

// Stale-while-revalidate for API calls
self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      caches.open(CACHE_NAME).then(async (cache) => {
        const cachedResponse = await cache.match(event.request);

        const fetchPromise = fetch(event.request).then((response) => {
          cache.put(event.request, response.clone());
          return response;
        });

        return cachedResponse || fetchPromise;
      })
    );
  }
});

CDN Caching#

Vercel Edge Config#

// Caching at the edge
export const config = {
  runtime: 'edge',
};

export default async function handler(request: Request) {
  const data = await fetchFromOrigin();

  return new Response(JSON.stringify(data), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 's-maxage=3600, stale-while-revalidate',
      'CDN-Cache-Control': 'max-age=7200',
      'Vercel-CDN-Cache-Control': 'max-age=86400',
    },
  });
}

Cache Invalidation#

// Purge specific paths
async function invalidateCache(paths: string[]) {
  await fetch('https://api.vercel.com/v1/projects/{projectId}/purge', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.VERCEL_TOKEN}`,
    },
    body: JSON.stringify({ paths }),
  });
}

// Invalidate on content update
export async function updateProduct(id: string, data: ProductData) {
  await db.products.update(id, data);

  await invalidateCache([
    `/products/${id}`,
    '/products',
    '/api/products',
  ]);
}

Application-Level Caching#

Redis Caching Layer#

import Redis from 'ioredis';

class CacheService {
  private redis: Redis;
  private defaultTTL = 3600;

  constructor() {
    this.redis = new Redis(process.env.REDIS_URL);
  }

  async get<T>(key: string): Promise<T | null> {
    const cached = await this.redis.get(key);
    return cached ? JSON.parse(cached) : null;
  }

  async set<T>(key: string, value: T, ttl = this.defaultTTL): Promise<void> {
    await this.redis.setex(key, ttl, JSON.stringify(value));
  }

  async getOrSet<T>(
    key: string,
    fetcher: () => Promise<T>,
    ttl = this.defaultTTL
  ): Promise<T> {
    const cached = await this.get<T>(key);
    if (cached) return cached;

    const value = await fetcher();
    await this.set(key, value, ttl);
    return value;
  }

  async invalidate(pattern: string): Promise<void> {
    const keys = await this.redis.keys(pattern);
    if (keys.length) {
      await this.redis.del(...keys);
    }
  }
}

// Usage
const cache = new CacheService();

async function getProduct(id: string) {
  return cache.getOrSet(
    `product:${id}`,
    () => db.products.findById(id),
    3600
  );
}

Cache Patterns#

Cache-Aside#

async function getUserProfile(userId: string) {
  // Check cache first
  const cached = await cache.get(`user:${userId}`);
  if (cached) return cached;

  // Fetch from database
  const user = await db.users.findById(userId);

  // Store in cache
  await cache.set(`user:${userId}`, user, 3600);

  return user;
}

Write-Through#

async function updateUserProfile(userId: string, data: UserData) {
  // Update database
  const user = await db.users.update(userId, data);

  // Update cache immediately
  await cache.set(`user:${userId}`, user, 3600);

  return user;
}

Write-Behind (Write-Back)#

const writeQueue: Map<string, { data: any; timestamp: number }> = new Map();

async function updateWithWriteBehind(key: string, data: any) {
  // Update cache immediately
  await cache.set(key, data);

  // Queue database write
  writeQueue.set(key, { data, timestamp: Date.now() });
}

// Background worker flushes to database
setInterval(async () => {
  for (const [key, { data }] of writeQueue) {
    await db.update(key, data);
    writeQueue.delete(key);
  }
}, 5000);

Query-Level Caching#

Prisma with Redis#

import { Prisma } from '@prisma/client';

const prismaWithCache = prisma.$extends({
  query: {
    $allModels: {
      async findMany({ model, operation, args, query }) {
        const cacheKey = `prisma:${model}:${JSON.stringify(args)}`;

        const cached = await cache.get(cacheKey);
        if (cached) return cached;

        const result = await query(args);
        await cache.set(cacheKey, result, 300);

        return result;
      },
    },
  },
});

Memoization for Expensive Computations#

function memoize<T extends (...args: any[]) => any>(
  fn: T,
  keyFn?: (...args: Parameters<T>) => string
): T {
  const cache = new Map<string, ReturnType<T>>();

  return ((...args: Parameters<T>) => {
    const key = keyFn ? keyFn(...args) : 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(
  (data: number[]) => data.reduce((a, b) => a + complexOperation(b), 0)
);

Cache Invalidation Strategies#

Time-Based (TTL)#

await cache.set('data', value, 3600); // Expires in 1 hour

Event-Based#

// Pub/Sub for cache invalidation
const subscriber = new Redis(process.env.REDIS_URL);

subscriber.subscribe('cache-invalidation');

subscriber.on('message', async (channel, message) => {
  const { pattern } = JSON.parse(message);
  await cache.invalidate(pattern);
});

// Publish invalidation events
async function onProductUpdate(productId: string) {
  await publisher.publish('cache-invalidation', JSON.stringify({
    pattern: `product:${productId}*`,
  }));
}

Version-Based#

class VersionedCache {
  private version = Date.now();

  getKey(base: string): string {
    return `${base}:v${this.version}`;
  }

  invalidateAll() {
    this.version = Date.now();
  }
}

Best Practices#

Cache at the right level: Start with CDN, then application cache
Set appropriate TTLs: Balance freshness with performance
Plan for invalidation: Know how and when to clear caches
Monitor hit rates: Track cache effectiveness
Handle cache failures: Application should work without cache

Conclusion#

Effective caching requires understanding your data access patterns. Layer your caches appropriately, implement proper invalidation, and monitor cache performance.

Share this article