جلب البيانات من جانب العميل (Client-side Fetching)

جلب البيانات من جانب العميل مفيد عندما لا تتطلب صفحتك فهرسة SEO، أو عندما لا تحتاج إلى تقديم بياناتك مسبقًا، أو عندما يحتاج محتوى صفحاتك إلى التحديث بشكل متكرر. على عكس واجهات برمجة تطبيقات عرض جانب الخادم (SSR)، يمكنك استخدام جلب البيانات من جانب العميل على مستوى المكون.

إذا تم ذلك على مستوى الصفحة، يتم جلب البيانات في وقت التشغيل، ويتم تحديث محتوى الصفحة مع تغير البيانات. عند استخدامها على مستوى المكون، يتم جلب البيانات في وقت تحميل المكون، ويتم تحديث محتوى المكون مع تغير البيانات.

من المهم ملاحظة أن استخدام جلب البيانات من جانب العميل يمكن أن يؤثر على أداء تطبيقك وسرعة تحميل صفحاتك. وذلك لأن جلب البيانات يتم في وقت تحميل المكون أو الصفحات، ولا يتم تخزين البيانات مؤقتًا.

جلب البيانات من جانب العميل باستخدام useEffect

يوضح المثال التالي كيف يمكنك جلب البيانات من جانب العميل باستخدام خطاف useEffect.

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>
  )
}

جلب البيانات من جانب العميل باستخدام SWR

قام فريق Next.js بإنشاء مكتبة خطافات React لجلب البيانات تسمى SWR. يوصى بها بشدة إذا كنت تقوم بجلب البيانات من جانب العميل. فهي تعالج التخزين المؤقت، إعادة التحقق، تتبع التركيز، إعادة الجلب على فترات، والمزيد.

باستخدام نفس المثال أعلاه، يمكننا الآن استخدام SWR لجلب بيانات الملف الشخصي. سيقوم SWR تلقائيًا بتخزين البيانات مؤقتًا لنا وسيعيد التحقق من البيانات إذا أصبحت قديمة.

لمزيد من المعلومات حول استخدام SWR، راجع وثائق SWR.

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>
  )
}