التصيير من جانب العميل (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 لعرض مؤشر تحميل أثناء تصيير الصفحة.