Data Fetching, Caching, and Revalidating

Veri getirme, her uygulamanın temel bir parçasıdır. Bu sayfa, React ve Next.js'de verileri nasıl getirebileceğinizi, önbelleğe alabileceğinizi ve yeniden doğrulayabileceğinizi anlatmaktadır.

Veri getirmenin dört yolu vardır:

1. Sunucuda, ile fetch
2. Sunucuda, üçüncü taraf kütüphaneleri ile
3. İstemcide, bir Rota İşleyicisi aracılığıyla
4. İstemcide, üçüncü taraf kütüphaneleri ile.

Fetching Data on the Server with fetch

Next.js, sunucudaki her bir getirme isteği için önbelleğe alma ve yeniden doğrulama davranışını yapılandırmanıza izin vermek için yerel fetch Web API adresini genişletir. React, bir React bileşen ağacını oluştururken getirme isteklerini otomatik olarak memoize etmek için fetch adresini genişletir.

fetch adresini async/await ile birlikte Sunucu Bileşenlerinde, Rota İşleyicilerinde ve Sunucu Eylemlerinde kullanabilirsiniz.

Örneğin:

async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main></main>
}

Bildiğim iyi oldu:

• Next.js, Sunucu Bileşenlerinde veri getirirken ihtiyaç duyabileceğiniz aşağıdaki gibi yararlı işlevler sağlar cookies ve headers. Bunlar, istek zamanı bilgisine dayandıkları için rotanın dinamik olarak işlenmesine neden olacaktır.
• Route Handler'lar React bileşen ağacının bir parçası olmadığından, Route Handler'larda fetch istekleri memoize edilmez.
• TypeScript ile bir Sunucu Bileşeninde async/await kullanmak için TypeScript 5.1.3 veya daha üstünü ve @types/react 18.2.8 veya daha üstünü kullanmanız gerekir.

Caching Data

Önbelleğe alma, verileri depolar, böylece her istekte veri kaynağınızdan yeniden taranması gerekmez.

Next.js varsayılan olarak fetch adresinin döndürdüğü değerleri otomatik olarak sunucudaki Veri Önbelleğinde önbelleğe alır. Bu, verilerin derleme zamanında veya istek zamanında getirilebileceği, önbelleğe alınabileceği ve her veri isteğinde yeniden kullanılabileceği anlamına gelir.

// 'force-cache' is the default, and can be omitted
fetch('https://...', { cache: 'force-cache' })

fetch POST yöntemini kullanan istekler de otomatik olarak önbelleğe alınır. POST yöntemini kullanan bir Rota İşleyicisinin içinde olmadığı sürece, önbelleğe alınmaz.

Veri Önbelleği nedir?

Veri Önbelleği kalıcı bir HTTP önbelleğidir . Platformunuza bağlı olarak, önbellek otomatik olarak ölçeklenebilir ve birden fazla bölgede paylaşılabilir.

Veri Önbelleği hakkında daha fazla bilgi edinin.

Revalidating Data

Yeniden doğrulama, Veri Önbelleğinin temizlenmesi ve en son verilerin yeniden alınması işlemidir. Bu, verileriniz değiştiğinde ve en son bilgileri gösterdiğinizden emin olmak istediğinizde kullanışlıdır.

Önbelleğe alınan veriler iki şekilde yeniden doğrulanabilir:

