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.