Merhaba arkadaşlar, bugün sizlere Next.js'te karşılaştığım en tatlı özelliklerden birini, Incremental Static Regeneration'ı (ISR) anlatacağım. Özellikle sık sık güncellenen ürün listeleri, haber siteleri veya kullanıcı yorumları gibi dinamik içeriklerde, her istekte sunucuya yüklenmektense statik sayfaların hızını nasıl koruyabileceğimizi konuşacağız. Bu hatayı ilk gördüğümde kafayı yemiştim diyebilirim, çünkü geleneksel Static Generation (SSG) ile bu tür içerikleri yönetmek imkansızdı. İşte benim kullandığım en temiz çözüm!
Karşılaştığım Sorun ve ISR'nin Gücü
Bir e-ticaret projesinde, her gün onlarca kez güncellenen fiyat ve stok bilgilerini içeren ürün detay sayfalarım vardı. Klasik `getStaticProps` ile build zamanında oluşturulan sayfalar, veri güncellendiğinde eski kalıyordu. Her seferinde yeniden build atmak da saatler sürüyordu. İşte tam burada ISR devreye giriyor. ISR, build zamanında oluşturduğun statik sayfaları, belirttiğin aralıklarla (örneğin her 10 saniyede bir) arka planda yeniden oluşturup güncellenmiş haliyle cache'liyor. Kullanıcı her zaman güncel olmasa da "yeterince güncel" ve inanılmaz hızlı bir sayfa görüyor.
getStaticProps ile ISR'yi Aktif Etmek
ISR'yi kullanmak inanılmaz basit. `getStaticProps` fonksiyonunuzdan `revalidate` adında bir anahtar döndürmeniz yeterli. Bu değer, sayfanın kaç saniyede bir yeniden oluşturulabileceğini (revalidate) belirtir.
Yukarıdaki kodda, `revalidate: 10` diyerek Next.js'e "Bu sayfanın oluşturulmuş statik halini 10 saniye boyunca sun. 10 saniye dolduktan sonra gelen ilk istekte, sayfayı arka planda yeniden oluştur ve cache'ini güncelle" talimatını vermiş oluyoruz.
Fallback ve On-Demand Revalidation (İsteğe Bağlı Yenileme)
Peki ya build zamanında oluşturmadığımız yeni bir ürün sayfasına istek gelirse? İşte burada `getStaticPaths` ile `fallback: true` veya `'blocking'` kullanıyoruz. Bu, önceden oluşturulmamış sayfalar için istek anında SSR benzeri bir oluşturma yapılmasını sağlıyor.
Daha da güzeli, On-Demand Revalidation. Diyelim ki admin panelinizden bir ürünün fiyatını değiştirdiniz ve 10 saniye beklemek istemiyorsunuz. Next.js, bir API Route'u tetikleyerek o sayfanın cache'ini anında temizlemenize izin veriyor.
Admin panelinizdeki "Güncelle" butonuna bu API endpoint'ini (`/api/revalidate?secret=xxx&path=/urunler/123`) çağıracak bir işlev ekleyebilirsiniz. İşte bu kadar!
Sonuç ve Performans Kazanımı
ISR sayesinde, siteniz hem statik siteler kadar hızlı hem de dinamik içerikler kadar güncel kalabiliyor. CDN'de cache'lenen sayfalar, sunucu yükünü inanılmaz azaltıyor ve ölçeklenebilirliği artırıyor. Benim projemde sayfa yükleme süreleri %70'ten fazla iyileşti ve sunucu maliyetleri düştü.
Siz Next.js'te ISR veya On-Demand Revalidation kullandınız mı? Karşılaştığınız farklı senaryolar veya daha farklı optimizasyon yöntemleriniz var mı? Yorumlarda deneyimlerinizi paylaşın, birlikte öğrenelim!
Karşılaştığım Sorun ve ISR'nin GücüBir e-ticaret projesinde, her gün onlarca kez güncellenen fiyat ve stok bilgilerini içeren ürün detay sayfalarım vardı. Klasik `getStaticProps` ile build zamanında oluşturulan sayfalar, veri güncellendiğinde eski kalıyordu. Her seferinde yeniden build atmak da saatler sürüyordu. İşte tam burada ISR devreye giriyor. ISR, build zamanında oluşturduğun statik sayfaları, belirttiğin aralıklarla (örneğin her 10 saniyede bir) arka planda yeniden oluşturup güncellenmiş haliyle cache'liyor. Kullanıcı her zaman güncel olmasa da "yeterince güncel" ve inanılmaz hızlı bir sayfa görüyor.
getStaticProps ile ISR'yi Aktif EtmekISR'yi kullanmak inanılmaz basit. `getStaticProps` fonksiyonunuzdan `revalidate` adında bir anahtar döndürmeniz yeterli. Bu değer, sayfanın kaç saniyede bir yeniden oluşturulabileceğini (revalidate) belirtir.
JavaScript:
// pages/urunler/[id].js
export async function getStaticProps(context) {
const { params } = context;
const urunId = params.id;
// API'nizden veya veritabanınızdan ürün verisini çekin
const urunVerisi = await fetch(`https://api.sitem.com/urunler/${urunId}`).then(res => res.json());
// Eğer ürün bulunamazsa 404 sayfası göster
if (!urunVerisi) {
return {
notFound: true,
};
}
// BU SATIR ÇOK ÖNEMLİ: 10 saniyede bir yeniden oluşturulabilir.
return {
props: {
urun: urunVerisi
},
revalidate: 10 // 👈 Sihir burada!
};
}Yukarıdaki kodda, `revalidate: 10` diyerek Next.js'e "Bu sayfanın oluşturulmuş statik halini 10 saniye boyunca sun. 10 saniye dolduktan sonra gelen ilk istekte, sayfayı arka planda yeniden oluştur ve cache'ini güncelle" talimatını vermiş oluyoruz.
Fallback ve On-Demand Revalidation (İsteğe Bağlı Yenileme)Peki ya build zamanında oluşturmadığımız yeni bir ürün sayfasına istek gelirse? İşte burada `getStaticPaths` ile `fallback: true` veya `'blocking'` kullanıyoruz. Bu, önceden oluşturulmamış sayfalar için istek anında SSR benzeri bir oluşturma yapılmasını sağlıyor.
Daha da güzeli, On-Demand Revalidation. Diyelim ki admin panelinizden bir ürünün fiyatını değiştirdiniz ve 10 saniye beklemek istemiyorsunuz. Next.js, bir API Route'u tetikleyerek o sayfanın cache'ini anında temizlemenize izin veriyor.
JavaScript:
// pages/api/revalidate.js
export default async function handler(req, res) {
// Gizli bir token ile isteği doğrulayın (GÜVENLİK!)
if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
return res.status(401).json({ message: 'Geçersiz token' });
}
try {
const pathToRevalidate = req.query.path; // Örn: '/urunler/123'
await res.revalidate(pathToRevalidate); // 👈 Cache'i temizle ve yeniden oluştur
return res.json({ revalidated: true });
} catch (err) {
return res.status(500).send('Revalidation hatası');
}
}Admin panelinizdeki "Güncelle" butonuna bu API endpoint'ini (`/api/revalidate?secret=xxx&path=/urunler/123`) çağıracak bir işlev ekleyebilirsiniz. İşte bu kadar!
Sonuç ve Performans KazanımıISR sayesinde, siteniz hem statik siteler kadar hızlı hem de dinamik içerikler kadar güncel kalabiliyor. CDN'de cache'lenen sayfalar, sunucu yükünü inanılmaz azaltıyor ve ölçeklenebilirliği artırıyor. Benim projemde sayfa yükleme süreleri %70'ten fazla iyileşti ve sunucu maliyetleri düştü.
Siz Next.js'te ISR veya On-Demand Revalidation kullandınız mı? Karşılaştığınız farklı senaryolar veya daha farklı optimizasyon yöntemleriniz var mı? Yorumlarda deneyimlerinizi paylaşın, birlikte öğrenelim!