LearnNext
Back to Dashboard

Caching & Revalidation

Memahami 4 tingkat caching di Next.js: Request Memoization, Data Cache, Full Route Cache, dan Router Cache.

1. Data Cache vs Memoization

**Request Memoization** hanya berlaku selama satu render cycle. Sedangkan **Data Cache** tetap ada di server antar request.

app/lib/data.ts
// fetch secara default akan masuk ke Data Cache
export async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { 
      revalidate: 60, // Cache selama 60 detik (ISR)
      tags: ['products'] // Digunakan untuk On-demand revalidation
    }
  })
  return res.json()
}

2. Revalidation (On-demand)

Anda bisa menghapus cache secara manual menggunakan revalidatePath atau revalidateTag di dalam Server Action.

app/actions.ts
"use server";
import { revalidateTag } from 'next/cache'

export async function addProduct(data: FormData) {
  // Simpan data...
  
  // Hapus cache untuk semua komponen yang menggunakan tag 'products'
  revalidateTag('products')
}

Interactive Demo: Cache Visualizer

Simulasi bagaimana data diambil dari Cache (Hit) atau dari Source (Miss).

StatusEmpty
Cache is empty. Click Fetch.

Pola Senior: Opt-out Caching

Jika Anda membutuhkan data yang benar-benar real-time (seperti harga saham), gunakancache: 'no-store' atau export const dynamic = 'force-dynamic'.