Caching Strategies Cheat Sheet

App --> [Cache hit?] --yes--> return cached
                   --no---> [Fetch DB] --> [Set Cache] --> return

App --> Cache Library --> [Cache hit?] --yes--> return
                                     --no---> [Auto-fetch DB] --> [Set Cache] --> return

App --> [Write DB] --> [Write Cache] --> return (both updated)

App --> [Write Cache] --> return (fast!)
                     [Background worker: drain queue --> DB]

// Explicit invalidation
async function deleteUser(id) {
  await db.query('DELETE FROM users WHERE id = $1', [id]);
  await redis.del(`user:${id}`);
}
 
// Tag-based invalidation (banyak key sekaligus)
async function updatePost(postId, data) {
  await db.query('UPDATE posts SET ... WHERE id = $1', [postId]);
 
  // Hapus cache post + semua list yang berisi post
  await redis.del(`post:${postId}`);
  await redis.del('posts:list');
  await redis.del('posts:featured');
}
 
// Version-based invalidation
const CACHE_VERSION = 'v2';
async function getUser(id) {
  return cache.wrap(`user:${id}:${CACHE_VERSION}`, fetchUser);
}
// Ganti CACHE_VERSION = 'v3' untuk invalidate semua sekaligus

// Redis TTL
await redis.set('key', 'value', 'EX', 3600);     // expire dalam 1 jam
await redis.set('key', 'value', 'PX', 60000);     // expire dalam 1 menit (ms)
await redis.expire('key', 3600);                   // set TTL pada key existing
await redis.persist('key');                        // hapus TTL (persistent)
await redis.ttl('key');                            // cek sisa TTL
 
// Strategi TTL per data type:
// - User session: 30 menit - 24 jam
// - Product catalog: 1-6 jam
// - Configuration: 5 menit
// - Analytics: 1-5 menit
// - Static content: 24+ jam

// Redis maxmemory dengan LRU
// redis.conf:
// maxmemory 256mb
// maxmemory-policy allkeys-lru
 
// Atau via command
// CONFIG SET maxmemory 256mb
// CONFIG SET maxmemory-policy allkeys-lru
 
// JavaScript LRU implementation
class LRUCache {
  constructor(maxSize = 100) {
    this.maxSize = maxSize;
    this.cache = new Map();
  }
 
  get(key) {
    if (!this.cache.has(key)) return undefined;
    const value = this.cache.get(key);
    this.cache.delete(key);
    this.cache.set(key, value); // move to end (most recent)
    return value;
  }
 
  set(key, value) {
    if (this.cache.has(key)) {
      this.cache.delete(key);
    } else if (this.cache.size >= this.maxSize) {
      // Delete oldest (first entry)
      const oldestKey = this.cache.keys().next().value;
      this.cache.delete(oldestKey);
    }
    this.cache.set(key, value);
  }
}

// Redis config
// maxmemory-policy allkeys-lfu
// LFU menggunakan probabilistic counter + decay
 
// Manual LFU di JavaScript
class LFUCache {
  constructor(maxSize = 100) {
    this.maxSize = maxSize;
    this.cache = new Map();      // key -> { value, freq }
  }
 
  get(key) {
    if (!this.cache.has(key)) return undefined;
    const entry = this.cache.get(key);
    entry.freq++;
    return entry.value;
  }
 
  set(key, value) {
    if (this.cache.size >= this.maxSize && !this.cache.has(key)) {
      // Find least frequently used
      let minKey, minFreq = Infinity;
      for (const [k, v] of this.cache) {
        if (v.freq < minFreq) {
          minFreq = v.freq;
          minKey = k;
        }
      }
      this.cache.delete(minKey);
    }
    this.cache.set(key, { value, freq: 1 });
  }
}

# Cache-Control (paling powerful)
Cache-Control: public, max-age=3600           # cache 1 jam
Cache-Control: private, max-age=0              # browser only, no CDN
Cache-Control: no-cache                         # revalidate setiap kali
Cache-Control: no-store                         # never cache
Cache-Control: max-age=31536000, immutable      # 1 tahun, tidak akan berubah
Cache-Control: public, max-age=3600, s-maxage=86400  # browser 1jam, CDN 1hari
 
# ETag (content fingerprint)
ETag: "abc123"
# Response berikutnya bisa:
If-None-Match: "abc123"
# Server balas 304 Not Modified kalau sama
 
# Last-Modified
Last-Modified: Wed, 21 Jun 2026 09:00:00 GMT
If-Modified-Since: Wed, 21 Jun 2026 09:00:00 GMT
 
# Vary (cache key berdasarkan header)
Vary: Accept-Encoding, Accept-Language

// Next.js 16 Cache Components
import { unstable_cache } from 'next/cache';
 
// Cache function result
const getCachedUser = unstable_cache(
  async (id) => {
    return await db.user.findById(id);
  },
  ['user'],          // cache key prefix
  {
    revalidate: 3600, // revalidate every hour
    tags: ['users'],  // for on-demand revalidation
  }
);
 
// On-demand revalidation
import { revalidateTag } from 'next/cache';
revalidateTag('users');

// Service Worker cache
const CACHE_NAME = 'app-v1';
const ASSETS = ['/', '/styles.css', '/app.js'];
 
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
  );
});
 
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      return cached || fetch(event.request);
    })
  );
});

// Cloudflare Page Rules (via Wrangler atau dashboard)
// Cache everything untuk API responses
{
  "matches": ["api.example.com/*"],
  "cache": {
    "edgeTtl": 3600,
    "browserTtl": 60
  }
}
 
// Vercel Edge Config + cache
export const config = {
  runtime: 'edge',
};
 
export default async function handler(req) {
  const data = await getData();
  return new Response(JSON.stringify(data), {
    headers: {
      'Cache-Control': 's-maxage=3600, stale-while-revalidate=86400',
    },
  });
}

// Cache key yang baik: specific, hierarchical, versionable
 
// BAD: terlalu generik
redis.set('data', JSON.stringify(data));
 
// GOOD: namespaced + specific
redis.set('user:123:profile', JSON.stringify(data));
redis.set('posts:list:page:1:limit:10', JSON.stringify(data));
redis.set('api:v2:search:q=hello:sort=date', JSON.stringify(data));
 
// Version key buat bulk invalidation
redis.set('v2:user:123:profile', data);
// Ganti v2 -> v3 untuk invalidate semua user caches