Tujuan Pembelajaran

Memahami konsep caching dan jenis-jenisnya
Bisa mengimplementasikan HTTP caching

Analogi

Diagram


      Caching = Menyimpan Stok di Rak Dekat:

Tanpa Cache:
[Pelanggan] → 'Mau kopi' → [Gudang jauh] → 5 menit

Dengan Cache:
[Pelanggan] → 'Mau kopi' → [Rak dekat] → 10 detik

Cache seperti rak dekat — data sering diakses disimpan di tempat yang lebih dekat

Penjelasan Konsep

Caching

Caching adalah teknik menyimpan data di tempat yang lebih dekat/dekat pengguna sehingga akses lebih cepat.

Jenis Caching

1. Browser Cache

Browser menyimpan file statis (CSS, JS, gambar) di local disk. Header: Cache-Control: max-age=3600

2. CDN (Content Delivery Network)

Server di seluruh dunia yang menyimpan copy file statis. User di Jakarta → request ke server CDN di Singapura (bukan US).

3. Server-side Cache

Redis: Cache hasil query database.
Memcached: Cache object di memory.

4. Database Cache

Query cache bawaan database.

Strategi Caching

Cache-First → Cek cache dulu,

Kalau tidak ada baru ke server.

Stale-While-Revalidate → Tampilkan cache, lalu update di background.
Cache Invalidation → Hapus cache saat data berubah (paling sulit!).

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami konsep caching dan jenis-jenisnya., dan bisa mengimplementasikan HTTP caching. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

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

Cara Membayangkannya

Cache seperti rak dekat — data sering diakses disimpan di tempat yang lebih dekat. 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 javascript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Baris 2-5: HTTP cache header. Baris 8-20: Redis cache dengan getEx. Baris 26-31: Service Worker cache.

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 sedang membangun skill inti. Setelah bagian ini, kamu bisa memilih spesialisasi sesuai minat: frontend, backend, atau DevOps.

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

javascript

// HTTP CACHE HEADER
app.use((req, res, next) => {
  res.setHeader('Cache-Control', 'public, max-age=3600');
  next();
});

// REDIS CACHE
const redis = require('redis');
const client = redis.createClient();

const getData = async (key) => {
  // Cek cache dulu
  const cached = await client.get(key);
  if (cached) return JSON.parse(cached);
  
  // Kalau tidak ada, ambil dari DB
  const data = await db.query(`SELECT * FROM products WHERE id = ?`, [key]);
  
  // Simpan ke cache (expire 1 jam)
  await client.setEx(key, 3600, JSON.stringify(data));
  return data;
};

// CDN (Cloudflare/AWS CloudFront)
// Cukup upload file ke CDN, mereka handle distribusi global

// SERVICE WORKER — Cache di browser
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Penjelasan Kode

Baris 2-5: HTTP cache header. Baris 8-20: Redis cache dengan getEx. Baris 26-31: Service Worker cache.

Prompt AI

Jelaskan kenapa cache invalidation disebut salah satu hal tersulit di CS.

Pertanyaan Reflektif

Analisis website-mu. File apa yang bisa di-cache? Berapa lama?