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

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

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

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

جلب البيانات من جانب العميل باستخدام 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>
  )
}