CachingCDNPerformance

HTTP caching dengan CDN Cloudflare

Ditulis oleh Harry Osmar Sitohang·Jun 2026·7 mnt

Situs terasa instan saat dikunjungi ulang — dan biaya menyajikannya hampir nol. Keduanya berasal dari caching: menyimpan salinan siap pakai dari setiap file di dekat pengunjung, sehingga kami tidak perlu membangun ulang atau mengambilnya lagi setiap kali. Sebuah cache sederhananya adalah salinan yang disimpan. Sebuah CDN (content delivery network) adalah armada server di ratusan kota yang masing-masing menyimpan salinan itu dekat dengan orang sungguhan.

Caching di sini bekerja pada dua tingkat, dan Anda mengatur keduanya:

Kode Anda — apps/labs/public/_headers, sebuah file teks biasa yang ikut terkirim di setiap deploy. File ini menempelkan header Cache-Control ke tiap file, yang memberi tahu browser dan Cloudflare berapa lama sebuah salinan tetap berlaku. Inilah kenop per-file yang presisi.
Dashboard Cloudflare Anda — beberapa tombol yang menentukan cara edge (server Cloudflare terdekat dengan pengunjung) dan origin (dist/ hasil build Anda, sumber kebenaran) saling berbicara.

Saat keduanya sepakat, sebuah request biasanya tidak perlu menempuh perjalanan sampai ke origin sama sekali.

Sebagian besar request dijawab oleh cache di dekat pengunjung; origin hanya disentuh saat terjadi miss.

Aturan emas cache-busting

Sebelum semua kebijakan, satu gagasan yang menentukan sisanya.

Pembeda tunggal inilah alasan kebijakan cache di bawah hanya punya dua bentuk: immutable selamanya untuk file ber-hash, dan singkat-tapi-revalidate untuk semua yang bernama stabil.

Kebijakan cache per jenis file — di dalam kode

Berikut public/_headers yang live, file yang mengirim kebijakan ini di setiap deploy. Cloudflare Pages membacanya dan menerapkan tiap aturan berdasarkan path request.

