Strategi Caching Claude Code untuk Aplikasi Nyata

Caching bukan tombol ajaib untuk membuat aplikasi langsung cepat. Di produk nyata, browser HTTP cache, CDN, Service Worker Cache API, Redis, dan memori proses menyimpan jenis data yang berbeda dengan umur yang berbeda. Jika kita meminta Claude Code “tambahkan caching” tanpa batasan, aplikasi bisa terasa lebih cepat tetapi tetap menampilkan harga lama, stok yang sudah berubah, atau data pengguna yang seharusnya tidak masuk ke shared cache.

Artikel ini memberi rulebook praktis sebelum Claude Code mengubah kode. Kita akan menentukan data apa yang boleh dicache, berapa lama boleh stale, bagaimana invalidation dilakukan, dan perintah apa yang dipakai untuk verifikasi. Masa mencoba pola ini di aplikasi Express kecil dan workflow situs konten; peningkatan terbesar justru datang dari mendokumentasikan ownership tiap layer, bukan dari menambahkan Redis secara membabi buta.

flowchart LR
  User[Browser] --> Http[HTTP cache]
  Http --> SW[Service worker Cache API]
  SW --> CDN[CDN or edge cache]
  CDN --> App[Node app]
  App --> Redis[Redis cache]
  App --> DB[(Database)]

Mulai dari keputusan, bukan library

Sebelum Claude Code menulis implementasi, jawab empat pertanyaan ini:

1. Pengguna mana saja yang boleh melihat response yang sama?
2. Berapa lama data boleh stale sebelum merugikan bisnis?
3. Key, URL, atau cache tag mana yang dihapus setelah update?
4. Siapa yang menjalankan rollback atau purge ketika cache salah?

Static image dan JavaScript bundle yang memiliki hash biasanya bisa dicache lama. Billing page, account settings, dan HTML yang bergantung pada login tidak boleh masuk shared cache. Panduan MDN tentang HTTP caching menjelaskan perbedaan penting antara private browser cache dan shared cache seperti proxy atau CDN.

Perbandingan layer

Layer	Cocok untuk	Panduan TTL	Model invalidation	Failure umum
Browser HTTP cache	Image, CSS, JS, public API pendek	1 menit sampai 1 tahun	filename berubah, ETag, Cache-Control	API lama menampilkan layar lama
CDN atau edge cache	Artikel, product list, OGP image	30 detik sampai 1 hari	URL purge, tag purge, deploy purge	HTML login tercache untuk semua orang
Service Worker Cache API	Offline page, app shell, asset statis	berbasis versi	ganti nama cache saat rilis	worker lama menyajikan bundle lama
Redis atau app cache	Agregat DB, external API, ranking	10 detik sampai 1 jam	desain key, TTL, event update	KEYS memblokir Redis production
Process memory	config value, feature flag sementara	detik sampai menit	restart atau clear eksplisit	beberapa instance tidak konsisten

Simpan tabel ini di CLAUDE.md agar Claude Code punya aturan stabil saat membuat route baru. Untuk instruksi proyek yang lebih rapi, lihat juga CLAUDE.md best practices.

Use case 1: HTTP cache di Express

Cache pertama yang perlu diperbaiki sering kali bukan Redis, tetapi response header. Cache-Control memberi tahu browser dan CDN berapa lama response boleh disimpan. Direktif resminya ada di dokumentasi MDN Cache-Control header.

npm install express
node server.js

// server.js
const express = require("express");

const app = express();

function cacheControl(req, res, next) {
  const path = req.path;

  if (path.startsWith("/assets/")) {
    res.set("Cache-Control", "public, max-age=31536000, immutable");
    return next();
  }

  if (path.startsWith("/api/private/")) {
    res.set("Cache-Control", "no-store");
    return next();
  }

  if (path.startsWith("/api/public/")) {
    res.set("Cache-Control", "public, max-age=60, s-maxage=300, stale-while-revalidate=600");
    res.set("Vary", "Accept-Encoding");
    return next();
  }

  res.set("Cache-Control", "no-cache");
  next();
}

app.use(cacheControl);
app.use("/assets", express.static("public/assets"));

