العرض من جانب العميل (CSR)

في العرض من جانب العميل (CSR) مع React، يقوم المتصفح بتحميل صفحة HTML أساسية وجافاسكريبت اللازمة للصفحة. ثم يتم استخدام جافاسكريبت لتحديث DOM وعرض الصفحة. عند التحميل الأول للتطبيق، قد يلاحظ المستخدم تأخيرًا بسيطًا قبل رؤية الصفحة كاملة، وذلك لأن الصفحة لا تُعرض بالكامل إلا بعد تنزيل جافاسكريبت وتحليلها وتنفيذها.

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

في Next.js، هناك طريقتان لتنفيذ العرض من جانب العميل:

1. استخدام خطاف useEffect() من React داخل صفحاتك بدلاً من طرق العرض من جانب الخادم (getStaticProps و getServerSideProps).
2. استخدام مكتبة لجلب البيانات مثل SWR أو TanStack Query لجلب البيانات من جانب العميل (مُوصى به).

إليك مثالاً لاستخدام useEffect() داخل صفحة Next.js:

import React, { useState, useEffect } from 'react'

export function Page() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data')
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      const result = await response.json()
      setData(result)
    }

    fetchData().catch((e) => {
      // التعامل مع الخطأ حسب الحاجة
      console.error('حدث خطأ أثناء جلب البيانات: ', e)
    })
  }, [])

  return <p>{data ? `بياناتك: ${data}` : 'جاري التحميل...'}</p>
}

في المثال أعلاه، يبدأ المكون بعرض جاري التحميل.... ثم بمجرد جلب البيانات، يعيد العرض ويظهر البيانات.

على الرغم من أن جلب البيانات باستخدام useEffect هو نمط قد تراه في تطبيقات React القديمة، إلا أننا نوصي باستخدام مكتبة لجلب البيانات لتحسين الأداء، التخزين المؤقت، التحديثات التفاؤلية، والمزيد. إليك مثالاً بسيطاً باستخدام SWR لجلب البيانات من جانب العميل:

import useSWR from 'swr'

export function Page() {
  const { data, error, isLoading } = useSWR(
    'https://api.example.com/data',
    fetcher
  )

  if (error) return <p>فشل التحميل.</p>
  if (isLoading) return <p>جاري التحميل...</p>

  return <p>بياناتك: {data}</p>
}

معلومة مفيدة:

ضع في اعتبارك أن العرض من جانب العميل (CSR) يمكن أن يؤثر على تحسين محركات البحث (SEO). بعض زواحف محركات البحث قد لا تنفذ جافاسكريبت وبالتالي ترى فقط الحالة الأولية الفارغة أو حالة التحميل لتطبيقك. كما يمكن أن يؤدي إلى مشاكل أداء للمستخدمين ذوي اتصالات الإنترنت البطيئة أو الأجهزة الضعيفة، حيث يحتاجون إلى انتظار تحميل وتنفيذ كل جافاسكريبت قبل رؤية الصفحة كاملة. يروج Next.js لنهج هجين يسمح لك باستخدام مزيج من العرض من جانب الخادم، توليد المواقع الثابتة، والعرض من جانب العميل، حسب احتياجات كل صفحة في تطبيقك. في موجه التطبيق (App Router)، يمكنك أيضًا استخدام واجهة تحميل مع Suspense لعرض مؤشر تحميل أثناء عرض الصفحة.