CachingCDNPerformance

HTTP caching dengan CDN Cloudflare

Ditulis oleh Harry Osmar Sitohang·Jun 2026·7 mnt

Situs terasa instan saat dikunjungi ulang — dan biaya menyajikannya nyaris nol. Keduanya berasal dari caching: menyimpan salinan siap pakai setiap file di dekat pengunjung, supaya kami tidak perlu membangun atau mengambilnya ulang setiap kali. Cache sederhananya cuma salinan yang disimpan. 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, 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 masih berlaku. Inilah kenop presisi per-file-nya.
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 tak perlu menempuh perjalanan jauh ke origin sama sekali.

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

Aturan emas cache-busting

Sebelum masuk ke semua kebijakannya, ada 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 tak lama setelah yang pertama terasa instan, tapi must-revalidate berarti begitu lima menit itu lewat, browser memeriksa ulang dulu sebelum memakainya 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 mengatur lingkungan tempat ia berjalan. Yang paling penting: minta Cloudflare untuk menghormati header Anda, supaya satu setelan dashboard yang berlaku menyeluruh tak 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 menyamaratakan asset yang setahun dan shell yang lima menit jadi satu angka.
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