Next.js ile Artımlı Statik Yenileme (ISR) İçin Eksiksiz Bir Kılavuz

Bir yıl önce Next.js 9.3, Statik Site Oluşturma (SSG) desteğini yayınlayarak onu ilk hibrit çerçeve haline getirdi. Bu noktada birkaç yıldır mutlu bir Next.js kullanıcısıydım, ancak bu sürüm Next.js'yi yeni varsayılan çözümüm yaptı. Next.js ile kapsamlı bir şekilde çalıştıktan sonra, Tripadvisor ve Washington Post gibi şirketlerin Next.js'yi benimsemelerine ve ölçeklendirmelerine yardımcı olmak için Vercel'e katıldım.

Bu makalede, Jamstack'in yeni bir evrimini keşfetmek istiyorum: Artımlı Statik Yenileme (ISR) . Aşağıda, kullanım örnekleri, demolar ve ödünleşimler dahil olmak üzere bir ISR kılavuzu bulacaksınız.

Statik Site Oluşturma Sorunu

Jamstack'in arkasındaki fikir çekici: bir CDN'ye aktarılabilen ve saniyeler içinde küresel olarak kullanılabilen önceden oluşturulmuş statik sayfalar. Statik içerik hızlıdır, kesinti süresine dayanıklıdır ve tarayıcılar tarafından hemen dizine eklenir. Ama bazı sorunlar var.

Büyük ölçekli bir statik site oluştururken Jamstack mimarisini benimsediyseniz, sitenizin oluşturulması için saatlerce beklemek zorunda kalabilirsiniz. Sayfa sayısını iki katına çıkarırsanız, oluşturma süresi de iki katına çıkar. Target.com'u ele alalım. Her dağıtımda statik olarak milyonlarca ürün oluşturmak mümkün müdür?

Her sayfa gerçekçi olmayan 1 ms'lik bir sürede statik olarak oluşturulmuş olsa bile, sitenin tamamını yeniden oluşturmak yine de saatler sürer. Büyük web uygulamaları için tam statik site oluşturmayı seçmek başlangıç ​​değildir. Büyük ölçekli ekiplerin daha esnek, kişiselleştirilmiş, hibrit bir çözüme ihtiyacı var.

İçerik Yönetim Sistemleri (İYS)

Birçok ekip için sitelerinin içeriği koddan ayrıştırılır. Headless CMS kullanmak, içerik editörlerinin bir geliştiriciyi dahil etmeden değişiklikleri yayınlamasına olanak tanır. Ancak geleneksel statik sitelerde bu süreç yavaş olabilir.

100.000 ürün içeren bir e-ticaret mağazası düşünün. Ürün fiyatları sık sık değişmektedir. Bir içerik düzenleyici, bir promosyonun parçası olarak kulaklık fiyatını 100 ABD Dolarından 75 ABD Dolarına değiştirdiğinde, CMS'leri tüm siteyi yeniden oluşturmak için bir web kancası kullanır. Yeni fiyatın yansıması için saatlerce beklemek mümkün değil.

Gereksiz hesaplama içeren uzun yapılar da ek masraflara neden olabilir. İdeal olarak, uygulamanız hangi ürünlerin değiştiğini anlayacak ve tam bir yeniden oluşturma işlemine gerek kalmadan bu sayfaları aşamalı olarak güncelleyecek kadar akıllıdır.

Artımlı Statik Rejenerasyon (ISR)

Next.js, sitenizi oluşturduktan sonra statik sayfalar oluşturmanıza veya güncellemenize olanak tanır. Artımlı Statik Yenileme (ISR), geliştiricilerin ve içerik düzenleyicilerin tüm siteyi yeniden oluşturmaya gerek kalmadan sayfa başına statik oluşturmayı kullanmasını sağlar. ISR ile, milyonlarca sayfaya ölçeklerken statikin avantajlarını koruyabilirsiniz.

Statik sayfalar, ISR ile derleme zamanında değil, çalışma zamanında (istek üzerine) oluşturulabilir. Analitik, A/B testi veya diğer ölçümleri kullanarak, yapım sürelerinde kendi ödünleşiminizi yapma esnekliğine sahipsiniz.

100.000 ürüne sahip e-ticaret mağazasını önceden düşünün. Her ürün sayfasını statik olarak oluşturmak için gerçekçi bir 50ms'de, bu, ISR olmadan neredeyse 2 saat sürer. ISR ile aşağıdakiler arasından seçim yapabiliriz:

• Daha Hızlı Yapılar
  En popüler 1.000 ürünü yapım anında üretin. Diğer ürünlere yapılan istekler bir önbellek kaçırma olacak ve isteğe bağlı olarak statik olarak oluşturulacak: 1 dakikalık derlemeler.
• Daha Yüksek Önbellek İsabet Oranı
  Derleme zamanında 10.000 ürün üreterek, daha fazla ürünün bir kullanıcının isteğinden önce önbelleğe alınmasını sağlayın: 8 dakikalık derlemeler.

Bir e-ticaret ürün sayfası için bir ISR örneğini inceleyelim.

