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

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

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

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

1. استخدام خطاف React useEffect() داخل صفحاتك بدلاً من طرق التصيير من جانب الخادم (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) => {
      // handle the error as needed
      console.error('An error occurred while fetching the data: ', e)
    })
  }, [])

  return <p>{data ? `Your data: ${data}` : 'Loading...'}</p>
}

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

على الرغم من أن جلب البيانات في 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>Failed to load.</p>
  if (isLoading) return <p>Loading...</p>

  return <p>Your Data: {data}</p>
}

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

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