Cara Marketer Indonesia Pasang use cache di Next.js untuk Pangkas Server Render Time dari 480 ke 90 ms di 2026

TL;DR: Direktif use cache di Next.js 15 menyimpan hasil komponen async di server cache. Pasangkan di komponen berat seperti grid testimoni dan katalog produk, lalu invalidasi pakai cacheTag saat konten baru di-publish. Dalam tiga proyek client, pendekatan ini memangkas server render time dari rata-rata 480 ke 90 ms.

Banyak halaman katalog di proyek client saya menampilkan grid 40 sampai 60 item yang dirender ulang setiap request, meskipun datanya jarang berubah. Sebelum direktif use cache stabil, satu-satunya cara meredakan ini adalah memindahkan data ke unstable_cache atau bikin proxy fetch terpisah, dua-duanya tidak ergonomis.

Sejak versi 15 Next.js menstabilkan direktif use cache pada awal 2026, pola caching jadi jauh lebih bersih: cukup tulis "use cache" di awal komponen async, dan Next.js mengurus sisanya. Hasilnya signifikan untuk Core Web Vitals dan biaya server.

Konteks Masalah: Komponen Berat di Server

Komponen yang sering jadi bottleneck server-side rendering punya tiga karakteristik: data dari beberapa sumber, transformasi sebelum render, dan jarang berubah dalam 1 sampai 24 jam. Contoh nyata: grid 50 produk parfum Nalesha yang menampilkan harga, stok, dan thumbnail dari tiga query Supabase berbeda. Setiap request server membayar overhead query yang sama, padahal stok hanya berubah ketika order masuk.

Cara lama menggunakan pola fetch({ next: { revalidate: 3600 } }) atau membungkus dengan unstable_cache. Dua pendekatan ini bekerja, tapi memaksa developer mendekomposisi komponen menjadi data layer dan view layer yang seringkali bocor abstraksinya. Direktif use cache menyelesaikan ini dengan caching di level komponen tanpa perlu refactor.

Empat Langkah Pasang use cache

Contoh implementasi di komponen katalog:

async function ProductGrid({ category }: { category: string }) {
  "use cache";
  cacheLife("hours");
  cacheTag(`products-${category}`);

  const products = await db.from("products")
    .select("*").eq("category", category);

  return <Grid items={products} />;
}

Saat admin menambahkan produk baru, Server Action memanggil revalidateTag(products-${category}) untuk memaksa cache refresh. Dokumentasi lengkap pola ini tersedia di Next.js Caching Guide.

Studi Kasus Tiga Klien

Rata-rata server render turun dari 470 ke 90 ms, dan LCP halaman turun di bawah ambang Core Web Vitals (2,5 detik) di semua tiga proyek. Pengukuran dilakukan via Vercel Analytics dan PageSpeed Insights selama 14 hari setelah deploy. Angka ini bervariasi tergantung beban query dan ukuran HTML hasil render.

Di Nalesha, dampak ini menaikkan conversion rate halaman katalog dari 1,8 ke 2,6 persen, kemungkinan karena halaman yang lebih cepat mengurangi bounce dari pengguna mobile dengan koneksi 4G lambat. Untuk mengukur dampak konversi lebih akurat, kami pasang conversion attribution data-driven via GA4.

Trade-off yang Perlu Anda Tahu

Caching agresif punya dua risiko. Pertama, konten basi: kalau cacheTag lupa di-invalidate, pengguna lihat data lama. Mitigasi: set cacheLife maksimal 4 jam untuk konten dinamis, dan pasang revalidateTag di setiap mutation Server Action. Kedua, debug lebih sulit karena response yang Anda lihat di staging mungkin hasil cache dari request sebelumnya. Mitigasi: pakai fitur revalidate manual di Vercel dashboard saat testing.

Direktif use cache tidak cocok untuk komponen yang menampilkan data per-user, misal dashboard akun atau riwayat order. Komponen seperti ini tetap harus dynamic dan di-render per request.

Pertanyaan Umum

Apakah use cache menggantikan ISR?

Tidak sepenuhnya. ISR berjalan di level halaman dengan revalidate berbasis waktu. use cache lebih granular dan bisa di-share antar halaman. Kombinasi keduanya umum dipakai: ISR untuk shell halaman, use cache untuk komponen berat di dalamnya.

Apakah use cache aman dipakai di produksi 2026?

Ya. Next.js menstabilkan direktif ini di versi 15.3 dan sudah dipakai di banyak production app sejak Q1 2026. Tapi pastikan Anda di Next.js 15 ke atas dan mengaktifkan Dynamic IO di config.

Bagaimana mengukur dampak use cache?

Pantau metrik server render time (TTFB) dan LCP di Vercel Analytics atau RUM tool lain. Bandingkan 14 hari sebelum dan sesudah deploy untuk mendapat baseline yang stabil.

Apakah ini menggantikan CDN?

Tidak. CDN menyimpan response HTTP di edge, use cache menyimpan output komponen di server. Keduanya komplementer dan biasanya dipakai bersama.

Penutup

Direktif use cache adalah salah satu pembersihan API paling impactful yang Next.js lakukan di siklus 2025 ke 2026. Untuk marketer yang punya akses minimal ke kode, ini cara paling cepat menurunkan LCP tanpa refactor besar. Mulai dari komponen paling berat yang datanya jarang berubah, ukur dampaknya 14 hari, lalu perluas ke komponen lain.