Başlarken

Veri işleniyor

Next.js'yi daha önce hiç kullanmadıysanız, temel bilgileri anlamak için Next.js'ye Başlarken okumanızı tavsiye ederim. ISR, statik sayfalar oluşturmak için aynı Next.js API'sini kullanır: getStaticProps . revalidate: 60 belirterek, Next.js'yi bu sayfa için ISR kullanması için bilgilendiririz.

1. Next.js, sayfa başına bir yeniden doğrulama süresi tanımlayabilir. 60 saniyeye ayarlayalım.
2. Ürün sayfasına yapılan ilk istek, önbelleğe alınmış sayfayı orijinal fiyatla gösterecektir.
3. Ürüne ilişkin veriler CMS'de güncellenir.
4. İlk istekten sonra ve 60 saniyeden önce sayfaya yapılan tüm istekler önbelleğe alınır ve anında gerçekleşir.
5. 60 saniyelik pencereden sonra, bir sonraki istek önbelleğe alınmış (eski) sayfayı göstermeye devam edecektir. Next.js , arka planda sayfanın yenilenmesini tetikler.
6. Sayfa başarıyla oluşturulduktan sonra, Next.js önbelleği geçersiz kılar ve güncellenmiş ürün sayfasını gösterir. Arka plan yenileme başarısız olursa, eski sayfa değiştirilmeden kalır.

 // pages/products/[id].js export async function getStaticProps({ params }) { return { props: { product: await getProductFromDatabase(params.id) }, revalidate: 60 } }

Yol Oluşturma

Next.js, hangi ürünlerin yapım anında ve hangilerinin talep üzerine üretileceğini tanımlar. getStaticPaths en iyi 1.000 ürün kimliğinin bir listesini sağlayarak derleme sırasında yalnızca en popüler 1.000 ürünü oluşturalım.

İlk derlemeden sonra diğer ürünlerden herhangi birini talep ederken Next.js'nin nasıl "geri döneceğini" yapılandırmamız gerekiyor. Aralarından seçim yapabileceğiniz iki seçenek vardır: blocking ve true .

• fallback: blocking (tercih edilen)
  Oluşturulmamış bir sayfaya istek yapıldığında, Next.js, ilk istekte sayfayı sunucu-işler. Gelecekteki istekler, statik dosyayı önbellekten sunacaktır.
• fallback: true
  Oluşturulmamış bir sayfaya istek yapıldığında, Next.js ilk istekte hemen yükleme durumuyla statik bir sayfa sunar. Verilerin yüklenmesi bittiğinde, sayfa yeni verilerle yeniden oluşturulacak ve önbelleğe alınacaktır. Gelecekteki istekler, statik dosyayı önbellekten sunacaktır.

 // pages/products/[id].js export async function getStaticPaths() { const products = await getTop1000Products() const paths = products.map((product) => ({ params: { id: product.id } })) return { paths, fallback: 'blocking' } }

ödünleşimler

Next.js, her şeyden önce son kullanıcıya odaklanır. "En iyi çözüm" görecelidir ve sektöre, hedef kitleye ve uygulamanın doğasına göre değişir. Next.js, geliştiricilerin çerçevenin sınırlarını terk etmeden çözümler arasında geçiş yapmasına izin vererek proje için doğru aracı seçmenize olanak tanır.

Sunucu Tarafı Oluşturma

ISR her zaman doğru çözüm değildir. Örneğin, Facebook haber akışı eski içeriği gösteremez. Bu durumda, içeriği geçersiz kılmak için SSR'yi ve potansiyel olarak kendi cache-control başlıklarınızı vekil anahtarlarla kullanmak istersiniz. Next.js karma bir çerçeve olduğundan, bu ödünleşimi kendiniz yapabilir ve çerçeve içinde kalabilirsiniz.

 // You can cache SSR pages at the edge using Next.js // inside both getServerSideProps and API Routes res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate');

SSR ve kenar önbelleğe alma, ISR'ye benzer (özellikle stale-while-revalidate önbelleğe alma başlıkları kullanılıyorsa), ana fark ilk istektir. ISR ile, önceden oluşturulmuşsa ilk istek statik olarak garanti edilebilir. Veritabanınız çökse veya bir API ile iletişimde bir sorun olsa bile, kullanıcılarınız doğru şekilde sunulan statik sayfayı görmeye devam edecektir. Ancak SSR, gelen talebe göre sayfanızı özelleştirmenize izin verecektir.

Not : SSR'yi önbelleğe almadan kullanmak performansın düşmesine neden olabilir. Kullanıcının sitenizi görmesini engellerken her milisaniye önemlidir ve bunun TTFB'niz (İlk Bayt Süresi) üzerinde çarpıcı bir etkisi olabilir.

Statik Site Oluşturma

ISR, küçük web siteleri için her zaman mantıklı değildir. Yeniden doğrulama süreniz sitenizin tamamını yeniden oluşturmak için gereken süreden daha uzunsa, geleneksel statik site oluşturmayı da kullanabilirsiniz.