• Zaman tabanlı yeniden doğrulama: Belirli bir süre geçtikten sonra verileri otomatik olarak yeniden doğrulayın. Bu, seyrek olarak değişen ve tazeliğin o kadar kritik olmadığı veriler için kullanışlıdır.
• İsteğe bağlı yeniden doğrulama: Bir olaya (örn. form gönderimi) dayalı olarak verileri manuel olarak yeniden doğrulayın. İsteğe bağlı yeniden doğrulama, veri gruplarını aynı anda yeniden doğrulamak için etiket tabanlı veya yol tabanlı bir yaklaşım kullanabilir. Bu, en son verilerin mümkün olan en kısa sürede gösterilmesini sağlamak istediğinizde kullanışlıdır (örneğin, başsız CMS'nizdeki içerik güncellendiğinde).

Time-based Revalidation

Verileri belirli bir zaman aralığında yeniden doğrulamak için, bir kaynağın önbellek ömrünü (saniye cinsinden) ayarlamak üzere fetch adresindeki next.revalidate seçeneğini kullanabilirsiniz.

fetch('https://...', { next: { revalidate: 3600 } })

Alternatif olarak, bir rota segmentindeki tüm fetch isteklerini yeniden doğrulamak için Segment Yapılandırma Seçeneklerini kullanabilirsiniz.

export const revalidate = 3600 // revalidate at most every hour

Statik olarak oluşturulmuş bir rotada birden fazla getirme isteğiniz varsa ve her birinin farklı bir yeniden doğrulama sıklığı varsa. Tüm istekler için en düşük süre kullanılacaktır. Dinamik olarak oluşturulan rotalar için, her fetch isteği bağımsız olarak yeniden doğrulanacaktır.

Zamana dayalı revalidasyon hakkında daha fazla bilgi edinin.

On-demand Revalidation

Veriler isteğe bağlı olarak yol ile yeniden doğrulanabilir (revalidatePath) veya önbellek etiketine göre (revalidateTag) bir Sunucu Eylemi veya Rota İşleyicisi içinde.

Next.js, rotalar arasında fetch isteklerini geçersiz kılmak için bir önbellek etiketleme sistemine sahiptir.

1. fetch adresini kullanırken, önbellek girdilerini bir veya daha fazla etiketle etiketleme seçeneğiniz vardır.
2. Ardından, bu etiketle ilişkili tüm girişleri yeniden doğrulamak için revalidateTag adresini çağırabilirsiniz.

Örneğin, aşağıdaki fetch isteği collection önbellek etiketini ekler:

export default async function Page() {
  const res = await fetch('https://...', { next: { tags: ['collection'] } })
  const data = await res.json()
  // ...
}

Daha sonra collection ile etiketlenmiş bu fetch çağrısını bir Sunucu Eyleminde revalidateTag 'yi çağırarak yeniden doğrulayabilirsiniz:

'use server'
 
import { revalidateTag } from 'next/cache'
 
export default async function action() {
  revalidateTag('collection')
}

İsteğe bağlı revalidasyon hakkında daha fazla bilgi edinin.

Error handling and revalidation

Verileri yeniden doğrulamaya çalışırken bir hata atılırsa, başarıyla oluşturulan son veriler önbellekten sunulmaya devam eder. Sonraki bir sonraki istekte, Next.js verileri yeniden doğrulamayı yeniden deneyecektir.

Opting out of Data Caching

fetch aşağıdaki durumlarda istekler önbelleğe alınmaz:

• cache: 'no-store', fetch isteklerine eklenir.
• revalidate: 0 seçeneği bireysel fetch taleplerine eklenir.
• fetch isteği, POST yöntemini kullanan bir Yönlendirici İşleyicisinin içindedir.
• fetch talebi, headers veya cookies kullanımından sonra gelir.
• const dynamic = 'force-dynamic' rota segmenti seçeneği kullanılır.
• fetchCache rota segmenti seçeneği varsayılan olarak önbelleği atlayacak şekilde yapılandırılmıştır.
• fetch isteği Authorization veya Cookie başlıklarını kullanır ve bileşen ağacında bunun üzerinde önbelleğe alınmamış bir istek vardır.

Individual fetch Requests

Bireysel fetch istekleri için önbelleğe almayı devre dışı bırakmak için, fetch adresindeki cache seçeneğini 'no-store' olarak ayarlayabilirsiniz. Bu, verileri her istekte dinamik olarak getirecektir.

fetch('https://...', { cache: 'no-store' })

Mevcut tüm cache seçeneklerini fetch API referansında görüntüleyin.

Multiple fetch Requests

Bir rota segmentinde (örneğin bir Düzen veya Sayfa) birden fazla fetch isteğiniz varsa, Segment Yapılandırma Seçeneklerini kullanarak segmentteki tüm veri isteklerinin önbelleğe alma davranışını yapılandırabilirsiniz.

Ancak, her fetch isteğinin önbelleğe alma davranışını ayrı ayrı yapılandırmanızı öneririz. Bu size önbellekleme davranışı üzerinde daha ayrıntılı kontrol sağlar.

Fetching data on the Server with third-party libraries

fetch adresini desteklemeyen veya göstermeyen üçüncü taraf bir kütüphane kullandığınız durumlarda (örneğin, bir veritabanı, CMS veya ORM istemcisi), Route Segment Config Seçeneğini ve React'in cache işlevini kullanarak bu isteklerin önbelleğe alma ve yeniden doğrulama davranışını yapılandırabilirsiniz.

Verilerin önbelleğe alınıp alınmayacağı, rota segmentinin statik mi yoksa dinamik olarak mı oluşturulduğuna bağlıdır. Segment statikse (varsayılan), isteğin çıktısı önbelleğe alınır ve rota segmentinin bir parçası olarak yeniden doğrulanır. Segment dinamikse, isteğin çıktısı önbelleğe alınmaz ve segment oluşturulduğunda her istekte yeniden taranır.

Deneysel unstable_cache API'sini de kullanabilirsiniz.

Example

Aşağıdaki örnekte:

• React cache fonksiyonu veri isteklerini memoize etmek için kullanılır.
• revalidate seçeneği Düzen ve Sayfa segmentlerinde 3600 olarak ayarlanmıştır, yani veriler önbelleğe alınacak ve en fazla saatte bir yeniden doğrulanacaktır.

import { cache } from 'react'
 
export const getItem = cache(async (id: string) => {
  const item = await db.item.findUnique({ id })
  return item
})

getItem işlevi iki kez çağrılmasına rağmen, veritabanına yalnızca bir sorgu yapılacaktır.

import { getItem } from '@/utils/get-item'
 
export const revalidate = 3600 // revalidate the data at most every hour
 
export default async function Layout({
  params: { id },
}: {
  params: { id: string }
}) {
  const item = await getItem(id)
  // ...
}

import { getItem } from '@/utils/get-item'
 
export const revalidate = 3600 // revalidate the data at most every hour
 
export default async function Page({
  params: { id },
}: {
  params: { id: string }
}) {
  const item = await getItem(id)
  // ...
}

Fetching Data on the Client with Route Handlers

Bir istemci bileşeninde veri getirmeniz gerekiyorsa, istemciden bir Route Handler çağırabilirsiniz. Route Handler'lar sunucuda çalışır ve verileri istemciye döndürür. Bu, API belirteçleri gibi hassas bilgileri istemciye ifşa etmek istemediğinizde kullanışlıdır.

Örnekler için Route Handler belgelerine bakın.

Sunucu Bileşenleri ve Rota İşleyicileri

Sunucu Bileşenleri sunucuda işlendiğinden, verileri almak için bir Sunucu Bileşeninden bir Rota İşleyicisi çağırmanıza gerek yoktur. Bunun yerine, verileri doğrudan Sunucu Bileşeninin içinden alabilirsiniz.

Fetching Data on the Client with third-party libraries

Ayrıca SWR veya TanStack Query gibi üçüncü taraf bir kütüphane kullanarak istemciden veri getirebilirsiniz. Bu kütüphaneler istekleri hafızaya almak, önbelleğe almak, yeniden doğrulamak ve verileri değiştirmek için kendi API'lerini sağlar.

Gelecek API'ler:

use bir fonksiyon tarafından döndürülen bir vaadi kabul eden ve işleyen bir React fonksiyonudur. fetch adresini use adresine sarmak şu anda İstemci Bileşenlerinde önerilmemektedir ve birden fazla yeniden oluşturmayı tetikleyebilir. React dokümanlarında use hakkında daha fazla bilgi edinin .