# Fingerprinted Vite assets (JS / CSS / fonts) — name changes when content does.
/assets/*
  Cache-Control: public, max-age=31536000, immutable

# App shell (HTML). Short window so repeat visits are instant; revalidate after,
# so a new deploy reaches visitors within ~5 minutes.
/
  Cache-Control: public, max-age=300, must-revalidate
/index.html
  Cache-Control: public, max-age=300, must-revalidate
/id
  Cache-Control: public, max-age=300, must-revalidate
/id/index.html
  Cache-Control: public, max-age=300, must-revalidate

# Stable-named images — fresh for a day, then serve-stale while revalidating.
/logos/*
  Cache-Control: public, max-age=86400, stale-while-revalidate=604800
/favicon.svg
  Cache-Control: public, max-age=86400, stale-while-revalidate=604800
/apple-touch-icon.png
  Cache-Control: public, max-age=86400, stale-while-revalidate=604800
/pangaea-logo.svg
  Cache-Control: public, max-age=86400, stale-while-revalidate=604800
/team/*
  Cache-Control: public, max-age=86400, stale-while-revalidate=604800
/journey/early-webgl-hero.webp
  Cache-Control: public, max-age=86400, stale-while-revalidate=604800

# SEO / crawler files — short cache so edits propagate quickly.
/robots.txt
  Cache-Control: public, max-age=3600
/sitemap.xml
  Cache-Control: public, max-age=3600
/llms.txt
  Cache-Control: public, max-age=3600

Apa yang dikatakan tiap aturan, dengan bahasa sederhana:

/assets/* (JS, CSS, dan font yang ber-hash) → public, max-age=31536000, immutable. Satu tahun, dan immutable berarti "tidak usah memeriksa ulang — nama ini tidak akan pernah menunjuk ke byte yang berbeda." Aman hanya karena namanya berubah saat isinya berubah.
/ dan /index.html (app shell — HTML yang menyalakan situs; /id sama untuk build Indonesia) → public, max-age=300, must-revalidate. Lima menit: navigasi ulang sesaat setelah yang pertama terasa instan, tetapi must-revalidate berarti setelah lima menit itu lewat, browser memeriksa ulang sebelum memakai lagi — jadi deploy baru menjangkau semua orang dalam sekitar lima menit.
/logos/*, favicon, /team/*, gambar .webp journey (gambar bernama stabil) → public, max-age=86400, stale-while-revalidate=604800. Segar selama sehari; selama seminggu setelahnya browser boleh menampilkan salinan yang sedikit lama secara instan sambil menyegarkannya di latar belakang. Pengunjung tidak pernah menunggu, dan gambar baru tiba pada tampilan berikutnya.
/robots.txt, /sitemap.xml, /llms.txt → public, max-age=3600. Satu jam, jadi suntingan pada sitemap atau file crawler menyebar cepat.

Di Cloudflare — dashboard

File _headers mengerjakan bagian presisinya; dashboard menyetel iklim tempat ia berjalan. Yang paling penting: suruh Cloudflare untuk menghormati header Anda, sehingga satu setelan dashboard menyeluruh tidak bisa diam-diam membatalkan kebijakan per-file yang baru saja Anda atur.

Setel Browser Cache TTL → Respect Existing Headers, supaya tiap file menjaga kebijakan persis dari _headers.
Biarkan Tiered Cache dan Always Online on — keduanya memangkas pengambilan ke origin dan menjaga situs tetap hidup.

Don't

Membiarkan nilai "Browser Cache TTL" di dashboard menimpa Cache-Control yang sudah Anda setel — itu akan meratakan asset setahun dan shell lima menit menjadi satu angka yang sama.
Meminify ulang dengan Auto Minify padahal Vite sudah meminify.

Bagaimana Pages melakukan cache secara bawaan

Apakah saya butuh R2 atau Cloudflare Images untuk logo?

Tidak — file Pages biasa sudah cukup

Segelintir logo SVG dan PNG terkirim sebagai file biasa di dalam build Anda dan disajikan gratis lewat CDN, tanpa biaya egress (transfer data keluar) dan tanpa kartu kredit. Anda tidak butuh R2 atau Images:

R2 adalah object storage dengan egress nol — dibuat untuk pustaka media besar atau file unggahan pengguna, bukan untuk tiga brand mark. (Catatan: mengaktifkan R2 meminta metode pembayaran bahkan pada free tier-nya — beda dengan Pages, yang sama sekali tak butuh kartu.)
Cloudflare Images adalah produk berbayar yang me-resize dan meng-encode ulang gambar secara on the fly — berguna saat Anda menyajikan banyak foto dalam banyak ukuran, berlebihan untuk sekumpulan logo yang tetap.

Untuk beberapa logo statis, Anda tidak butuh keduanya. Lewati saja; tinjau ulang hanya jika nanti Anda menyimpan media besar atau menerima unggahan pengguna.

Merangkainya

Dua hal kecil — sebuah file teks di repo dan empat tombol di dashboard — itulah yang membuat situs terasa instan di setiap kunjungan ulang dan hampir gratis untuk disajikan. Asset ber-hash hidup setahun di cache dan tak pernah perlu diperiksa ulang; shell HTML tetap segar dalam lima menit setelah deploy; gambar bernama stabil disajikan instan dan disegarkan diam-diam. Sebagian besar request dijawab oleh salinan di dekat pengunjung, dan origin disentuh kira-kira sekali per deploy.

Ini adalah Bagian 4 (caching) dari seri deploy: Bagian 1 · Arahkan domain ke Cloudflare, Bagian 2 · CI/CD dengan GitHub Actions → Pages, Bagian 3 · Root → www, dan saudara keamanannya SSL & keamanan di edge. Catatan diary berbahasa sederhananya ada di Bikin cepat dan aman →.

Sources