Next.js'nin Artımlı Statik Yenilenmesi (ISR) ile SWR Tepki Kancalarını Kullanma

Next.js ile Artımlı Statik Yenileme (ISR) kullandıysanız, kendinizi istemciye eski veriler gönderirken bulmuş olabilirsiniz. Bu, sunucudaki sayfayı yeniden doğrularken oluşur. Bazı web siteleri için bu işe yarar, ancak diğerleri için (örneğin, @lachlanjc tarafından oluşturulmuş ve bakımına yardımcı olduğum bir site olan Hack Club's Scrapbook gibi), kullanıcı verilerin güncel tutulmasını bekler.

Akla gelen ilk çözüm, sayfaları sunucu tarafında oluşturmak ve istemciye her zaman en güncel verilerin gönderilmesini sağlamak olabilir. Ancak, oluşturmadan önce büyük veri yığınlarını getirmek, ilk sayfa yüklemesini yavaşlatabilir. Scrapbook'ta kullanılan çözüm , sunucudan önbelleğe alınan sayfayı istemci tarafı veri alma ile güncellemek için React kancalarının SWR kitaplığını kullanmaktı. Bu yaklaşım, kullanıcıların hala iyi bir deneyim yaşamasını, sitenin hızlı olmasını ve verilerin güncel tutulmasını sağlar.

SWR ile tanışın

SWR, Vercel tarafından oluşturulmuş bir React Hooks kitaplığıdır, adı bayatla yeniden doğrulama teriminden gelir. Adından da anlaşılacağı gibi, müşterinize eski/eski veriler sunulurken, müşteri tarafında en güncel veriler SWR aracılığıyla alınır (yeniden doğrulanır). SWR, verileri yalnızca bir kez yeniden doğrulamakla kalmaz, ancak SWR'yi, bir istemci İnternet'e yeniden bağlandığında veya programlı olarak yeniden bağlandığında sekme yeniden odaklandığında belirli aralıklarla verileri yeniden doğrulayacak şekilde yapılandırabilirsiniz.

ISR ve Next.js'nin API yollarıyla eşleştirildiğinde, SWR, duyarlı bir kullanıcı deneyimi oluşturmak için kullanılabilir. İstemciye ilk önce önbelleğe alınmış statik olarak oluşturulmuş sayfa getStaticProps() ile oluşturulur), arka planda sunucu da o sayfayı yeniden doğrulama işlemini başlatır (daha fazlasını buradan okuyun). Bu süreç müşteri için hızlıdır ve artık veri setini görebilirler, ancak bu bir dokunuş güncel olmayabilir. Sayfa yüklendikten sonra, getStaticProps() ile oluşturulanlarla aynı verileri döndüren bir Next.js API rotanıza bir getirme isteği yapılır. Bu istek tamamlandığında (başarılı olduğu varsayılarak), SWR sayfayı bu yeni verilerle güncelleyecektir.

Şimdi Scrapbook'a ve bunun sayfada eski verilerin olması sorununu çözmeye nasıl yardımcı olduğuna bakalım. Açık olan şu ki, istemci artık güncellenmiş bir sürüm alıyor. Ancak daha ilginç olan şey, bizim tarafımızın hızına olan etkisidir. Lighthouse üzerinden hızı ölçtüğümüzde, sitenin ISR + SWR varyantı için 1,5 saniyelik ve Sunucu Tarafı Oluşturma varyantı için 5,8 saniyelik bir hız endeksi elde ederiz (artı ilk sunucu yanıt süresiyle ilgili bir uyarı). Bu ikisi arasında oldukça keskin bir karşıtlık (ve sayfaları yüklerken de fark edildi). Ancak, Sunucu Tarafı Oluşturulan sayfasında, kullanıcı yeni verilerin gelmesiyle birkaç saniye sonra sitenin düzenini değiştirmedi. Scrapbook'un bu güncellemeyi iyi yönettiğine inanıyorum, kullanıcı deneyiminizi tasarlamak.

SWR Nerede Kullanılır (Ve Nerede Kullanılmaz)

SWR çeşitli yerlere yerleştirilebilir, işte SWR'nin çok uygun olacağı birkaç site kategorisi:

• Hızlı bir şekilde güncellenmesi gereken canlı verilere sahip siteler.
  Bu tür sitelere örnek olarak spor skor siteleri ve uçuş takibi verilebilir. Bu siteleri oluştururken, düşük aralık ayarıyla (bir ila beş saniye) aralıklarla yeniden doğrulama seçeneğini kullanmayı tercih edersiniz.
• Güncellemelerin veya gerçek zamanlı olarak güncellenen gönderilerin besleme stiline sahip siteler.
  Bunun klasik örneği, seçimler gibi olayların canlı bloglarına sahip olan haber siteleri olacaktır. Başka bir örnek de yukarıda bahsedilen Scrapbook olabilir. Bu durumda, veri kullanımından tasarruf etmek ve gereksiz API çağrılarını önlemek için büyük olasılıkla aralıkta yeniden doğrulama seçeneğini ancak daha yüksek bir aralık ayarıyla (otuz ila altmış saniye) kullanmak isteyebilirsiniz.
• İnsanların arka planda çokça açık tuttuğu daha pasif veri güncellemelerine sahip siteler.
  Bu sitelere örnek olarak hava durumu sayfaları veya 2020'lerin COVID-19 vaka numarası sayfaları verilebilir. Bu sayfalar eskisi kadar sık ​​güncellenmez ve bu nedenle önceki iki örneğin sürekli olarak yeniden doğrulanmasına ihtiyaç duymaz. Ancak, verilerin güncellenmesi için yine de kullanıcı deneyimini geliştirecektir. Bu durumlarda, sekmenin yeniden odaklandığı ve bir müşterinin internete yeniden bağlandığı tarihi yeniden doğrulamanızı tavsiye ederim, bu, bir kişinin COVID vakalarında yalnızca küçük bir artış olduğunu umarak endişeyle musluğa geri döndüğü anlamına gelir. bu verileri hızlı bir şekilde alın.
• Kullanıcıların etkileşimde bulunabileceği küçük veri parçalarına sahip siteler.
  Youtube Abone Ol Düğmesini düşünün, abone ol'u tıkladığınızda bu sayının değiştiğini görmek ve bir fark yarattığınızı hissetmek istersiniz. Bu durumlarda, yeni sayımı getirmek ve görüntülenen miktarı güncellemek için SWR kullanarak verileri programlı olarak yeniden doğrulayabilirsiniz.

Unutulmaması gereken bir şey, bunların hepsinin ISR ile veya ISR olmadan uygulanabilmesidir.

Elbette SWR kullanmak istemeyeceğiniz veya ISR'siz SWR kullanmak istemeyeceğiniz yerler var. Verileriniz değişmiyorsa veya çok nadiren değişiyorsa SWR pek kullanılmaz ve bunun yerine ağ isteklerinizi tıkayabilir ve mobil kullanıcı verilerini tüketebilir. SWR, kimlik doğrulama gerektiren sayfalarla çalışabilir, ancak bu durumlarda Artımlı Statik Yenileme yerine Sunucu Tarafı İşleme'yi kullanmak isteyeceksiniz.

Next.js ve Artımlı Statik Yenileme ile SWR Kullanma

Şimdi bu stratejinin teorisini araştırdık, şimdi onu nasıl uygulamaya koyduğumuzu keşfedelim. Bunun için hükümet tarafından sağlanan bu API'yi kullanarak Singapur'da (yaşadığım yer!) kaç taksinin müsait olduğunu gösteren bir web sitesi oluşturacağız.

Proje Yapısı

Projemiz üç dosyaya sahip olarak çalışacaktır:

• lib/helpers.js
• pages/index.js (ön uç dosyamız)
• pages/api/index.js (API dosyamız)

Yardımcı dosyamız, verileri harici API'den alacak ve daha sonra kullanımımız için uygun bir biçimde döndürecek bir işlevi ( getTaxiData ) dışa aktaracaktır. API dosyamız bu işlevi içe aktaracak ve varsayılan dışa getTaxiData işlevini çağıracak ve ardından geri döndürecek bir işleyici işlevine ayarlayacaktır, bu, /api api'ye bir GET isteği göndermenin verilerimizi döndüreceği anlamına gelir.

SWR'nin istemci tarafı veri alma yapması için bu yeteneğe ihtiyacımız olacak. Son olarak, ön uç dosyamızda getTaxiData içe aktaracağız ve onu getStaticProps içinde kullanacağız, bu veriler, React sayfamızı oluşturacak olan ön uç dosyamızın varsayılan dışa aktarma işlevine iletilecektir. Tüm bunları kod tekrarını önlemek ve verilerimizde tutarlılığı sağlamak için yapıyoruz. Ne ağız dolusu, hadi şimdi programlamaya başlayalım.

Yardımcılar Dosyası

lib/helpers.js getTaxiData işlevini oluşturarak başlayacağız:

 export async function getTaxiData(){ let data = await fetch("https://api.data.gov.sg/v1/transport/taxi-availability").then(r => r.json()) return {taxis: data.features.properties[0].taxi_count, updatedAt: data.features.properties[0].timestamp} }

API Dosyası

Daha sonra getTaxiData işlevini içe aktarmanın yanı sıra api/index.js işleyici işlevini oluşturacağız:

 import { getTaxiData } from '../../lib/helpers' export default async function handler(req, res){ res.status(200).json(await getTaxiData()) }

Burada bahsedilen proje yapısının yanı sıra SWR veya ISR'ye özgü bir şey yok. Bu şeyler şimdi index.js başlıyor!

Ön Uç Dosyası

Yapmak istediğimiz ilk şey, getStaticProps işlevimizi oluşturmak! Bu işlev, getTaxiData işlevimizi içe aktaracak, kullanacak ve ardından verileri bazı ek yapılandırmalarla döndürecektir.

 export async function getStaticProps(){ const { getTaxiData } = require("../lib/helpers") return { props: (await getTaxiData()), revalidate: 1 } }

Döndürülen nesnemizdeki yeniden doğrulama anahtarına odaklanmak istiyorum. Bu anahtar, Artımlı Statik Yenilenmeyi pratik olarak etkinleştirir. Sunucunuza, statik sayfayı her saniye yeniden oluşturmanın uygun bir seçenek olduğunu söyler, bu seçenek daha sonra bir müşteri sayfanızı ziyaret ettiğinde arka planda tetiklenir. Artımlı Statik Rejenerasyon (ISR) hakkında daha fazla bilgiyi burada bulabilirsiniz.

Şimdi SWR kullanma zamanı! Önce ithal edelim:

 import useSWR from 'swr'

React-rendering fonksiyonumuzda SWR kullanacağız, o halde şu fonksiyonu yaratalım:

 export default function App(props){ }

Sahne malzemelerini getStaticProps . Artık SWR'yi kurmaya hazırız:

 const fetcher = (...args) => fetch(...args).then(res => res.json()) const { data } = useSWR("/api", fetcher, {fallbackData: props, refreshInterval: 30000})

Bunu parçalayalım. İlk olarak alıcıyı tanımlıyoruz. Bu, SWR tarafından bir argüman olarak gereklidir, böylece farklı çerçeveler vb.'nin farklı kurulumlara sahip olabileceği göz önüne alındığında verilerinizi nasıl getireceğini bilir. Bu durumda, SWR belgeleri sayfasında sağlanan işlevi kullanıyorum. Ardından, üç argümanla useSWR kancasını çağırırız: veri alma yolu, getirme işlevi ve ardından bir seçenekler nesnesi.

Bu options nesnesinde iki şey belirledik:

1. Geri dönüş verileri;
2. SWR'nin verileri yeniden doğrulaması gereken aralık.

Geri dönüş veri seçeneği, verilerin baştan görünür olmasını sağlayan getStaticProps alınan verileri sağladığımız yerdir. Son olarak, verileri kancadan çıkarmak için nesne yok etmeyi kullanırız.

Bitirmek için, bu verileri çok temel bir JSX ile işleyeceğiz:

 return <div>As of {data.updatedAt}, there are {data.taxis} taxis available in Singapore!</div>

Ve başardık! Burada, Artımlı Statik Yenileme ile SWR kullanımına ilişkin çok barebone bir örneğimiz var. (Örneğimizin kaynağı burada mevcuttur.)

ISR ile eski verilerle karşılaşırsanız, kimi arayacağınızı bilirsiniz: SWR.

SmashingMag'de Daha Fazla Okuma

• SWR Tepki Kancaları kitaplığı
• SWR'ye Giriş: Uzaktan Veri Alma İçin Tepki Kancaları, Ibrahima Ndaw
• ISR vs DPR: Büyük Sözler, Hızlı Açıklama, Cassidy Williams
• Next.js'de Global ve Yerel Şekillendirme, Alexander Dubovoj
• Next.js'de İstemci Tarafı Yönlendirme, Adebiyi Adedotun Lukman