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.

Next.js, geliştiricilerin hızlı bir şekilde sunucu tarafında oluşturulmuş React uygulamaları oluşturmasına olanak tanıyan sağlam bir çerçevedir. Çeşitli temel özelliklere sahiptir. En önemli özelliklerinden biri, verileri kolayca getirme ve bileşenler için hazır hale getirme yeteneğidir.

Veri alma, geliştiricilerin bir web sitesinde/web uygulamasında verileri almasına ve görüntülemesine olanak tanıyan temel bir özelliktir. Next.js'de veri almanın, her birinin avantajları ve kullanım durumları olan birkaç farklı yolu vardır. Bu makale, Next.js'de veri getirmenin farklı yollarını keşfedecektir.

Veri Almak için useEffect Kancasını Kullanma

bu useEffect kanca bir Yan etkileri gerçekleştirmek için kullanılan tepki kancası, bileşenlerdeki API çağrıları gibi. Next.js'de veri almak için useEffect kancasını kullanabilirsiniz.

instagram viewer

Bu kanca, oturum açan kullanıcıya özel bilgileri gösteren kullanıcı profili sayfaları gibi dinamik verilere ihtiyaç duyan sayfalar için yararlıdır.

useEffect kancasını kullanmak için önce onu tercih ettiğiniz bileşene aktarır, verileri getirir ve onu kullanarak sayfanızı oluşturursunuz.

Örneğin:

içe aktarmak { useEffect, useState } itibaren'tepki';
ihracatvarsayılanişlevEv() {
sabit [veri, setData] = useState("");


 useEffect(() => {
 gidip getirmek(' https://api.example.com/data');
 .Daha sonra( (cevap) => yanıt.json() )
 .Daha sonra( (veri) => setData (veri) )
 }, []); 
geri dönmek (


 {veri.adı}
 </div>
 )
}

Bu kod bloğu, bir API'den veri almak için useEffect kancasını kullanır. If, useEffect kancasına iki parametre iletir: verileri getirmek için bir işlev ve bir bağımlılık dizisi. Başarı üzerine, kullanır setData() getirme isteğinin döndürdüğü verilerle bileşenin durumunu güncellemek için.

useEffect kancasına ilettiğiniz bağımlılık dizisi, efektin bağlı olduğu değeri içermelidir. Bileşen, yalnızca bağımlılık dizisindeki değer değiştiğinde etkiyi yeniden çalıştırır. Bu örnekte olduğu gibi bağımlılık dizisi boşsa, efekt yalnızca ilk işlemede çalışır.

Otomatik Yeniden Doğrulamayı SWR Kullanarak İşleme

bu SWR (stale-while-revalidate) kitaplığı, veri getirmeyi işlemek için bir React kanca kitaplığıdır. Mecbursun SWR kütüphanesini kurun önce, Sonraki uygulamanızda kullanmak için.

SWR kitaplığının temel özelliklerinden biri, veri yeniden doğrulamasını otomatikleştirme yeteneğidir. Bu özellik, veriler sık ​​sık güncellendiğinde ve sürekli olarak güncel olmasına ihtiyaç duyduğunuzda önemlidir. Bu işlevsellik, uygulamanızın her zaman en güncel verilere erişmesini sağlayarak, onu kullanıcılarınız için daha dinamik ve duyarlı hale getirir.

Kullanıcı yeniden bir sayfaya odaklandığında veya sekmeler arasında geçiş yaptığında, SWR kitaplığı bir API'ye yeni bir getirme isteği gönderir. Kullanıcı bir sayfadan ayrıldığında ekranda görüntülenen veriler eskir. Sayfaya döndüklerinde, SWR kitaplığı API'ye yeni bir getirme isteği gönderir ve değişip değişmediğini belirlemek için yeni verileri eski verilerle karşılaştırır.

SWR kitaplığının bu eylemi gerçekleştirmesini durdurmak için, yeniden doğrulamaOnFocus seçenek.

Şöyle:

sabit { veri, hata, isLoading } = useSWR(' https://api.example.com/data', alıcı, {
 yeniden doğrulamaOnFocus: YANLIŞ,
})

revalidateOnFocus özelliğinin false olarak ayarlanması, sayfaya her yeniden odaklandığınızda SWR kitaplığının verilerinizi yeniden doğrulamamasını sağlar.

SWR kitaplığı ayrıca, bir kullanıcı internete her yeniden bağlandığında verileri yeniden doğrular. Bu eylem belirli durumlarda çok yardımcı olabilir ve otomatik olarak çalışır.

Eylemi devre dışı bırakmak için, revalidateOnReconnect seçenek:

sabit { veri, hata, isLoading } = useSWR(' https://api.example.com/data', alıcı, {
 revalidateOnReconnect: YANLIŞ,
})

Verilerinizin otomatik olarak yeniden doğrulanmasını devre dışı bırakmak için hem revalidateOnFocus hem de revalidateOnRecconect özelliklerini false olarak ayarlayın.

Getirme İsteklerini Gerçekleştirmek için Isomorphic-Unfetch Kitaplığını Kullanma

bu izomorfik-getirmeyi kaldır kitaplık, bir Next.js uygulamasında getirme isteklerini gerçekleştirebilen küçük, hafif bir kitaplıktır. Kütüphane, yerli kütüphaneye mükemmel bir alternatiftir. gidip getirmek API. Kullanımı basittir, bu da onu getirme isteklerinde yeni olan geliştiriciler için mükemmel kılar.

Yerel getirme API'sini desteklemeyen eski tarayıcılar için çoklu doldurma olarak isomorphic-unfetch'i kullanabilirsiniz. isomorphic-unfetch kitaplığı minimalisttir ve küçük uygulamalar üzerinde çalışmak için uygundur.

Bir Next.js uygulamasında isomorphic-unfetch kullanmak için aşağıdaki komutu çalıştırarak kitaplığı kurun:

npm isomorphic-unfetch'i kurun

Daha sonra kitaplığı içe aktarabilir ve aşağıdaki gibi verileri almak için bileşeninizde kullanabilirsiniz:

içe aktarmak Gidip getirmek itibaren"izomorfik-getirme"
içe aktarmak {useState, useEffect} itibaren'tepki'
ihracatvarsayılanişlevEv() {
sabit [veri, setData] = useState(hükümsüz)


 useEffect(() => {
 Gidip getirmek(' https://api.example.com/data')
 .Daha sonra( (cevap) => yanıt.json)
 .Daha sonra( (veri) => setData (veri) )
 }, [])

eğer (!veri) geri dönmek<div>Yükleniyor...div>
geri dönmek (


{veri.adı}/h1>
 </div>
 )
}

Isomorphic-unfetch işlevi hem istemci tarafında hem de sunucu tarafında çalışır.

Next.js ile Verimli Veri Alma

Veri alma, uygulama geliştirirken önemli bir özelliktir. Next.js, her birinin kendi avantajları ve takasları olan çeşitli veri alma yolları sunar.

Kullanılacak yönteme karar verirken, takasları göz önünde bulundurun ve rahat olduğunuz bir tekniği kullandığınızdan emin olun.