Next.js: Fullstack dalam Satu Proyek · 7/9

Caching dan revalidation

Bagian yang membingungkan semua orang. Apa yang di-cache, di mana, dan cara menyegarkan data usang.

Baca 32 menit

Setelah pelajaran ini kamu bisa

Menyebutkan apa yang di-cache secara default dan apa yang tidak
Memilih antara revalidation berbasis waktu dan on-demand
Menjelaskan apa yang membuat sebuah route jadi dinamis
Men-debug halaman yang menampilkan data usang

Caching adalah bagian Next.js yang membingungkan semua orang, karena dua alasan: default-nya berubah antar versi major, dan ada dua model berbeda di Next 16. Mulailah dengan mengetahui kamu berada di model yang mana.

Model	Diaktifkan oleh	Caching-nya
Model sebelumnya	Default — tidak perlu diatur	Aktifkan per fetch, atau lewat `unstable_cache`
Cache Components	`cacheComponents: true` di next.config	Aktifkan dengan direktif `"use cache"`

Apa yang di-cache secara default

Hal	Di-cache secara default?
Halaman tanpa input dinamis	Ya — di-prerender saat build
`fetch()`	Tidak. Ini berubah; dulu jawabannya ya.
Query database	Tidak — Next tidak bisa tahu kapan ia berubah
GET Route Handler	Tidak, kecuali kamu mengatur `force-static`
Halaman yang membaca cookie atau header	Tidak — ia jadi dinamis

Apa yang membuat route jadi dinamis

Sebuah route di-prerender sampai ia membutuhkan sesuatu yang hanya bisa disediakan request sungguhan. Sentuh salah satu dari ini dan ia jadi dinamis — di-render segar setiap request.

await cookies()          // whose cookies? only a request knows
await headers()
await searchParams       // ?query=... comes from the request
await connection()

export const dynamic = "force-dynamic";   // or say so explicitly

Inilah sebabnya halaman pelajaran proyek ini di-prerender tapi dashboard-nya tidak: dashboard-nya memanggil getSessionUser(), yang membaca sebuah cookie.

Revalidation

// --- time-based: refresh at most every N seconds ---
export const revalidate = 3600;            // whole route, in a page or layout

const data = await fetch(url, { next: { revalidate: 60 } });   // one request

// --- on-demand: refresh when something actually changed ---
import { revalidatePath, revalidateTag, updateTag } from "next/cache";

// tag data when you cache it...
const venues = await fetch(url, { next: { tags: ["venues"] } });

// ...then invalidate it from an action
revalidateTag("venues");     // stale-while-revalidate: fast, briefly stale
updateTag("venues");         // immediate: for the user's own write. Actions only.
revalidatePath("/venues");   // by route instead of by tag

Berbasis waktu tepat untuk konten yang berubah menurut jadwalnya sendiri — kurs mata uang, feed berita. On-demand tepat saat *kamu* yang menyebabkan perubahannya dan tahu persis apa yang sekarang salah.

Coba sendiri

Sebuah cache dengan kedaluwarsa berbasis waktu dan invalidasi berdasarkan tag, dibuat dari nol. Kedua strategi revalidation, terlihat.

function createCache(nowFn) {
  const entries = new Map();      // key -> { value, expiresAt, tags }
  let computations = 0;

function get(key, options, compute) {
    const now = nowFn();
    const hit = entries.get(key);

if (hit && hit.expiresAt > now) {
      return { value: hit.value, source: "cache" };
    }

computations++;
    const value = compute();
    entries.set(key, {
      value: value,
      expiresAt: now + (options.revalidate ?? 0) * 1000,
      tags: options.tags ?? [],
    });
    return { value: value, source: hit ? "expired, recomputed" : "computed" };
  }

function invalidateTag(tag) {
    let removed = 0;
    for (const [key, entry] of entries) {
      if (entry.tags.includes(tag)) { entries.delete(key); removed++; }
    }
    return removed;
  }

return { get, invalidateTag, computations: () => computations };
}

// A fake clock, so the demo is deterministic.
let clock = 0;
const cache = createCache(() => clock);

const load = (key) => cache.get(key, { revalidate: 60, tags: ["venues"] }, () => "data@" + clock);

console.log("t=0    ", load("venues").source);
console.log("t=0    ", load("venues").source, "<- served from cache");
clock += 30000;
console.log("t=30s  ", load("venues").source, "<- still inside the 60s window");
clock += 40000;
console.log("t=70s  ", load("venues").source, "<- window passed");
console.log("");
console.log("an action edits a venue and calls revalidateTag('venues'):");
console.log("        entries removed:", cache.invalidateTag("venues"));
console.log("t=70s  ", load("venues").source, "<- fresh immediately, not after 60s");
console.log("");
console.log("total expensive computations:", cache.computations());

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Apakah halamannya di-prerender? Cek bun run build untuk ● atau ƒ.
Apakah mutasinya memanggil revalidatePath atau updateTag?
Apakah kamu sedang melihat fetch dengan force-cache tanpa revalidate?
Apakah itu cache milik browser sendiri? Coba hard reload.
Di dev, apakah kamu cuma sedang dibingungkan oleh render ganda mode dev React?

Tugas praktik

Di proyek ini, jalankan bun run build dan hitung route ● dan ƒ-nya. Lalu tambahkan await cookies() di bagian atas app/[lang]/page.tsx, build ulang, dan lihat halaman berandanya berpindah dari ● ke ƒ. Hapus lagi. Kamu baru saja melihat persis apa arti "membuat route jadi dinamis", secara terukur.

Hasil yang diharapkan

Halaman berandanya berubah simbol, dan jumlah yang di-prerender berkurang dua — satu per bahasa.

Cek pemahaman

Di Next.js 16, apakah await fetch(url) biasa di-cache secara default?

Ya, dan kamu menonaktifkannya dengan { cache: "no-store" }Tidak — tidak di-cache secara default, dan kamu mengaktifkannya dengan { cache: "force-cache" }Hanya kalau route-nya dirender secara statis

Pilih jawaban dulu