app.get("/api/public/products", (_req, res) => {
  res.json({ items: ["book", "template", "consultation"], generatedAt: new Date().toISOString() });
});

app.get("/api/private/me", (_req, res) => {
  res.json({ userId: "demo-user", plan: "team" });
});

app.listen(3000, () => console.log("http://localhost:3000"));

Pilihan desain paling penting adalah pemisahan route. /api/private/ mendapat no-store, sehingga browser dan CDN tidak seharusnya menyimpannya. Public API mendapat TTL browser pendek dan TTL CDN lebih panjang melalui s-maxage.

Use case 2: Redis getOrSet helper

Redis berguna saat query database atau external API sering diulang. Default yang aman adalah pola cache-aside: cek Redis lebih dulu, load dari sumber saat miss, lalu simpan dengan TTL.

npm install redis

// cache.js
const { createClient } = require("redis");

const redis = createClient({
  url: process.env.REDIS_URL || "redis://localhost:6379",
});

let connecting;

async function client() {
  if (redis.isOpen) return redis;
  if (!connecting) connecting = redis.connect();
  await connecting;
  return redis;
}

async function getOrSet(key, ttlSeconds, loader) {
  const r = await client();
  const cached = await r.get(key);

  if (cached !== null) {
    return JSON.parse(cached);
  }

  const fresh = await loader();
  await r.set(key, JSON.stringify(fresh), { EX: ttlSeconds });
  return fresh;
}

async function invalidate(keys) {
  const r = await client();
  if (keys.length > 0) {
    await r.del(keys);
  }
}

module.exports = { getOrSet, invalidate };

// products.js
const { getOrSet, invalidate } = require("./cache");

async function loadProductsFromDb() {
  return [
    { id: "p1", name: "Prompt Templates", price: 500 },
    { id: "p2", name: "Claude Code Consultation", price: 15000 },
  ];
}

async function getPublicProducts() {
  return getOrSet("products:list:v1", 300, loadProductsFromDb);
}

async function updateProduct(productId, patch) {
  console.log("update db", productId, patch);
  await invalidate(["products:list:v1", `products:item:${productId}:v1`]);
}

module.exports = { getPublicProducts, updateProduct };

Hindari KEYS products:* di production. Saat keyspace membesar, Redis bisa terblokir. Lebih aman memakai daftar key yang diketahui, set untuk key terkait, atau maintenance command berbasis SCAN.

Use case 3: versioning Service Worker Cache API

Service worker dapat mengintersep request browser. Cache API berguna untuk offline page, app shell, dan static asset. Risiko utamanya adalah stale worker: jika nama cache tidak berubah, worker lama bisa tetap menyajikan JavaScript lama setelah deploy.

// public/sw.js
const CACHE_VERSION = "claude-code-cache-v2026-06-01";
const STATIC_CACHE = `${CACHE_VERSION}:static`;
const PRECACHE_URLS = ["/", "/offline.html", "/assets/app.css"];

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open(STATIC_CACHE)
      .then((cache) => cache.addAll(PRECACHE_URLS))
      .then(() => self.skipWaiting())
  );
});

self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches
      .keys()
      .then((names) =>
        Promise.all(
          names
            .filter((name) => !name.startsWith(CACHE_VERSION))
            .map((name) => caches.delete(name))
        )
      )
      .then(() => self.clients.claim())
  );
});

self.addEventListener("fetch", (event) => {
  const request = event.request;
  if (request.method !== "GET") return;

  event.respondWith(
    caches.match(request).then((cached) => {
      if (cached) return cached;

      return fetch(request)
        .then((response) => {
          if (response.ok && new URL(request.url).pathname.startsWith("/assets/")) {
            const copy = response.clone();
            caches.open(STATIC_CACHE).then((cache) => cache.put(request, copy));
          }
          return response;
        })
        .catch(() => caches.match("/offline.html"));
    })
  );
});

Register dari client entry:

if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("/sw.js");
  });
}

Instruksikan Claude Code bahwa nama cache harus memuat tanggal rilis atau build ID, dan cache lama harus dihapus pada event activate.

Use case 4: prompt audit cache untuk Claude Code

