Lapisan caching apa saja yang dimiliki Next.js?

Question

IT Interview Practice · Accepted Answer

App Router memiliki **beberapa lapisan caching** yang bekerja bersama. Memahaminya menjelaskan mengapa data kadang terlihat ketinggalan dan cara mengontrol kesegaran.

## Empat cache

```text
1. Request Memoization — dedupes identical fetch() calls within ONE render pass
2. Data Cache          — persists fetch() results across requests & deploys (server)
3. Full Route Cache    — caches the rendered HTML/RSC of static routes (build time)
4. Router Cache        — client-side cache of visited routes (in the browser, per session)
```

## 1. Request Memoization

```tsx
// the SAME fetch in a layout AND a page → only ONE network request per render
const user = await fetch("/api/user"); // automatically deduped
```

## 2. Data Cache (yang paling sering Anda sesuaikan)

```tsx
fetch(url, { cache: "force-cache" });       // cached (default) — like SSG
fetch(url, { cache: "no-store" });          // never cached — fresh every request
fetch(url, { next: { revalidate: 60 } });   // cached, refreshed every 60s — ISR
fetch(url, { next: { tags: ["posts"] } });  // taggable for on-demand invalidation
```

## 3 & 4. Route cache

**Full Route Cache** menyimpan rute yang dirender secara statis; **Router Cache** menyimpan rute yang sebelumnya dikunjungi di peramban sehingga navigasi kembali/maju dan re-navigasi berjalan instan.

## Membatalkan cache pada mutasi

```tsx
import { revalidatePath, revalidateTag } from "next/cache";

revalidatePath("/blog");        // invalidate a specific route's cache
revalidateTag("posts");         // invalidate every fetch tagged "posts"
router.refresh();               // (client) clear the Router Cache for current route
```

Setelah membuat/memperbarui data (sering dalam Server Action), Anda memanggil `revalidatePath`/`revalidateTag` agar halaman yang terpengaruh mengambil ulang dan pengguna melihat perubahannya.

## Jebakan umum

```text
"Why is my data stale after an update?" → a cache (usually Data or Router cache)
is serving the old value. Fix: revalidateTag/revalidatePath after the mutation,
or use cache: "no-store" for always-fresh data.
```

(Catatan: default cache telah bergeser di seluruh versi Next — periksa versi Anda, karena beberapa versi terbaru cache lebih tidak agresif secara default.)

## Mengapa ini penting

Caching multi-lapisan yang agresif dari Next.js adalah apa yang membuatnya cepat, tetapi juga merupakan sumber #1 kebingungan "mengapa data saya ketinggalan?".

Mengetahui empat lapisan, mengontrol Data Cache per-fetch (`no-store`/`revalidate`/tags), dan membatalkan dengan `revalidatePath`/`revalidateTag` setelah mutasi sangat penting untuk mendapatkan kinerja dan kesegaran yang benar.

Empat cache

1. Request Memoization

2. Data Cache (yang paling sering Anda sesuaikan)

3 & 4. Route cache

Membatalkan cache pada mutasi

Jebakan umum

Mengapa ini penting

Pertanyaan terkait