جلب البيانات من جانب العميل

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

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

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

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

يوضح المثال التالي كيف يمكنك جلب البيانات من جانب العميل باستخدام خطاف (Hook) 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 بإنشاء مكتبة خطاف (Hook) لجلب البيانات تسمى 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>
  )
}