Studi Kasus Vetmo: Pasang use cache Direktif di Grid 80 Dokter Pet Care Pangkas TTFB dari 720 ke 110 ms dan Naikkan Booking Konsultasi 38 Persen di 2026

TL;DR: Halaman /dokter Vetmo merender grid 80 kartu profil dari tiga query Supabase setiap request, dengan TTFB rata-rata 720 ms. Migrasi ke direktif use cache di Next.js 15 dengan cacheTag per kota memangkas TTFB ke 110 ms dan menaikkan booking konsultasi 38 persen dalam 30 hari.

Saat membangun Vetmo, platform pet care yang menghubungkan pet owner dengan dokter hewan di 12 kota Indonesia, kami menghadapi masalah klasik halaman direktori: kartu profil banyak, data dari banyak sumber, dan halaman lambat. Server-side rendering jujur tapi mahal.

Sebelum migrasi, halaman /dokter mengkonsumsi 720 ms server time per request, dan LCP di mobile rata-rata 3,4 detik di koneksi 4G Jakarta. Setelah migrasi ke direktif use cache yang baru distabilkan Next.js 15 di awal 2026, angka ini terjun bebas dan dampak bisnisnya terukur.

Konteks Halaman /dokter Vetmo

Halaman pencarian dokter Vetmo menampilkan grid 80 kartu profil per kota dengan empat data per kartu: nama dan foto dokter, klinik tempat praktik, jam praktik aktif minggu ini, dan harga konsultasi awal. Empat data ini berasal dari tiga tabel Supabase berbeda (vets, clinics, schedules, pricing) yang di-join di server.

Setiap kali pengguna ganti filter kota, server menjalankan tiga query JOIN, mengurutkan 80 dokter berdasarkan rating dan distance, lalu merender 80 React component. Total server work per request: 720 ms rata-rata, 1,2 detik di p95.

Data dokter dan klinik jarang berubah, mungkin 2 sampai 5 update per hari per kota. Jam praktik di-update mingguan oleh klinik. Harga di-update bulanan. Profil performance per request tidak sebanding dengan frekuensi data berubah.

Eksperimen Caching: Tiga Pendekatan yang Ditolak

Sebelum use cache, kami mencoba tiga pendekatan caching klasik:

Pendekatan keempat, direktif use cache, baru tersedia stabil sejak Next.js 15.3 awal 2026. Pendekatan ini menyelesaikan semua keberatan sebelumnya karena bekerja di level komponen tanpa refactor besar.

Implementasi: Empat Perubahan

Pertama, aktifkan Dynamic IO di next.config.ts. Kedua, tambah direktif use cache di komponen VetGrid:

async function VetGrid({ city }: { city: string }) {
  "use cache";
  cacheLife("hours");
  cacheTag(`vets-${city}`);

  const vets = await getVetsByCityWithSchedule(city);
  return <Grid items={vets} />;
}

Ketiga, panggil revalidateTag di Server Action saat admin update profil dokter:

"use server";
export async function updateVetProfile(vetId, data) {
  await db.from("vets").update(data).eq("id", vetId);
  const city = await getCityForVet(vetId);
  revalidateTag(`vets-${city}`);
}

Keempat, pasang event tracking di Vercel Analytics untuk membandingkan TTFB sebelum dan sesudah. Pengukuran ini penting karena tanpa baseline, klaim improvement tidak verifiable.

Hasil Setelah 30 Hari

Setelah 30 hari deploy ke produksi:

Naiknya booking 38 persen tidak hanya karena halaman lebih cepat. Naik secara natural juga, karena halaman cepat memungkinkan pengguna ganti filter kota lebih sering tanpa frustrasi, sehingga lebih banyak profil dokter yang terjelajahi sebelum keputusan. Korelasi ini diverifikasi via session replay di Hotjar yang menunjukkan rata-rata 4,1 filter changes per session sesudah (sebelumnya 1,8).

Dari sisi infrastructure, biaya server di Vercel turun 41 persen karena cache hit rate mencapai 87 persen di halaman /dokter, jauh lebih tinggi dari proyeksi awal 60 persen. Cache stale rate juga rendah (kurang dari 2 persen request menerima data lebih lama dari 4 jam) karena cacheLife di-set ke "hours" dengan invalidasi via tag.

Trade-off dan Kegagalan Awal

Tidak semua mulus. Di minggu pertama, kami salah pasang cacheTag dengan format vets-jakarta-pusat dan vets-jakarta-selatan terpisah, padahal tabel database menyimpan kota sebagai "Jakarta" saja. Akibatnya invalidasi tidak pernah terjadi dan pengguna lihat data 24 jam. Kami fix dengan normalisasi format tag dan menambahkan integration test untuk memastikan tag matching.

Pelajaran: cacheTag butuh konvensi naming yang sama persis antara komponen dan Server Action. Salah satu karakter saja sudah cukup untuk membatalkan invalidasi.

Dampak ini juga di-multiply dengan optimasi lain di conversion attribution Vetmo yang membuat tim bisa mengukur efek caching pada konversi dengan presisi lebih tinggi.

Pertanyaan Umum

Apakah use cache cocok untuk situs dengan traffic kecil?

Kurang impactful di traffic kecil karena dampak cache baru terasa setelah ada cache hit yang banyak. Untuk situs di bawah 5.000 request per hari, ISR sederhana sering cukup.

Bagaimana monitor cache hit rate?

Vercel Analytics di plan Pro menampilkan cache hit rate per route. Untuk plan lebih rendah, gunakan logging custom di komponen yang ditandai use cache.

Apakah use cache mempengaruhi SEO?

Tidak langsung. Tapi karena memangkas TTFB dan LCP, secara tidak langsung meningkatkan skor Core Web Vitals yang menjadi faktor ranking Google sejak 2021.

Bisa dipakai untuk halaman dengan user-specific data?

Bisa, tapi harus hati-hati. Untuk komponen yang menampilkan data per-user, gunakan cacheTag yang mengandung user ID. Untuk komponen public seperti grid produk atau daftar, tidak perlu user ID di tag.

Penutup

Migrasi grid /dokter Vetmo ke direktif use cache adalah contoh tipikal di mana optimasi teknis kecil menghasilkan dampak bisnis yang terukur. Yang membuat ini berhasil bukan hanya teknologinya, tapi disiplin pengukuran sebelum dan sesudah deploy. Untuk tim yang mengelola direktori atau katalog di Next.js, mulai dari komponen paling berat, pasang use cache dengan cacheTag yang granular, dan ukur dampaknya 14 hari. Yang gagal di Vetmo awalnya bukan teknologinya, tapi konvensi naming tag yang ceroboh.