React Academy · Pelajaran

unstable_cache & React cache()

Cache hasil fungsi yang mahal bagi setiap permintaan atau merentas permintaan dengan utiliti cache Next.js.

Pelajaran 2 daripada 412 langkah

unstable_cache & React cache() ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Dua Utiliti Cache

Next.js menyediakan dua utiliti cache yang saling melengkapi: unstable_cache untuk penyimpanan cache berterusan merentas permintaan dan cache() React untuk penyingkiran pendua bagi setiap permintaan.

React cache() — Penyingkiran Pendua bagi Setiap Permintaan

cache(fn) daripada React mengingati hasil fungsi untuk tempoh satu kitaran paparan pelayan. Dua Komponen Pelayan yang memanggil fungsi dicache yang sama menerima hasil yang sama tanpa panggilan pangkalan data atau 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 Berterusan

unstable_cache(fn, keyParts, options) mengekalkan hasil antara permintaan sehingga disahkan semula secara eksplisit. Anggaplah ia sebagai fetch({ next: { revalidate } }), tetapi untuk sebarang fungsi tak segerak seperti pertanyaan pangkalan data, panggilan 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();

Bahagian Kunci Cache

Argumen kedua kepada unstable_cache ialah tatasusunan rentetan yang membentuk kunci cache. Sertakan semua pemboleh ubah yang mempengaruhi 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);

Tag untuk Pengesahan Semula Atas Permintaan

Tag fungsi yang dicache dan batalkan kesahihannya dengan revalidateTag() apabila data berubah — contohnya, selepas mutasi dalam Tindakan Pelayan.

// 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');
}

Pengesahan Semula Berasaskan Masa

Tetapkan revalidate: N dalam pilihan untuk mengesahkan semula cache selepas N saat, serupa dengan ISR untuk panggilan 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 pelbagai tempat dalam satu pemaparan: elakkan penduaan dalam permintaan dan kekalkan hasil merentas 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'] });

Had unstable_cache

unstable_cache ditandakan sebagai tidak stabil kerana API ini mungkin berubah sebelum dimuktamadkan. Fungsi yang dicache tidak boleh mengakses data khusus permintaan seperti kuki atau pengepala.

React cache() untuk Data Reka Letak

Bungkus pengambilan data peringkat reka letak dengan cache() supaya reka letak dan mana-mana halaman bersarang yang memanggil fungsi sama-sama berkongsi hasil dalam satu pemaparan.

// 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

Bila Hendak Menggunakan Setiap Satu

cache(): elakkan penduaan panggilan yang sama dalam satu pemaparan (permintaan yang sama). unstable_cache: kekalkan hasil merentas berbilang permintaan sehingga disahkan semula. Gunakan fetch + next.revalidate apabila memanggil API HTTP luaran.

Semakan Pantas

Apakah perbezaan utama antara cache() React dan unstable_cache Next.js?

Jawab dalam pelajaran interaktif

Ringkasan

cache(fn) mengelakkan penduaan panggilan dalam satu laluan pemaparan — sesuai untuk data reka letak atau halaman yang dikongsi. unstable_cache(fn, keys, { revalidate, tags }) mengekalkan hasil merentas permintaan dengan pembatalan berasaskan masa atau tag — sesuai untuk pertanyaan pangkalan data yang mahal.

Percuma untuk bermula

Pelajari React dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 88
Pelajaran: 324

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “unstable_cache & React cache()” percuma?

Ya — teks penuh “unstable_cache & React cache()” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “unstable_cache & React cache()”?

Cache hasil fungsi yang mahal bagi setiap permintaan atau merentas permintaan dengan utiliti cache Next.js. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “unstable_cache & React cache()” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

fetch() dengan Pilihan Cache dalam Next.js
unstable_cache & React cache()
Penjanaan Semula Statik Berperingkat (ISR)
Tindakan Pelayan untuk Mutasi Data

← Kembali ke React Academy