Incremental Static Regeneration (ISR)

Next.js, sitenizi oluşturduktan sonra statik sayfalar oluşturmanıza veya güncellemenize olanak tanır. Artımlı Statik Yenileme (ISR), tüm siteyi yeniden oluşturmanıza gerek kalmadan sayfa bazında statik oluşturmayı kullanmanızı sağlar. ISR ile, milyonlarca sayfaya ölçeklenirken statik avantajlarını koruyabilirsiniz.

Bilmekte fayda var: edge çalışma zamanı şu anda ISR ile uyumlu değildir, ancak cache-control başlığını manuel olarak ayarlayarak stale-while-revalidate 'den yararlanabilirsiniz.

ISR'yi kullanmak için revalidate prop'unu getStaticProps adresine ekleyin:

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}
 
// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  }
}
 
// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// the path has not been generated.
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
 
  // We'll pre-render only these paths at build time.
  // { fallback: 'blocking' } will server-render pages
  // on-demand if the path doesn't exist.
  return { paths, fallback: 'blocking' }
}
 
export default Blog

Derleme sırasında önceden oluşturulmuş bir sayfaya istek yapıldığında, başlangıçta önbelleğe alınmış sayfa gösterilir.

• İlk istekten sonra ve 10 saniyeden önce sayfaya yapılan tüm istekler de önbelleğe alınır ve anında gerçekleşir.
• 10 saniyelik pencereden sonra, bir sonraki istek hala önbelleğe alınmış (eski) sayfayı gösterecektir
• Next.js arka planda sayfanın yenilenmesini tetikler.
• Sayfa başarıyla oluşturulduktan sonra Next.js önbelleği geçersiz kılacak ve güncellenmiş sayfayı gösterecektir. Arka planda yenileme başarısız olursa, eski sayfa değiştirilmeden kalacaktır.

Oluşturulmamış bir yola istek yapıldığında, Next.js ilk istekte sayfayı sunucuda oluşturacaktır. Daha sonraki istekler statik dosyayı önbellekten sunacaktır. Vercel üzerindeki ISR, önbelleği global olarak sürdürür ve geri alma işlemlerini gerçekleştirir .

Bilmekte fayda var: Yukarı akış veri sağlayıcınızda önbelleğin varsayılan olarak etkin olup olmadığını kontrol edin. Devre dışı bırakmanız gerekebilir (örn. useCdn: false), aksi takdirde bir yeniden doğrulama ISR önbelleğini güncellemek için yeni verileri çekemez. Önbellekleme, Cache-Control başlığını döndürdüğünde bir CDN'de (talep edilen bir uç nokta için) gerçekleşebilir.

On-Demand Revalidation

revalidate zamanını 60 olarak ayarlarsanız, tüm ziyaretçiler bir dakika boyunca sitenizin aynı oluşturulmuş sürümünü görecektir. Önbelleği geçersiz kılmanın tek yolu, o sayfayı bir dakika geçtikten sonra ziyaret etmektir.

Next.js, v12.2.0 adresinden başlayarak, belirli bir sayfa için Next.js önbelleğini manuel olarak temizlemek için İsteğe Bağlı Artımlı Statik Yenilemeyi destekler. Bu, sitenizi ne zaman güncelleyeceğinizi kolaylaştırır:

• Başlıksız CMS'nizden içerik oluşturulur veya güncellenir
• E-ticaret meta veri değişiklikleri (fiyat, açıklama, kategori, yorumlar, vb.)

getStaticProps içinde, isteğe bağlı yeniden doğrulamayı kullanmak için revalidate belirtmeniz gerekmez. revalidate belirtilmezse, Next.js varsayılan false değerini kullanır (yeniden doğrulama yok) ve sayfayı yalnızca revalidate() çağrıldığında isteğe bağlı olarak yeniden doğrular.

Bilmekte fayda var: İsteğe Bağlı ISR istekleri için ara katman yazılımı yürütülmez. Bunun yerine, yeniden doğrulanmasını istediğiniz tam yol üzerinde revalidate() adresini çağırın. Örneğin, pages/blog/[slug].js adresiniz ve /post-1 -> /blog/post-1 adresinden bir yeniden yazmanız varsa, res.revalidate('/blog/post-1') adresini çağırmanız gerekir.

Using On-Demand Revalidation

İlk olarak, yalnızca Next.js uygulamanız tarafından bilinen bir gizli belirteç oluşturun. Bu sır, revalidation API Rotasına yetkisiz erişimi önlemek için kullanılacaktır. Aşağıdaki URL yapısı ile rotaya (manuel olarak veya bir web kancası ile) erişebilirsiniz:

https://<your-site.com>/api/revalidate?secret=<token>

Ardından, sırrı uygulamanıza bir Ortam Değişkeni olarak ekleyin. Son olarak, revalidation API Rotasını oluşturun:

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }
 
  try {
    // this should be the actual path not a rewritten path
    // e.g. for "/blog/[slug]" this should be "/blog/post-1"
    await res.revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating')
  }
}

İsteğe bağlı yeniden doğrulamayı çalışırken görmek ve geri bildirimde bulunmak için adresindeki demomuzu görüntül eyin.

Testing on-Demand ISR during development

next dev ile yerel olarak çalıştırıldığında, getStaticProps her istekte çağrılır. İsteğe bağlı ISR yapılandırmanızın doğru olduğunu doğrulamak için bir üretim derlemesi oluşturmanız ve üretim sunucusunu başlatmanız gerekecektir:

$ next build
$ next start

Ardından, statik sayfaların başarıyla yeniden doğrulandığını onaylayabilirsiniz.

Error handling and revalidation

Arka plan yenilemesini işlerken getStaticProps içinde bir hata oluşursa veya manuel olarak bir hata atarsanız, başarıyla oluşturulan son sayfa gösterilmeye devam edecektir. Sonraki bir sonraki istekte Next.js, getStaticProps adresini çağırmayı yeniden deneyecektir.

export async function getStaticProps() {
  // If this request throws an uncaught error, Next.js will
  // not invalidate the currently shown page and
  // retry getStaticProps on the next request.
  const res = await fetch('https://.../posts')
  const posts = await res.json()
 
  if (!res.ok) {
    // If there is a server error, you might want to
    // throw an error instead of returning so that the cache is not updated
    // until the next successful request.
    throw new Error(`Failed to fetch posts, received status ${res.status}`)
  }
 
  // If the request was successful, return the posts
  // and revalidate every 10 seconds.
  return {
    props: {
      posts,
    },
    revalidate: 10,
  }
}

Self-hosting ISR

Incremental Static Regeneration (ISR), next start adresini kullandığınızda kendi kendine barındırılan Next.js sitelerinde kutudan çıktığı gibi çalışır.

Next.js'yi kendi kendine barındırma hakkında daha fazla bilgi edinin.

Version History