Lewati ke konten utama
menjadi.dev
Chapter 27.2 System Design Spesialisasi

Caching Strategies: Dari Browser sampai Database

Multi-layer caching untuk performa maksimal

Tujuan Pembelajaran

  • Mengerti berbagai layer caching dalam arsitektur web
  • Bisa memilih caching strategy yang tepat
  • Mengerti cache invalidation dan eviction policies

Analogi

Diagram

      Caching Layers (CDN -> Browser -> App -> Database):
1. CDN Cache (CloudFlare) -> Static assets, TTL 1h
2. Browser Cache -> Cache-Control headers
3. Application Cache (Redis) -> Computed data, TTL 5m
4. Database Cache (Query Cache) -> Frequent queries
5. ORM Cache -> Entity cache
    

Caching adalah salah satu teknik paling efektif untuk meningkatkan performa — tapi juga sumber bug paling umum

Penjelasan Konsep

Caching adalah teknik menyimpan data di lokasi yang lebih dekat ke consumer sehingga akses lebih cepat.

Tapi caching juga membuat sistem lebih kompleks — cache invalidation adalah salah satu dari dua hal tersulit dalam computer science (bersama naming things dan off-by-one errors).

CDN Cache (Layer 1)

CDN (Content Delivery Network) menyimpan static assets (gambar, CSS, JS, video) di edge servers di seluruh dunia.

User mengakses dari edge terdekat — latency jauh lebih rendah.

TTL (Time To Live) menentukan berapa lama asset di-cache.

Browser Cache (Layer 2)

Browser menyimpan asset berdasarkan HTTP cache headers — Cache-Control (max-age, no-cache,

No-store), ETag (content hash untuk conditional request), Last-Modified.

Application Cache (Layer 3)

Redis/Memcached menyimpan computed data, session, rate limit counters.

Patterns: Cache-aside (app cek cache → miss → fetch DB → store cache), Write-through (tulis ke cache dan DB bersamaan), Write-behind (tulis ke cache, async ke DB).

Cache Invalidation

Cache warming (pre-populate saat startup),

TTL-based (expire otomatis), Event-based (invalidate saat data berubah), Version-based (cache key include version number).

Eviction Policies

LRU (Least Recently Used — paling umum), LFU (Least Frequently Used), FIFO (First In First Out), Random.

Inti yang Perlu Dipahami

Bagian ini berfokus pada mengerti berbagai layer caching dalam arsitektur web., bisa memilih caching strategy yang tepat., dan mengerti cache invalidation dan eviction policies. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Caching Strategies, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Caching adalah salah satu teknik paling efektif untuk meningkatkan performa — tapi juga sumber bug paling umum. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Cache-aside: app bertanggung jawab mengelola cache. Setex untuk store dengan TTL. Del untuk invalidate saat data berubah. Pattern ini paling flexible tapi ada race condition window antara DB write dan cache invalidation.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript
// Cache-aside pattern dengan Redis
import { Redis } from 'ioredis';
const redis = new Redis(process.env.REDIS_URL);

async function getUserWithCache(userId: string) {
  const cacheKey = `user:${userId}`;
  
  // 1. Cek cache dulu
  const cached = await redis.get(cacheKey);
  if (cached) {
    console.log('[CACHE] Cache hit');
    return JSON.parse(cached);
  }
  
  // 2. Cache miss → fetch dari database
  console.log('[CACHE] Cache miss → querying DB');
  const user = await db.select().from(users).where(eq(users.id, userId)).limit(1);
  
  if (user.length) {
    // 3. Store ke cache untuk request berikutnya
    await redis.setex(cacheKey, 300, JSON.stringify(user[0])); // TTL 5 menit
  }
  
  return user[0] ?? null;
}

// Cache invalidation saat data berubah
async function updateUser(userId: string, data: Partial<User>) {
  // Update database
  await db.update(users).set(data).where(eq(users.id, userId));
  
  // Invalidate cache
  await redis.del(`user:${userId}`);
  
  // Jika ada cache list yang include user ini, invalidate juga
  await redis.del('users:list');
}

Penjelasan Kode

Cache-aside: app bertanggung jawab mengelola cache. Setex untuk store dengan TTL. Del untuk invalidate saat data berubah. Pattern ini paling flexible tapi ada race condition window antara DB write dan cache invalidation.

Prompt AI

Implementasikan write-through caching pattern untuk product catalog. Bandingkan latency dan consistency dengan cache-aside pattern.

Pertanyaan Reflektif

Caching bisa meningkatkan performa 10-100x, tapi selalu pertimbangkan: apa yang terjadi kalau cache down? Sistem harus tetap berfungsi (graceful degradation).