Studi Kasus Vetmo: Pasang HTTP Cache-Status Header RFC 9211 di Next.js Pet Care Bongkar Cache Miss Tersembunyi dari 38 ke 7 Persen di 2026

TL;DR: Tim Vetmo, platform pet care yang kami bangun bareng tim dokter hewan, sempat heran kenapa halaman katalog jasa tetap lambat padahal sudah pakai Vercel Edge dan Next.js use cache. Setelah mengaktifkan HTTP Cache-Status header (RFC 9211) di balik reverse proxy, ketahuan 38 persen request sebenarnya bypass cache karena varian query string. Sesudah restrukturisasi cache key dan partial prerendering, cache miss rate turun dari 38 ke 7 persen dan TTFB rata-rata membaik dari 540 ke 145 ms.

Dalam proyek Vetmo sepanjang kuartal pertama 2026, kami sempat percaya bahwa angka 92 persen cache hit yang dilaporkan dashboard analitik adalah cerita lengkap. Ternyata tidak. Dashboard hanya mencatat cache layer browser. Edge cache di sisi CDN sendiri tidak terbaca sebab format header lama (X-Cache vs CF-Cache-Status vs format Vercel) tidak konsisten saat di-agregasi.

Keresahan muncul ketika tim ops melaporkan tagihan egress origin naik 41 persen bulan-ke-bulan padahal traffic relatif flat. Sinyal awal yang menggerakkan audit adalah dua hal: bayar lebih untuk traffic yang sama, dan TTFB di Google Search Console membaca 540 ms p75 untuk halaman katalog dokter, jauh di atas target internal 250 ms.

Masalah: Observabilitas Cache yang Hilang

Vetmo punya tiga lapis cache: browser, Vercel Edge, dan Supabase storage cache untuk gambar dokter. Sebelum 2026, setiap lapis melaporkan status cache pakai header berbeda. Cloudflare warisan dari versi lama domain pakai CF-Cache-Status, Vercel pakai header internalnya, browser pakai Age header. Tidak ada cara melihat satu request lewat seluruh chain dengan satu format.

Ini masalah klasik observability. Tanpa standar, audit cache jadi kerjaan manual lintas tab DevTools. Apalagi tim Vetmo termasuk dokter hewan yang bukan developer, mereka tidak punya kapasitas untuk menggali konsol CDN setiap kali ada keluhan lambat.

Solusi: Aktifkan Cache-Status RFC 9211

RFC 9211 menstandarkan satu header bernama Cache-Status. Setiap cache layer yang dilewati respons menambahkan entri ke header yang sama. Format tata bahasanya jelas: identifier cache, status (hit/miss/bypass), alasan, TTL sisa, dan key opsional. Kami mengaktifkannya lewat konfigurasi headers di next.config.ts dan middleware ringan yang mem-forward field dari upstream.

Setelah aktif selama 7 hari, log Cache-Status menunjukkan kenyataan pahit: 38 persen request katalog dokter melaporkan fwd=miss dengan alasan key="..." yang berbeda-beda per request. Akar masalah: setiap kunjungan menambahkan timestamp UTM internal ke query string, membuat cache key unik per kunjungan dan bypass total.

Framework Audit Cache: 4 Langkah

Studi Kasus: Eksekusi di Vetmo

Kami menerapkan empat langkah di atas berturut-turut selama 3 minggu. Langkah pertama, aktifkan Cache-Status, butuh 1 hari engineering. Langkah dua, agregasi log, butuh 5 hari supaya sample representatif. Langkah tiga ketemu biang kerok: query string ?vetmo_ref= dan ?utm_session_id= yang sebenarnya cuma dipakai analytics internal.

Langkah empat kami pakai middleware Next.js untuk strip semua query param yang tidak ada di whitelist sebelum lookup cache, tapi tetap forward ke analytics pipeline secara async pakai event.waitUntil. Hasilnya cache miss rate turun dari 38 ke 7 persen, p75 TTFB dari 540 ke 145 ms, dan tagihan egress origin minggu berikutnya turun 32 persen.

Dampak side benefit yang tidak diduga: Core Web Vitals skor halaman katalog naik dari 67 ke 91 di PageSpeed Insights, dan ranking dua keyword utama ("dokter hewan online Jakarta", "konsultasi dokter hewan online") naik rata-rata 4 posisi dalam 6 minggu setelahnya. Kami tidak klaim 100 persen kausal dari cache, tapi korelasinya kuat dengan timing perbaikan.

Pertanyaan Umum

Apakah Cache-Status header memengaruhi performa?

Tidak signifikan. Header tambahan beberapa byte per respons. Manfaat observability jauh lebih besar daripada biaya transfer.

Apa CDN Indonesia yang sudah mendukung RFC 9211?

Per 2026, CDN global yang dipakai banyak situs Indonesia (Vercel, Cloudflare, Fastly) sudah mendukung penuh. CDN lokal sebagian besar masih pakai format lama.

Apakah ini hanya untuk Next.js?

Tidak. RFC 9211 universal untuk HTTP. Next.js cuma membuat eksposurnya gampang lewat next.config dan middleware.

Penutup: Audit Sebelum Optimisasi

Pelajaran utama dari proyek Vetmo: optimisasi tanpa observasi sering mengejar masalah palsu. Kami sempat menduga TTFB tinggi adalah masalah origin compute, padahal akar masalah ada di cache key. Tanpa Cache-Status header standar, diagnosis itu butuh berhari-hari menggali log lintas vendor.

Untuk tim marketing yang punya akses ke developer, mulai dari satu langkah kecil: minta aktifkan Cache-Status di staging. Liat 7 hari. Angka cache miss yang terungkap biasanya bikin diskusi prioritas optimasi jauh lebih sehat.