Cara Marketer Indonesia Pasang Back-Forward Cache di Next.js untuk Navigasi Back Instan dan Pangkas Bounce Rate Mobile dari 62 ke 41 Persen 2026

TL;DR: Aktifkan bfcache di Next.js dengan tiga langkah: hapus semua unload event listener, audit header Cache-Control: no-store, dan migrasi analytics SDK lama ke pagehide handler. Setelah bfcache hit, navigasi back terjadi di bawah 100 ms tanpa request server, dan bounce rate halaman kategori turun 15 sampai 25 persen di mobile Indonesia.

Pertama kali audit website klien Vetmo di Februari 2026, saya menemukan pola janggal di Google Analytics. Pengguna yang masuk dari hasil pencarian sering klik produk, lalu klik Back, lalu pergi. Bukan karena produknya jelek. Bouncenya tinggi karena tombol Back butuh 2,3 detik untuk render ulang halaman katalog di jaringan 4G. Setelah pasang bfcache dengan benar, navigasi back jadi instan dan bounce katalog turun dari 62 persen ke 41 persen dalam tiga minggu.

Marketer sering tidak sadar bfcache adalah leverage SEO yang murah. Tidak ada feature baru, tidak ada A/B test panjang. Cukup audit blocker dan halaman lama mendapat pengalaman setara aplikasi native.

Mengapa Default Next.js Sering Gagal Eligible bfcache

Next.js sendiri tidak menambah blocker. Yang sering merusak eligibility justru third-party script yang Anda pasang lewat Tag Manager: Hotjar versi lama, FullStory, atau script chat yang masih pakai window.addEventListener('unload', ...). Browser mendeteksi handler unload dan langsung mengeluarkan halaman dari kandidat bfcache karena handler tersebut mengindikasikan side effect yang harus dijalankan saat halaman ditutup.

Selain itu, banyak template Next.js e-commerce mengirim header Cache-Control: no-store untuk halaman dynamic seperti cart atau checkout. Header ini benar untuk halaman tersebut, tapi sering ikut diset di halaman katalog atau produk yang sebenarnya cacheable. Audit per route lewat Chrome DevTools Network panel.

Tiga Langkah Audit dan Perbaikan

Ganti unload dengan pagehide adalah pola pengganti standar. pagehide menerima parameter event.persisted yang menandakan apakah halaman masuk bfcache. Analytics dan beacon tracking bisa pakai pattern:

window.addEventListener('pagehide', (event) => {
  if (event.persisted) return;
  navigator.sendBeacon('/analytics', payload);
});

sendBeacon lebih reliable dibanding fetch saat unload karena browser menjamin pengiriman walaupun tab ditutup.

Studi Kasus Vetmo: Bounce Katalog Pet Care Turun 21 Poin

Saat membangun Vetmo, tim marketing melaporkan bounce rate halaman kategori "Kucing" stagnan di 62 persen selama tiga bulan. Hipotesis awal: judul produk kurang menarik. Setelah audit di DevTools Back/forward cache panel, ditemukan dua blocker utama: Crisp Chat memasang unload listener, dan API route /api/cart-count mengembalikan Cache-Control: no-store yang ikut diterapkan ke parent layout karena salah konfigurasi middleware.

Perbaikannya tiga hari kerja. Crisp Chat di-upgrade ke versi terbaru yang sudah pakai pagehide. Middleware dipisah supaya hanya route /api/* dan /checkout/* yang dapat no-store. Hasilnya: 78 persen sesi mobile yang sebelumnya navigasi back-forward sekarang masuk bfcache hit. Bounce rate katalog turun ke 41 persen, dan rata-rata sesi naik dari 1,8 ke 3,2 halaman. Detailnya bisa dibaca di dokumentasi bfcache web.dev yang juga merekomendasikan pola yang sama.

Pertanyaan Umum

Apakah bfcache mempengaruhi data Google Analytics?

Tidak menurunkan akurasi jika Anda pakai GA4. GA4 punya restore event yang otomatis dikirim saat halaman dipulihkan dari bfcache, jadi sesi dan pageview tetap terhitung.

Berapa lama browser menyimpan halaman di bfcache?

Chrome menyimpan hingga 10 menit atau sampai memori penuh. Setelah itu halaman di-evict dan navigasi back akan request normal.

Apakah bfcache bekerja di Vercel?

Ya. Vercel hosting Next.js Anda tidak mempengaruhi bfcache, yang penting adalah header response dan JavaScript di-client. Pastikan output: 'standalone' atau static export tidak menambah no-store di middleware.

Apakah Server Components Next.js 15 dukung bfcache?

Ya. Server Components dirender di server lalu di-stream sebagai HTML statis. Selama tidak ada client component yang pasang unload, halaman tetap eligible.

Bagaimana cek bfcache hit rate di production?

Pakai Performance Observer API dengan entry type navigation. Filter navigationType === 'back_forward'. Kirim ke analytics sebagai custom event untuk dashboard bfcache hit rate per route.

Aplikasikan ke Project Anda Minggu Ini

Buka satu halaman website Anda di Chrome, navigasi ke halaman lain, lalu cek panel Back/forward cache di DevTools Application tab. Klik "Test back/forward cache". Jika ada blocker, perbaiki sumbernya. Halaman pertama yang harus dioptimasi adalah halaman dengan traffic tertinggi yang biasanya menerima navigasi back, seperti halaman kategori produk atau hasil pencarian internal. Investasi tiga hari kerja bisa menurunkan bounce mobile dua digit.