Client-side Fetching

Sayfanız SEO indekslemesi gerektirmediğinde, verilerinizi önceden render etmeniz gerekmediğinde veya sayfalarınızın içeriğinin sık sık güncellenmesi gerektiğinde istemci taraflı veri getirme kullanışlıdır. Sunucu tarafı oluşturma API'lerinin aksine, istemci tarafı veri getirmeyi bileşen düzeyinde kullanabilirsiniz.

Sayfa düzeyinde yapılırsa, veriler çalışma zamanında getirilir ve sayfanın içeriği veriler değiştikçe güncellenir. Bileşen düzeyinde kullanıldığında, veriler bileşen montajı sırasında getirilir ve veri değiştikçe bileşenin içeriği güncellenir.

İstemci taraflı veri getirmenin kullanılmasının uygulamanızın performansını ve sayfalarınızın yüklenme hızını etkileyebileceğini unutmamak önemlidir. Bunun nedeni, veri getirme işleminin bileşen veya sayfalar bağlanırken yapılması ve verilerin önbelleğe alınmamasıdır.

Client-side data fetching with useEffect

Aşağıdaki örnek, useEffect kancasını kullanarak istemci tarafında nasıl veri getirebileceğinizi göstermektedir.

import { useState, useEffect } from 'react'
 
function Profile() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(true)
 
  useEffect(() => {
    fetch('/api/profile-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])
 
  if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No profile data</p>
 
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

Client-side data fetching with SWR

Next.js'nin arkasındaki ekip, veri getirme için SWR adında bir React kanca kütüphanesi oluşturdu. İstemci tarafında veri getirme işlemi yapıyorsanız şiddetle tavsiye edilir. Önbelleğe alma, yeniden doğrulama, odak izleme, aralıklarla yeniden alma ve daha fazlasını gerçekleştirir.

Yukarıdaki aynı örneği kullanarak, şimdi profil verilerini almak için SWR'yi kullanabiliriz. SWR, verileri bizim için otomatik olarak önbelleğe alacak ve eski hale gelirse verileri yeniden doğrulayacaktır.

SWR kullanımı hakkında daha fazla bilgi için SWR dokümanlarına göz atın .

import useSWR from 'swr'
 
const fetcher = (...args) => fetch(...args).then((res) => res.json())
 
function Profile() {
  const { data, error } = useSWR('/api/profile-data', fetcher)
 
  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
 
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}