React Academy · Pelajaran

unstable_cache & React cache()

Simpan hasil fungsi yang mahal di tembolok per permintaan atau lintas permintaan dengan utilitas tembolok Next.js.

unstable_cache & React cache() adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Dua Utilitas Cache

Next.js menyediakan dua utilitas penembolokan yang saling melengkapi: unstable_cache untuk penembolokan persisten lintas permintaan, dan cache() milik React untuk deduplikasi per permintaan.

React cache() — Deduplikasi Per Permintaan

cache(fn) dari React menyimpan hasil fungsi dalam memo selama satu proses render server. Dua Komponen Server yang memanggil fungsi cache yang sama mendapatkan hasil yang sama tanpa panggilan DB/API kedua.

import { cache } from 'react';

export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

// Both components call getUser(id) — only one DB query fires per request
// component A: const user = await getUser('1');
// component B: const user = await getUser('1'); // uses cached result

unstable_cache — Cache Persisten

unstable_cache(fn, keyParts, options) mempertahankan hasil di antara permintaan hingga divalidasi ulang secara eksplisit. Anggaplah ini sebagai fetch({ next: { revalidate } }), tetapi untuk fungsi asinkron apa pun, seperti kueri basis data, pemanggilan Redis, dan sebagainya.

import { unstable_cache } from 'next/cache';

const getProducts = unstable_cache(
  async () => db.products.findMany(),
  ['products-list'],      // cache key parts
  { revalidate: 60, tags: ['products'] } // options
);

// In a Server Component:
const products = await getProducts();

Bagian Kunci Cache

Argumen kedua untuk unstable_cache adalah array string yang membentuk kunci cache. Sertakan semua variabel yang memengaruhi hasil.

const getUserPosts = unstable_cache(
  async (userId: string) => db.posts.findMany({ where: { userId } }),
  ['user-posts'],         // base key
  { tags: [`user-${userId}-posts`] } // per-user tag
);

// Call with userId — Next.js appends the argument to the key:
const posts = await getUserPosts(userId);

Label untuk Validasi Ulang Sesuai Permintaan

Beri label pada fungsi yang di-cache dan batalkan cache-nya dengan revalidateTag() saat data berubah—misalnya setelah mutasi dalam Aksi Server.

// Server Action
async function createProduct(data: FormData) {
  'use server';
  await db.products.create({ data: parseFormData(data) });
  revalidateTag('products'); // invalidates all cached functions tagged 'products'
  redirect('/products');
}

Validasi Ulang Berbasis Waktu

Tetapkan revalidate: N dalam opsi untuk memvalidasi ulang cache setelah N detik, mirip dengan ISR pada pemanggilan fetch.

const getStats = unstable_cache(
  async () => computeHeavyStats(),
  ['dashboard-stats'],
  { revalidate: 300 } // recompute at most every 5 minutes
);

Menggabungkan cache() dan unstable_cache

Gunakan cache() di dalam unstable_cache untuk fungsi yang dipanggil dari beberapa tempat dalam satu proses perenderan: hilangkan duplikasi dalam satu permintaan dan pertahankan hasil di antara permintaan.

// Deduplicate the DB call within a request:
export const getRawUser = cache(async (id: string) => db.user.findUnique({ where: { id } }));

// And cache the result persistently:
export const getUser = unstable_cache(getRawUser, ['user'], { revalidate: 60, tags: ['user'] });

Keterbatasan unstable_cache

unstable_cache diberi label tidak stabil karena API-nya mungkin berubah sebelum distabilkan. Fungsi yang di-cache tidak dapat mengakses data khusus permintaan, seperti cookie atau header.

React cache() untuk Data Tata Letak

Bungkus pengambilan data tingkat tata letak dengan cache() agar tata letak dan halaman bertingkat mana pun yang memanggil fungsi yang sama dapat berbagi hasil dalam satu proses perenderan.

// lib/data.ts
export const getCurrentUser = cache(async () => {
  const session = await getServerSession();
  return db.user.findUnique({ where: { id: session?.userId } });
});

// layout.tsx and page.tsx both call getCurrentUser() — one DB query

Kapan Menggunakan Masing-Masing

cache(): menghilangkan duplikasi pemanggilan identik dalam satu proses perenderan, yaitu permintaan yang sama. unstable_cache: mempertahankan hasil di antara beberapa permintaan hingga divalidasi ulang. Gunakan fetch + next.revalidate saat memanggil API HTTP eksternal.

Pemeriksaan Singkat

Apa perbedaan utama antara cache() milik React dan unstable_cache milik Next.js?

Ringkasan

cache(fn) menghilangkan duplikasi pemanggilan dalam satu proses perenderan—ideal untuk data tata letak/halaman yang digunakan bersama. unstable_cache(fn, keys, { revalidate, tags }) mempertahankan hasil di antara permintaan dengan pembatalan berbasis waktu atau label—ideal untuk kueri basis data yang mahal.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “unstable_cache & React cache()” gratis?

Ya — teks lengkap “unstable_cache & React cache()” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “unstable_cache & React cache()”?

Simpan hasil fungsi yang mahal di tembolok per permintaan atau lintas permintaan dengan utilitas tembolok Next.js. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “unstable_cache & React cache()” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

fetch() dengan Opsi Tembolok di Next.js
unstable_cache & React cache()
Pembuatan Ulang Situs Statis Bertahap (ISR)
Server Actions untuk Mutasi Data

← Kembali ke React Academy