fetch

Next.js, sunucudaki her isteğin kendi kalıcı önbelleğe alma semantiğini ayarlamasına izin vermek için yerel Web fetch() API 'yi genişletir.

Tarayıcıda, cache seçeneği bir getirme isteğinin tarayıcının HTTP önbelleğiyle nasıl etkileşime gireceğini belirtir. Bu uzantı ile cache, sunucu tarafındaki bir getirme isteğinin çerçevenin kalıcı HTTP önbelleği ile nasıl etkileşime gireceğini belirtir.

fetch adresini async ve await ile doğrudan Sunucu Bileşenleri içinden çağırabilirsiniz.

export default async function Page() {
  // This request should be cached until manually invalidated.
  // Similar to `getStaticProps`.
  // `force-cache` is the default and can be omitted.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
 
  // This request should be refetched on every request.
  // Similar to `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
 
  // This request should be cached with a lifetime of 10 seconds.
  // Similar to `getStaticProps` with the `revalidate` option.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })
 
  return <div>...</div>
}

fetch(url, options)

Next.js, Web fetch() API'sini genişlettiğinden, mevcut yerel seçeneklerden herhangi birini kullanabilirsiniz .

options.cache

İsteğin Next.js Data Cache ile nasıl etkileşime gireceğini yapılandırın.

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

• force-cache (varsayılan) - Next.js, Veri Önbelleğinde eşleşen bir istek arar.
  • Bir eşleşme varsa ve yeni ise, önbellekten döndürülecektir.
  • Eşleşme yoksa veya eski bir eşleşme varsa, Next.js kaynağı uzak sunucudan alınır ve önbelleği indirilen kaynakla günceller.
• no-store - Next.js, önbelleğe bakmadan her istekte kaynağı uzak sunucudan getirir ve önbelleği indirilen kaynakla güncellemez.

Bildiğim iyi oldu:

• Bir cache seçeneği sağlamazsanız Next.js, cookies() gibi dinamik bir işlev kullanılmadığı sürece varsayılan olarak force-cache adresini kullanacaktır, bu durumda varsayılan olarak no-store adresini kullanacaktır.
• no-cache seçeneği Next.js'deki no-store ile aynı şekilde davranır.

options.next.revalidate

fetch(`https://...`, { next: { revalidate: false | 0 | number } })

Bir kaynağın önbellek ömrünü (saniye cinsinden) ayarlayın.

• false - Kaynağı süresiz olarak önbelleğe alır. Anlamsal olarak revalidate: Infinity ile eşdeğerdir. HTTP önbelleği zaman içinde eski kaynakları tahliye edebilir.
• 0 - Kaynağın önbelleğe alınmasını önleyin.
• number - (saniye cinsinden) Kaynağın önbellek ömrünün en fazla n saniye olması gerektiğini belirtin.

Bildiğim iyi oldu:

• Tek bir fetch() isteği, bir rotanın varsayılan revalidate adresinden daha düşük bir revalidate numarası belirlerse, tüm rota yeniden doğrulama aralığı azaltılacaktır.
• Aynı rotada aynı URL'ye sahip iki getirme isteği farklı revalidate değerlerine sahipse, daha düşük olan değer kullanılır.
• Kolaylık olması açısından, revalidate bir sayıya ayarlanmışsa cache seçeneğinin ayarlanması gerekli değildir, çünkü 0 cache: 'no-store' anlamına gelir ve pozitif bir değer cache: 'force-cache' anlamına gelir.
• { revalidate: 0, cache: 'force-cache' } veya { revalidate: 10, cache: 'no-store' } gibi çakışan seçenekler bir hataya neden olacaktır.

options.next.tags

fetch(`https://...`, { next: { tags: ['collection'] } })

Bir kaynağın önbellek etiketlerini ayarlayın. Veriler daha sonra isteğe bağlı olarak yeniden doğrulanabilir revalidateTag. Özel bir etiket için maksimum uzunluk 256 karakterdir.

Version History