React Academy · Ders

unstable_cache ve React cache()

Maliyetli işlev sonuçlarını istek başına veya istekler arasında Next.js önbellek yardımcılarıyla önbelleğe alın.

unstable_cache ve React cache(), CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

İki Önbellek Yardımcı Aracı

Next.js birbirini tamamlayan iki önbellekleme aracı sağlar: istekler arasında kalıcı önbellekleme için unstable_cache ve istek başına yinelemeleri önlemek için React'in cache() işlevi.

React cache() — İstek Başına Yinelemeleri Önleme

React'teki cache(fn), bir işlevin sonucunu tek bir sunucu oluşturma geçişi boyunca belleğe alır. Aynı önbelleğe alınmış işlevi çağıran iki Sunucu Bileşeni, ikinci bir veritabanı veya API çağrısı yapmadan aynı sonucu alır.

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 — Kalıcı Önbellek

unstable_cache(fn, keyParts, options), açıkça yeniden doğrulanana kadar sonucu istekler arasında kalıcı olarak saklar. Bunu, herhangi bir eşzamansız işlev için (veritabanı sorguları, Redis çağrıları vb.) kullanılan fetch({ next: { revalidate } }) gibi düşünebilirsiniz.

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();

Önbellek Anahtarı Bileşenleri

unstable_cache işlevinin ikinci bağımsız değişkeni, önbellek anahtarını oluşturan bir dize dizisidir. Çıktıyı etkileyen tüm değişkenleri ekleyin.

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);

İsteğe Bağlı Yeniden Doğrulama Etiketleri

Önbelleğe alınan işlevleri etiketleyin ve veriler değiştiğinde, örneğin bir Sunucu Eylemindeki değişiklikten sonra, revalidateTag() ile geçersiz kılın.

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

Zamana Dayalı Yeniden Doğrulama

Önbelleği N saniye sonra yeniden doğrulamak için seçeneklerde revalidate: N ayarlayın. Bu, veri getirme çağrılarındaki ISR'ye benzer.

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

cache() ve unstable_cache'i Birlikte Kullanma

Tek bir oluşturma sırasında birden çok yerden çağrılan işlevler için unstable_cache içinde cache() kullanın: istek içindeki yinelenen çağrıları önler ve sonuçları istekler arasında kalıcı olarak saklar.

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

unstable_cache Sınırlamaları

unstable_cache, API kararlı hale gelmeden önce değişebileceği için kararsız olarak işaretlenmiştir. Önbelleğe alınan işlevler, çerezler veya üstbilgiler gibi isteğe özgü verilere erişemez.

Düzen Verileri için React cache()

Düzen düzeyindeki veri getirmelerini cache() ile sarın; böylece hem düzen hem de aynı işlevi çağıran iç içe sayfa, tek bir oluşturma sırasında sonucu paylaşır.

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

Her Birini Ne Zaman Kullanmalısınız

cache(): Aynı oluşturma içindeki özdeş çağrıları yinelenmekten kurtarır (aynı istek). unstable_cache: Yeniden doğrulanana kadar sonuçları birden çok istek arasında kalıcı olarak saklar. Harici HTTP API'lerini çağırırken fetch ile birlikte next.revalidate kullanın.

Hızlı Kontrol

React'in cache() işlevi ile Next.js unstable_cache arasındaki temel fark nedir?

Özet

cache(fn), tek bir oluşturma geçişi içindeki çağrıları yinelenmekten kurtarır; bu nedenle paylaşılan düzen ve sayfa verileri için idealdir. unstable_cache(fn, keys, { revalidate, tags }), sonuçları zaman veya etiket tabanlı geçersiz kılmayla istekler arasında kalıcı olarak saklar; bu nedenle maliyetli veritabanı sorguları için idealdir.

Sıkça Sorulan Sorular

“unstable_cache ve React cache()” dersi ücretsiz mi?

Evet — “unstable_cache ve React cache()” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“unstable_cache ve React cache()” dersinde ne öğreneceğim?

Maliyetli işlev sonuçlarını istek başına veya istekler arasında Next.js önbellek yardımcılarıyla önbelleğe alın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“unstable_cache ve React cache()” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Next.js'te Önbellek Seçenekleriyle fetch()
unstable_cache ve React cache()
Artımlı Statik Yeniden Oluşturma (ISR)
Veri Değişiklikleri için Sunucu Eylemleri

← React Academy Sayfasına Dön