CDN (Content Delivery Network) adalah jaringan server yang tersebar di seluruh dunia, menyajikan konten dari lokasi terdekat dengan user.

Masalah tanpa CDN:

User di Jakarta → Request → Server di US → Response
                  Latency: ~200ms round trip
                  Setiap gambar, CSS, JS = 200ms tambahan

Dengan CDN:

User di Jakarta → Request → CDN Edge (Singapore) → Response
                  Latency: ~20ms round trip
                  File sudah di-cache di edge server terdekat

Bagaimana CDN bekerja:

1. User pertama request gambar.jpg
2. CDN Edge belum punya → request ke Origin Server
3. Origin kirim file → CDN Edge menyimpan (cache)
4. CDN Edge kirim ke user
5. User kedua request gambar.jpg → CDN Edge sudah punya → kirim langsung!

Apa yang di-cache CDN:

• Static assets — gambar, CSS, JS, fonts, video
• HTML halaman — halaman yang jarang berubah
• API response — response yang bisa di-cache (opsional)

Konfigurasi caching di CDN:

// Header dari origin server menentukan caching behavior
app.use("/static", (req, res, next) => {
  // Cache selama 1 tahun (immutable file dengan hash)
  res.set("Cache-Control", "public, max-age=31536000, immutable");
  next();
});

app.get("/api/articles", (req, res) => {
  // Cache 5 menit di CDN
  res.set("Cache-Control", "public, s-maxage=300");
  res.json(articles);
});

Cache Purging: Ketika file berubah, kamu perlu membersihkan cache di CDN:

// Strategi 1: Cache busting dengan hash di filename
// style.abc123.css → style.def456.css (URL beda = cache baru)

// Strategi 2: Purge via API
await fetch("https://api.cloudflare.com/client/v4/zones/ZONE/purge_cache", {
  method: "POST",
  body: JSON.stringify({ files: ["https://mysite.com/style.css"] })
});

Edge Computing — CDN yang bisa menjalankan kode:

CDN tradisional hanya menyajikan file statis. Edge computing memungkinkan kamu menjalankan kode di edge server, lebih dekat dengan user.

// Cloudflare Worker (berjalan di 300+ edge locations)
export default {
  async fetch(request) {
    const url = new URL(request.url);

    // A/B testing di edge (tanpa request ke origin)
    const variant = Math.random() > 0.5 ? "A" : "B";

    // Redirect berdasarkan lokasi user
    const country = request.headers.get("CF-IPCountry");
    if (country === "ID") {
      return Response.redirect("https://id.mysite.com" + url.pathname);
    }

    return fetch(request);
  }
};

Use cases edge computing:

• A/B testing — pilih variant tanpa roundtrip ke origin
• Authentication — verifikasi token di edge
• Geo-routing — redirect berdasarkan lokasi
• Image optimization — resize/compress gambar on-the-fly
• Bot protection — blokir bot sebelum sampai ke origin

CDN populer:

Tips: Untuk website Indonesia, pastikan CDN kamu punya edge server di Singapore atau Jakarta.

🎭 Analogi sehari-hari: CDN = waralaba minimarket. Daripada semua orang ke gudang pusat di Jakarta, ada Indomaret/Alfamart deket rumah (edge server). Mau beli sabun? Cabang Cibubur. Sudah habis? Cabang minta dari gudang pusat, simpan untuk pelanggan berikutnya. Lebih cepat, lebih murah, lebih dekat.

💡 Mengapa CDN bukan cuma untuk static? Edge computing = jalan kode di lokasi yang sama. Cloudflare Workers, Vercel Edge Functions bisa: A/B test, geo-redirect, auth check, image transform — tanpa hit origin. Latency 20ms vs 200ms ke origin = beda dunia untuk UX.

⚠️ Jebakan umum:

• Cache HTML dinamis tanpa hati-hati = user A lihat dashboard user B
• Lupa cache busting — deploy CSS baru, browser/CDN tetap pakai versi lama
• Cache TTL terlalu lama untuk konten yang bisa berubah
• Cookie jadi cache key = tiap user beda cache = miss rate 100%
• CDN region salah pilih = website Indonesia pakai CDN US = lambat

🎯 Cache strategy by asset type:

• Hashed assets (app.abc123.js) → cache immutable 1 tahun
• HTML page → cache 5 menit + revalidation
• API user-specific → no cache atau private cache
• API public data → s-maxage di CDN, stale-while-revalidate
• Image → optimasi + cache lama + format negotiation (webp/avif)

TL;DR: CDN = static + dynamic delivery dari edge dekat user. Static cache jangka panjang, HTML pendek + revalidate, API user-specific no-cache. Edge computing geser logic ke edge untuk latency 10x lebih baik. Default Cloudflare/Vercel Edge.