SWR'nin Temel Kavramları: Eski Veriyi Sunup Yenileme

SWR, RFC 5861'de tanımlanan bir HTTP önbellek stratejisi olan Bayatken-Yeniden-Doğrula'nın kısaltmasıdır. Strateji şöyledir: bayat (önbelleğe alınmış) veriyi kullanıcıya hemen sunun, ardından arka planda yeniden doğrulayın ve güncel veri geldiğinde kullanıcı arayüzünü güncelleyin.

Bu yaklaşım algılanan performansa öncelik verir: kullanıcılar ağ gidiş-dönüşünün tamamlanmasını beklemek yerine verileri anında görür.

Geleneksel yükleme düzenlerinde kullanıcılar her gezinmede bir yükleme göstergesi görür. SWR ile son bilinen veriyi hemen görürler; veri değişmişse kullanıcı arayüzü arka planda sessizce güncellenir.

Bu, uygulamaların belirgin biçimde daha hızlı hissedilmesini sağlar ve yükleme durumlarının neden olduğu zihinsel kesintiyi azaltır.

SWR verileri şu durumlarda otomatik olarak yeniden doğrular: tarayıcı penceresi yeniden odaklandığında (kullanıcı sekmeler arasında geçiş yapıp geri döndüğünde), çevrimdışı kaldıktan sonra ağ bağlantısı yeniden kurulduğunda, açıkça mutate() çağrıldığında veya yapılandırılabilir bir refreshInterval zamanlayıcısı çalıştığında.

Bu otomatik tetikleyiciler, geliştiricinin yeniden getirme mantığını elle yönetmesine gerek kalmadan verilerin güncel kalmasını sağlar.

Bir SWR anahtarı birkaç durumdan birinde olabilir: yükleniyor (önbelleğe alınmış veri yok, ilk getirme işlemi sürüyor), yeniden doğrulanıyor (önbelleğe alınmış veri var, arka plan yenilemesi sürüyor), hata (istek başarısız oldu) veya başarılı (güncel veri kullanılabilir).

Bu durumları anlamak, doğru yükleme iskeletleri ve hata kullanıcı arayüzleri oluşturmanıza yardımcı olur.

SWR, istek anahtarına göre (genellikle bir URL dizesi) anahtarlanan global bir bellek içi önbellek tutar. Aynı anahtarı isteyen her bileşen aynı önbelleğe alınmış değeri alır ve aynı yeniden doğrulama döngüsüne katılır.

Bu otomatik tekilleştirme sayesinde 10 bileşenin her biri aynı anahtarla useSWR çağrısı yapabilir ve yalnızca tek bir ağ isteği gönderilir.

SWR, önbellek yönetimi mantığını gerçek veri getirme işleminden ayırır. Bir veri getirme işlevi sağlarsınız: anahtarı kabul eden ve verileri döndüren bir asenkron işlev.

Veri getirme işlevi değiştirilebilir: fetch, axios, graphql-request veya herhangi bir asenkron veri kaynağını kullanabilirsiniz. Veri getirme işlevinin nasıl çalıştığından bağımsız olarak SWR, önbelleğe alma ve yeniden doğrulama işlemlerini yönetir.

Uygulamanızı, veri getirme işlevini içeren bir value özelliğine sahip SWRConfig ile sarın: value={{ fetcher: (url) => fetch(url).then(r => r.json()) }}. Veri getirme işlevi bağımsız değişkenini belirtmeyen her useSWR çağrısı bu global varsayılanı kullanır.

Bu yöntem, API yapılandırmasını (temel URL, kimlik doğrulama üstbilgileri) her kanca çağrısında tekrarlamak yerine tek bir yerde merkezileştirir.

Klasik düzende yükleme, veri ve hata durumlarını elle yönetmek için useEffect + useState kullanılır. SWR bunların tümünü, önbelleğe alma, tekilleştirme, arka plan yenilemesi ve hata durumunda yeniden denemeyi otomatik olarak yöneten tek bir kanca çağrısıyla değiştirir.

Kod miktarındaki azalma önemlidir: tipik bir veri getirme bileşeni 20'den fazla satırdan 3 satıra iner.

Anahtar, bir isteği benzersiz olarak tanımlar. Basit durumlarda URL dizesini kullanın. Parametreli istekler için dizi anahtarı kullanın: [url, params]; burada params, değişmez bir nesne veya dizedir. Null isteği devre dışı bırakır.

İyi bir anahtar tasarımı, ilişkili isteklerin önbellek girdilerini paylaşmasını ve ilgisiz isteklerin çakışmamasını sağlar.

SWR, yeniden doğrulama konusunda akıllıdır: varsayılan değeri 2 saniye olan dedupingInterval, çok sayıda bileşen aynı anda bağlandığında birden çok yeniden doğrulamanın eşzamanlı olarak başlatılmasını önler. Tekilleştirme aralığı içinde anahtar başına yalnızca bir istek gönderilir.

Bu, çok sayıda bileşenin aynı verileri getirdiği büyük bileşen ağaçlarında yaygın olan ani istek yığılması sorunlarını önler.

SWR, Next.js'in arkasındaki şirket olan Vercel tarafından geliştirilmiştir ve entegrasyon sorunsuzdur. getServerSideProps veya getStaticProps verileri önceden getirebilir; SWR de istemcide bu önceden getirilen değerle veriyi hazırlar.

Bu sayede, bağlanma sırasında otomatik istemci tarafı yeniden doğrulamasıyla sunucu tarafından oluşturulmuş başlangıç HTML'si elde edilir; SSR ile SWR'nin en iyi yönleri bir araya gelir.

Aşağıdakilerden hangisi SWR yeniden doğrulamasını varsayılan olarak NOT tetikler?

SWR, Bayatken-Yeniden-Doğrula stratejisini uygular: önbelleğe alınmış veriyi hemen sunar, arka planda yeniden doğrular ve güncel veri geldiğinde kullanıcı arayüzünü günceller. Odaklanma, yeniden bağlanma, mutate ve periyodik sorgulama durumlarında yeniden doğrulamayı tetikler. Global önbellek, bileşenler arasındaki istekleri tekilleştirir ve veri getirme işlevi tamamen değiştirilebilir.

Bu model, daha hızlı algılanan performans sunarken veri getirme kodunu büyük ölçüde basitleştirir.