Claude Code sangat berguna saat mengaudit seluruh repository, bukan hanya menambahkan satu helper. Dokumentasi resmi Claude Code common workflows menekankan loop kecil: investigasi, edit, lalu verifikasi. Pola itu cocok untuk pekerjaan cache.

You are auditing cache behavior in a web application.
Inspect this repository for HTTP headers, CDN assumptions, service workers, Redis, and process-memory caches.

Return:
1. Data stored by each cache layer
2. TTL and invalidation condition
3. Risk that personal or authenticated responses reach a shared cache
4. Concrete screens where stale data can appear
5. Minimal fix plan and verification commands

Constraints:
- Mark assumptions clearly
- Follow existing project patterns
- Suggest large refactors separately instead of applying them immediately

Prompt ini bisa menjadi konteks reusable. Simpan di template atau CLAUDE.md, lalu berikan diff yang sedang dikerjakan.

Practical scenarios

Use case: catalog produk. Product card publik dapat memakai CDN dengan TTL pendek, sementara list dari database dicache di Redis selama lima menit. Setelah edit produk, hapus key product-list dan purge URL CDN terkait.

Use case: admin dashboard. Agregat revenue dan page view dapat dicache 30 detik sampai 5 menit. Permissions, personal notification, dan billing data harus private atau no-store.

Use case: docs dan blog. HTML artikel dapat berada sebentar di edge, asset dengan hash dapat hidup lama, dan offline shell dimiliki service worker. Ini pola yang cocok untuk situs konten seperti ClaudeCodeLab.

Use case: external API. Redis dapat menyerap rate limit untuk weather, plan, exchange rate, atau status feed. Minta Claude Code memeriksa terms API karena beberapa provider membatasi penyimpanan.

Pitfalls dan failure cases

Kesalahan paling serius adalah mencache authenticated HTML di CDN. Jika response bergantung pada cookie, default-nya harus private atau no-store. Jika tetap butuh kecepatan CDN, pisahkan public shell dari data pengguna.

Header Vary yang hilang juga sering menyebabkan response salah. Jika bahasa, compression, device type, atau authorization mengubah response, pisahkan URL atau kirim Vary yang benar.

Redis bisa mengalami cache stampede ketika key populer expire dan banyak request menghantam database bersamaan. Tambahkan TTL jitter, lock pendek, atau fallback stale-while-revalidate.

Service worker dapat mempertahankan file yang sudah dihapus. Versioning cache, hapus nama lama saat activate, dan siapkan prosedur darurat untuk unregister worker.

Invalidation runbook

1. Tentukan blast radius: product, article, user, atau whole app.
2. Selesaikan database write terlebih dulu; jangan hapus cache jika write gagal.
3. Hapus Redis key memakai known key, related-key set, atau SCAN.
4. Purge CDN berdasarkan URL atau tag. Full purge adalah pilihan terakhir.
5. Naikkan versi service worker cache dan pastikan cache lama hilang.
6. Verifikasi dengan curl -I, browser DevTools, dan Redis hit-rate logs.
7. Saat incident, pendekkan TTL atau pindahkan route sensitif ke no-store, lalu kembalikan bertahap.

Jadikan runbook ini bagian dari definition of done Claude Code. Untuk disiplin workflow yang lebih luas, gabungkan dengan Claude Code productivity tips.

Training, templates, dan consultation

Jika ingin mengubah ini menjadi workflow tim, mulai dari ClaudeCodeLab product and template library agar CLAUDE.md, review prompt, dan audit prompt konsisten. Jika bagian tersulit adalah memetakan CDN, Redis, permissions, dan review rule ke repository nyata, gunakan Claude Code training and consultation page.

Referensi resmi: MDN HTTP caching, Cache API, Cache-Control, dan Anthropic Claude Code common workflows.

Setelah mencoba contoh di artikel ini, Masa melihat request static asset berkurang, TTL public API lebih mudah diprediksi, dan Redis getOrSet membuat database read yang tidak perlu terlihat di log. Tes service worker juga memperlihatkan pelajaran utama: tanpa deletion berbasis versi, CSS lama bisa bertahan setelah deploy. Keuntungan praktisnya bukan hanya speed, tetapi kejelasan tentang kapan setiap cached value boleh menjadi lama.