جلب البيانات في وقت الطلب

إذا كنت بحاجة إلى جلب البيانات في وقت الطلب بدلاً من وقت البناء، يمكنك تجربة العرض من جانب الخادم (Server-side Rendering):

لاستخدام العرض من جانب الخادم (Server-side Rendering)، تحتاج إلى تصدير getServerSideProps بدلاً من getStaticProps من صفحتك.

استخدام getServerSideProps

إليك الكود الأولي لـ getServerSideProps. ليس ضروريًا لمثال المدونة الخاص بنا، لذلك لن نقوم بتنفيذه.

export async function getServerSideProps(context) {
  return {
    props: {
      // خصائص لمكونك
    },
  };
}

نظرًا لأن getServerSideProps يتم استدعاؤه في وقت الطلب، فإن معلمته (context) تحتوي على معلمات خاصة بالطلب.

يجب عليك استخدام getServerSideProps فقط إذا كنت بحاجة إلى تقديم صفحة مسبقًا يجب جلب بياناتها في وقت الطلب. سيكون وقت الوصول إلى البايت الأول (TTFB) أبطأ من getStaticProps لأن الخادم يجب أن يحسب النتيجة في كل طلب، ولا يمكن تخزين النتيجة مؤقتًا بواسطة شبكة توصيل المحتوى (CDN) بدون تكوين إضافي.

العرض من جانب العميل (Client-side Rendering)

إذا كنت لا تحتاج إلى تقديم البيانات مسبقًا، يمكنك أيضًا استخدام الإستراتيجية التالية (تسمى العرض من جانب العميل (Client-side Rendering)):

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

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

SWR

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

import useSWR from 'swr';
 
function Profile() {
  const { data, error } = useSWR('/api/user', fetch);
 
  if (error) return <div>فشل التحميل</div>;
  if (!data) return <div>جار التحميل...</div>;
  return <div>مرحبًا {data.name}!</div>;
}

يمكنك الاطلاع على توثيق SWR لمعرفة المزيد.

هذا كل شيء!

في الدرس التالي، سنقوم بإنشاء صفحات لكل مقالة مدونة باستخدام المسارات الديناميكية (dynamic routes).

مرة أخرى، يمكنك الحصول على معلومات متعمقة حول getStaticProps و getServerSideProps في توثيق جلب البيانات.