Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

SWR (state-while-revalidate), Vercel tarafından oluşturulan bir veri alma yöntemidir. Önce verileri alarak, yeniden doğrulamak için bir getirme isteği göndererek ve ardından güncellenmiş verileri döndürerek çalışır.

SWR, yalnızca yeniden kullanılabilir veri alımına izin vermekle kalmayıp aynı zamanda yerleşik önbelleğe alma, sayfalandırma ve odakta yeniden doğrulamaya sahip olduğu için çok güçlüdür. SWR kullanan bir web sitesi, arka planda güncel içeriği getirirken önbelleğe alınmış içeriği görüntüler.

SWR Nasıl Çalışır?

Normalde, Axios veya fetch yöntemini kullanarak veri getirme. Bu yöntemler veri kaynağına bağlanır, verileri alır ve döndürür, ardından bağlantıyı kapatır. Ancak SWR, verileri farklı şekilde getirir. Üç adımda çalışır:

  1. Önbellekten eski verileri döndürür.
  2. Verileri yeniden doğrulamak için getirme isteğini gönderir.
  3. Güncel verileri döndürür.
instagram viewer

SWR, getirme API'sinin yerine geçmez. Bunun yerine, kullanıcı ziyaret eder etmez sitenizde önbelleğe alınmış içeriği oluşturmanıza ve eskidiğinde bu içeriği güncellemenize olanak tanır.

Öyleyse SWR, önbelleğin geçersiz olduğunu nasıl anlar? Bir önbellek denetimi üst bilgisi yanıtı aracılığıyla. Yanıtın iki durumu vardır: taze ve bayat. Yeni bir durum, önbelleğin yeniden kullanılabileceği anlamına gelirken eski bir durum, geçersiz olduğu anlamına gelir. Yanıtın geçerli kalacağı süreyi max-age yönergesinde belirtirsiniz.

SWR, maksimum yaştan daha eski önbelleğe alınmış yanıtları geçersiz kabul eder. Uygulamanız eski önbelleğe alınmış verileri oluşturduktan sonra, SWR bu verileri yeniden doğrular ve sayfayı güncellemek için kullanabileceğiniz yeni verileri döndürür.

SWR ile Next.js'de Veri Alma

Önce bir paket yöneticisi aracılığıyla yükleyerek React'te SWR kullanmaya başlayın. Bu komut npm kullanır.

npm düzenlemek swr\n

Bir bileşen dosyasında, swr'den useSWR kancasını içe aktarın.

içe aktarmak kullanımSWR itibaren"swr"\N

useSWR kancası iki argüman kabul eder:

  1. Veriler için benzersiz bir tanımlayıcı. Genellikle API URL'si.
  2. Bir alıcı işlevi. Bu, verileri almak için kullanılan işlevdir. Getirme, Axios veya diğer veri alma araçlarını kullanabilir.

Kanca, verileri ve bir hata nesnesini döndürür. Emin olun bu kancayı en iyi uygulamalara uygun olarak kullanın.

İşte useSWR kancasının nasıl kullanılacağını gösteren bir örnek.

sabit alıcı = (... argo) => getir(...args).sonra(res => res.json());\nconst {veri, hata} = useSWR("/api/veri", alıcı);\n

Verileri aşağıdaki gibi bir bileşende oluşturabilirsiniz:

içe aktarmak kullanımSWR itibaren"swr"\nişlev Ana Sayfa () {\n sabit alıcı = (... argo) => getir(...args).sonra(res => res.json());\n sabit {veri, hata} = useSWR("/api/veri", alıcı);\n eğer (hata) geri dönmek<div>Yükleme başarısızdiv>\N eğer (!veri) geri dönmek<div>Yükleniyor...div>\N geri dönmek<div>{veri}div>\n}\n

Bu, SWR'nin basit bir uygulamasıdır. bu SWR belgeleri daha derinlemesine gidin, bu yüzden daha fazlasını öğrenmek için onlara göz atın.

Neden SWR Kullanmalı?

SWR'nin diğer veri alma yöntemlerine göre birçok avantajı vardır.

Önbelleğe almak

Geleneksel veri alma yöntemlerinde, uygulama veri alırken kullanıcı deneyimini iyileştirmek için bir döndürücü veya yükleme mesajı kullanmanız gerekir.

SWR, yeniden doğrularken eski verileri kullanıcıya görüntülemenizi sağlar. Bu, kullanıcının, alıcının veri döndürmesini beklemesi gerekmediği anlamına gelir.

temdit

Yeniden doğrulama yoluyla, SWR önbelleğe alınan verileri yeniden taze hale getirir ve sayfa güncel verilerle yeniden oluşturulur. Yeniden doğrulama, içeriği düzenli olarak değişen siteler için özellikle önemlidir.

sayfalandırma

bu useSWRInfinite kancası SWR'den sayfalandırmayı kolayca uygulamanıza ve hatta sonsuz bir yükleme kullanıcı arabirimi oluşturmanıza olanak tanır.

SWR, kullanıcının bir sayfaya geri döndüğünde kaydırma konumuna geri dönmesini sağlar. Bu, daha iyi bir kullanıcı deneyimine katkıda bulunur.

Bağımlı Veri Alma

Diğer verilere bağımlı olan verileri getirebilirsiniz. Bir istekten dönen verileri başka bir istekte kullanmanızı sağlar.

Kullanılabilirliği Geliştirmek için SWR Kullanın

SWR, uygulamaların güncel içeriği beklerken önbelleğe alınmış içeriği işlemesine yardımcı olan otomatik yeniden doğrulama özelliğine sahip bir veri alma aracıdır. Kullanıcılar, sunucunun veri döndürmesini beklemek yerine içerikle hemen etkileşime geçebilir.

SWR ayrıca sayfalandırma, sonsuz yükleme, kaydırma konumu kurtarma ve diğer karmaşık özellikler oluşturmanıza yardımcı olur. Düzenli olarak güncellenmesi gereken verileri alıyorsanız, kesinlikle kullanmayı düşünmelisiniz.