Next.Js Ön Belleği Nasıl Yenilenir? “On-Demand Cache Regeneration”

Next.js sitenizin derlenmesinden sonra statik sayfalar oluşturmanız veya güncellemenize olanak veriyor. Incremental Static Regeneration (ISR) adı verilen bu özellik sitenin tamamını baştan derlemenize gerek olmadan sayfa bazında statik sayfa oluşturmanıza izin veriyor.


Next.Js Ön Belleği Nasıl Yenilenir? “On-Demand Cache Regeneration”

Başlık Fotoğrafı: Freepik storyset nickli kullanıcıdan

Next.js sitenizin derlenmesinden sonra statik sayfalar oluşturmanız veya güncellemenize olanak veriyor. Incremental Static Regeneration (ISR) adı verilen bu özellik sitenin tamamını baştan derlemenize gerek olmadan sayfa bazında statik sayfa oluşturmanıza izin veriyor. Next.js 12.1 sürümü ile duyurulan On-demand revalidation özelliği headless WordPress yapısındaki bu siteyi oluştururken Nuxt.js yerine Next.js’i tercih etme sebebim olmuştu. Benzer özellik bir kaç ay sonra Nuxt.js için de duyuruldu ve Nuxt.js (Vue) tekrar oyuna girmiş oldu.

Next.js v12.1.0 ile başlayarak On-Demand Incremental Static Regeneration özelliğini getirdi ve bu özellik spesifik bir sayfa için Next.js ön belleğini temizleme olanağı sağladı. Sonraki Next.js sürümü olan v12.2.0 ile bu özellik kararlı (stable) statüsü kazandı. Fakat unstable_revalidate() olan fonksiyon adını revalidate()’e çevirerek bu deneysel özelliği kullanan sitelerin patlamasına neden oldu. Sonuç olarak web sitemin ön bellek yenilemesinin patlama nedenini çözmek bir saatime mal oldu.

On Demand Static Generation Avantajları

Statik sayfa oluşturma özeliği içeriğiniz tam olarak statikse harika. Fakat çoğu zaman içeriğimiz tamamen veya kısmi olarak değişebiliyor. Bu nedenle bu özellik çıkana kadar sunucu taraflı sayfa oluşturma (Server Side Generation) yapıyor ve ön belleği sunucu tarafında manuel olarak yönetiyorduk. Incremental Static Regeneration özelliği derleme sırasında var olmayan içeriği oluşturmamız ve hatta bir yaşam süresi belirleyerek o süre sonunda yenilememize izin verdi. On-demand static regeneration bunu bir adım daha öteye götürerek adından da anlaşılacağı gibi ön belleğin sadece talep edildiğinde yenilenmesine olanak sağladı.

On-Demand Static Regeneration nasıl kullanılır?

İlk olarak sadece Next.js uygulamanız tarafından bilinen bir gizli anahtar belirlemelisiniz. Bu anahtarı ön bellek yenileme isteklerini alacak API ucunuza yetki dışı erişilmesini engellemek için kullanacaksınız. Aşağıdaki gibi bir URL yapısına sahip olacak bu uç noktayı manuel veya webhook yöntemi ile tetikleyebilirsiniz;

https://<alan-adiniz.com>/api/revalidate?secret=MY_SECRET_TOKEN

Belirlediğiniz bu gizli anahtarı ortam değişkenlerine ekleyin ve ön bellek yenileme uç noktanızı aşağıdaki örneğe benzer şekilde oluşturun;

// pages/api/revalidate.js

export default async function handler(req, res) {
  // İsteğin geçerli olduğunu doğrulamak için gizli anahtarı kontrol edin.
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Geçersiz anahtar' })
  }

  try {
    // yol parametrik değil gerçek yol olmalıdır
    // örneğin "/blog/[slug]" yerine "/blog/post-1" olmalıdır
    await res.revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })
  } catch (err) {
    // Eğer ön bellek yenilenirken bir hata olursa
    // Next.js oluşturulan son ön belleği kullanacaktır
    return res.status(500).send('Ön bellek temizleme başarısız oldu')
  }
}

Artık next.js ön belleğini temizlemenizi sağlayacak bir API uç noktanız oldu. Bu uç noktayı tetikleme mantığınız arka uç (backend) tarafında çözülecektir. Temel olarak arka uçtaki kodunuzda yenilenecek yol ve gizli anahtarınızı next.js API uç noktanıza göndermelisiniz. Örneğin ben headless WordPress yapımda yeni bir yazı/sayfa/kategori eklediğimde ya da güncellediğimde Next.js uç noktasını tetikleyen bir eklenti yazdım ve kullanıyorum.

Daha fazla bilgi için Next.Js Incremental Static Regeneration dokümantasyonu (İngilizce) inceleyebilirsiniz.

Bir soru, öneri ya da yorumunuz mu var?

Evren Bal

Ben Evren BAL

1996'dan beri ‘Internet canlısıyım!’

Evren Bal Hakkında daha fazla bilgi.

Tanışmak isterseniz hemen sosyal medyadan iletişime geçebilirsiniz.

Bana Ulaşın

Bana Ulaşın

  • Bir sorunuz mu var?
  • Yazıda bir hata mı farkettiniz?
  • Sayfa ile ilgili bir öneriniz mi var?
  • Yazmamı önereceğiniz bir konu mu var?

Lütfen iletişim formunu kullanarak veya sosyal medya hesaplarımdan bana ulaşın.

Digital Ocean Logo

VPS sunucusu denemek ister misiniz?

Digital Ocean&apos;a referans bağlantımdan kayıt olarak yeni oluşturacağınız hesabınızı 60 gün geçerli 100$ kredi ile açabilirsiniz. Bu miktar yüksek performanslı VPS&apos;leri bile denemeniz için yeterlidir.

Yapacağınız onca kurulumun boşa gitmemesi için benim tavsiyem uzun vadede kullanabileceğiniz özellik ve maliyetlerde bir sunucu oluşturmanızdır.

Ücretsiz 100$ kredi bağlantısı

60 günlük denemeniz sonunda eğer devam etmek istemezseniz hiç bir ücret ödemeyeceksiniz. Hizmeti kullanmaya devam etmek isterseniz harcamanız 25$&apos;a ulaştığında benim hesabıma da 25$ kredi yüklenecektir.

Diğer bir deyişle, siz 100$ ücretsiz krediyi her halükarda kazanırken, daha sonra ücretli devam etmeye karar verirseniz ben de 25$ kredi kazanacağım.

Copyright © 2022 - Evren BAL