Cache Nginx + CDN untuk Website Cepat: Panduan Lengkap

Website modern, terutama e‑commerce, media, atau portal dengan trafik tinggi, sangat bergantung pada kecepatan loading dan pengalaman pengguna. Salah satu strategi paling efektif adalah menggabungkan caching di Nginx dengan CDN.

Dengan strategi ini:

• Halaman statis dan dinamis dapat diakses lebih cepat
• Beban server origin berkurang drastis
• Konten dapat diakses cepat oleh pengunjung global

Artikel ini membahas panduan lengkap, mulai dari konsep hingga konfigurasi teknis dan optimasi.

---

1. Konsep Cache Nginx dan CDN

a. Cache Nginx

Nginx dapat menyimpan konten baik untuk static maupun dynamic content.

• Static cache: untuk file seperti gambar, CSS, JS, font
• Dynamic cache / microcache: untuk halaman PHP, CMS, atau API endpoint
• FastCGI cache: menyimpan hasil PHP-FPM agar tidak diproses ulang

b. Cache CDN

CDN (Content Delivery Network) menyimpan salinan konten statis di server global sehingga pengunjung menerima konten dari server terdekat. CDN umumnya juga mendukung caching dinamis untuk konten yang jarang berubah.

Manfaat kombinasi Nginx + CDN:

1. Mengurangi latency → akses lebih cepat untuk user global
2. Mengurangi load server → Nginx tidak selalu memproses PHP atau file statis
3. Skala trafik tinggi → cocok untuk e‑commerce dan media
4. Optimasi bandwidth → kompresi dan caching

---

2. Konfigurasi Static Content Cache di Nginx

Untuk file statis, gunakan kombinasi expires dan Cache-Control.

location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff|woff2|webp)$ {
    root /var/www/example.com/html;
    expires 30d;
    add_header Cache-Control "public, max-age=2592000, immutable";
    access_log off;
}

Penjelasan:

• expires 30d → browser cache selama 30 hari
• Cache-Control: immutable → memberitahu browser/CDN konten jarang berubah
• access_log off → mengurangi log untuk file statis yang sering diakses

---

3. Dynamic Content Caching / Microcaching

Halaman yang dihasilkan PHP atau CMS bisa dibebankan ke Nginx dengan microcaching:

fastcgi_cache_path /var/cache/nginx/microcache levels=1:2 keys_zone=MICRO:20m inactive=30s;
fastcgi_cache_key "$scheme$request_method$host$request_uri";

server {
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;

        fastcgi_cache MICRO;
        fastcgi_cache_valid 200 30s;
        fastcgi_cache_use_stale error timeout invalid_header updating;
        add_header X-Cache-Status $upstream_cache_status;
    }
}

Penjelasan teknis:

• Cache hanya 30 detik (fastcgi_cache_valid 200 30s) untuk homepage atau listing produk
• fastcgi_cache_use_stale → menampilkan konten cache saat backend error
• X-Cache-Status → memudahkan monitoring HIT/MISS

---

4. Mengintegrasikan Nginx Cache dengan CDN

a. Setup CDN Origin Pull

1. Buat CNAME record untuk subdomain CDN:

cdn.example.com → cdn.provider.com

2. Pastikan Nginx origin melayani konten statis dengan header cache:

add_header Cache-Control "public, max-age=3600, s-maxage=3600, immutable";
etag on;

• max-age → browser cache
• s-maxage → cache CDN
• ETag → cache conditional request

b. CDN Pull vs Push

• Origin Pull: CDN mengambil konten dari origin saat pertama kali diminta
• Origin Push: Konten di-upload ke CDN secara manual atau otomatis

Origin pull biasanya lebih fleksibel dan dinamis.

---

5. Cache Purge dan Invalidation

Saat konten diperbarui, cache harus dibersihkan:

• Nginx: Hapus file cache FastCGI:

sudo rm -rf /var/cache/nginx/microcache/*

• CDN: Gunakan API atau dashboard untuk purge file tertentu
• Automation: CMS plugin atau skrip bash dapat mengotomatisasi purge saat update konten

Tips: purge hanya file yang diubah agar cache lainnya tetap efektif.

---

6. Gzip dan Brotli Compression

Kombinasi cache + kompresi mempercepat load:

gzip on;
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
gzip_min_length 256;
gzip_comp_level 5;

brotli on;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;
brotli_comp_level 5;

• File terkompresi lebih kecil → CDN dan browser menerima lebih cepat
• Brotli lebih efisien dibanding gzip untuk text-based assets

---

7. Cache untuk Query String dan API

Website dinamis sering menggunakan query string, misalnya:

/products?category=electronics&page=2

Konfigurasi cache Nginx agar query string tetap dihitung:

fastcgi_cache_key "$scheme$request_method$host$request_uri";
fastcgi_cache_valid 200 30s;

• Cache tetap berbeda untuk setiap URL + query string
• Pastikan halaman checkout, login, dan cart tidak di-cache

---

8. Monitoring dan Debugging Cache

• Gunakan header X-Cache-Status untuk melihat status:

HIT → konten dari cache  
MISS → konten baru diambil dari backend  
BYPASS → cache dilewati  
EXPIRED → cache sudah kadaluarsa

• CDN juga biasanya menyediakan dashboard cache hit/miss ratio
• Pantau error log untuk konten tidak ter-cache karena permission atau header

---

9. Advanced Tips Cache + CDN

1. Microcaching untuk traffic tinggi → homepage atau listing produk selama 10–60 detik
2. Stale Cache Delivery → tetap tampilkan konten lama saat backend error
3. Selective Purge → purge cache spesifik file / halaman, bukan seluruh cache
4. Cache busting → tambahkan hash pada asset untuk versi terbaru

Contoh cache busting:

/css/style.abc123.css → update hash saat konten berubah

5. Integrasi Redis/Memcached → untuk caching dynamic content yang kompleks

---

Kesimpulan

Dengan strategi caching Nginx + CDN yang tepat:

• Website global lebih cepat dan responsive
• Beban server origin berkurang drastis
• Cache dinamis dan statis dikelola efisien
• Konten selalu aman dan update tetap cepat

Kombinasi microcaching, FastCGI cache, CDN, kompresi, dan purge otomatis membuat website scalable, aman, dan siap untuk trafik tinggi.

---