İstemci Tarafı Oluşturma

React'i Next.js olmadan kullanırsanız, istemci tarafında işleme kullanıyorsunuz demektir. Uygulamanız bir yükleme durumu sunar ve ardından istemci tarafında JavaScript içinde veri ister (örn. useEffect ). Bu, barındırma seçeneklerinizi artırsa da (sunucuya gerek olmadığı için), bazı ödünler de vardır.

İlk HTML'den önceden oluşturulmuş içeriğin olmaması, daha yavaş ve daha az dinamik Arama Motoru Optimizasyonuna (SEO) yol açar. JavaScript devre dışıyken CSR kullanmak da mümkün değildir.

ISR Yedek Seçenekleri

Verileriniz hızlı bir şekilde alınabiliyorsa, fallback: blocking kullanmayı düşünün. Ardından, yükleme durumunu düşünmeniz gerekmez ve sayfanız her zaman aynı sonucu gösterir (önbelleğe alınmış olsun veya olmasın). Veri getirme işleminiz yavaşsa, fallback: true , kullanıcıya hemen bir yükleme durumu göstermenize olanak tanır.

ISR: Sadece Önbelleğe Alma Değil!

ISR'yi bir önbellek bağlamında açıklamış olsam da , oluşturulan sayfalarınızı dağıtımlar arasında kalıcı kılmak için tasarlanmıştır. Bu, anında geri dönebileceğiniz ve önceden oluşturulmuş sayfalarınızı kaybetmeyeceğiniz anlamına gelir.

Her dağıtım, Next.js'nin statik olarak oluşturulmuş sayfaları kalıcı kılmak için kullandığı bir kimlikle anahtarlanabilir. Geri aldığınızda, anahtarı önceki dağıtıma işaret edecek şekilde güncelleyerek atomik dağıtımlara izin verebilirsiniz. Bu, önceki değişmez dağıtımlarınızı ziyaret edebileceğiniz ve istendiği gibi çalışacakları anlamına gelir.

• İşte ISR ile kodu geri döndürmeye bir örnek:
• Kodu basarsınız ve bir dağıtım kimliği 123 alırsınız.
• Sayfanızda "Smshng Magazine" yazım hatası var.
• Sayfayı CMS'de güncellersiniz. Yeniden dağıtım gerekmez.
• Sayfanız “Smashing Magazine”i gösterdiğinde, depoda kalmaya devam eder.
• Bazı kötü kodlara basıyorsunuz ve ID 345'i dağıtıyorsunuz.
• Dağıtım kimliği 123'e geri dönersiniz.
• Hala “Smashing Magazine”i görüyorsunuz.

Geri dönüşler ve kalıcı statik sayfalar, Next.js kapsamı dışındadır ve barındırma sağlayıcınıza bağlıdır. Tasarım gereği önbelleklerin süresi dolduğu için, ISR'nin Cache-Control üstbilgileriyle sunucu oluşturmadan farklı olduğunu unutmayın. Bölgeler arasında paylaşılmazlar ve geri alındığında silinirler.

Artımlı Statik Rejenerasyon Örnekleri

Artımlı Statik Yenileme, e-ticaret, pazarlama sayfaları, blog gönderileri, reklam destekli medya ve daha fazlası için iyi çalışır.

• E-ticaret Demosu
  Next.js Commerce, yüksek performanslı e-ticaret siteleri için hepsi bir arada bir başlangıç ​​kitidir.
• GitHub Tepkileri Demosu
  Orijinal GitHub sorununa tepki verin ve ISR'nin statik olarak oluşturulmuş açılış sayfasını güncellemesini izleyin.
• Statik Tweetler Demosu
  Bu proje 30 saniyede devreye giriyor, ancak ISR kullanarak isteğe bağlı olarak statik olarak 500 milyon tweet üretebiliyor.

Next.js'yi Bugün Öğrenin

Geliştiriciler ve büyük ekipler, hibrit yaklaşımı ve isteğe bağlı olarak aşamalı olarak sayfa oluşturma yeteneği nedeniyle Next.js'yi seçiyor. ISR ile, sunucu oluşturma esnekliği ile statik avantajlarından yararlanırsınız. ISR, next start kullanarak kutudan çıktığı gibi çalışır.

Next.js, kademeli olarak benimsenecek şekilde tasarlanmıştır. Next.js ile mevcut kodunuzu kullanmaya devam edebilir ve ihtiyacınız olduğu kadar çok (veya az) React ekleyebilirsiniz. Küçükten başlayarak ve aşamalı olarak daha fazla sayfa ekleyerek, tam bir yeniden yazmayı önleyerek özelliğin raydan çıkmasını önleyebilirsiniz. Next.js hakkında daha fazla bilgi edinin — ve herkese mutlu kodlamalar!

Daha fazla okuma

• Next.js'ye Başlarken
• Next.js'de Stil Yöntemlerini Karşılaştırma
• Next.js API Rotalarını Kullanarak Bir GraphQL Sunucusu Nasıl Oluşturulur