Next.js/data fetching

إحضار البيانات في Next.js

تتيح عملية إحضار البيانات في تصيير المحتوى بطرق عدة وفقًا للحالة التي تستخدم فيها التطبيق، بما في ذلك التصيير المسبق من جانب الخادم Server-side Rendering أو التوليد الساكن للشيفرة Static Generation أو تحديث المحتوى أو إنشائه أثناء تشغيل التطبيق من خلال التوليد الساكن التراكمي Incremental Static Regeneration.

التصيير من جانب الخادم في Next.js باستخدام الدالة getServerSideProps

عندما تُصدِّر دالة تُدعى getServerSideProps (التصيير من جانب الخادم SSR) من صفحتك، تُصدَّر الصفحة مسبقًا عند كل طلب باستخدام البيانات التي تعيدها الدالة getServerSideProps:

export async function getServerSideProps(context) {
  return {
    props: {}, // تمرر إلى مكوّن الصفحة على شكل خصائص
  }
}

تنفيذ الدالة getServerSideProps في Next.js

تُنفَّذ هذه الدالة من جانب الخادم ولا يمكن تنفيذها من قبل المتصفح، وما يحدث عندما تستخدمها الصفحة أنه:

• ستُنفَّذ الدالة getServerSideProps عند الطلب، وذلك عندما تطلب الصفحة مباشرة، وستصيّر مسبقًا مع الخاصيات التي تعيدها الدالة.
• سترسل Next.js طلبًا من خلال واجهة برمحية API إلى الخادم لكي ينفِّذ الدالة getServerSideProps، وذلك عندما تطلب الصفحة من جانب العميل من خلال next/link أو next/router.

تعيد الدالة getServerSideProps النتيجة على شكل بيانات JSON تُستخدم في تصيير الصفحة، وستنجز Next.js كل هذه الأعمال تلقائيًا دون أي تفعل أي شيء إضافي عندما تُعرّف هذه الدالة.

يمكنك استخدام الأداة next-code-elimination tool للتحقق من شيفرة Next.js التي تُحذف عندما تُجمّع للعمل من ناحية العميل.

تُصدَّر الدالة getServerSideProps من الصفحات فقط، ولا يمكن تصديرها من ملفات لا تُعدُّ صفحاتٍ. و ينبغي الانتباه إلى تصديرها كدالة قائمة بحد ذاتها standalone، فلن تعمل إن أضفتها كخاصية من خواص مكوّن الصفحة.

يمكنك معرفة جميع المعاملات والخاصيات التي تُستخدم مع getServerSideProps، بالاطلاع على مرجع الواجهة البرمجية API reference.

حالات استخدام الدالة getServerSideProps في Next.js

استخدم هذه الدالة إن أردت أن تصيّر صفحة من المفترض إحضار بياناتها عند طلب هذه الصفحة. وقد يكون السبب هو طبيعة البيانات أو خصائص الطلب (مثل ترويسات الاستيثاق authorization أو الموقع الجغرافي). ستُصيّر الصفحات التي تستخدم getServerSideProps من جانب الخادم أثناء الطلب ولن تُخزَّن مؤقتًا ما لم تُهيَّأ ترويسات التحكم بالتخزين المؤقت.

إن لم تشأ أن تصيير البيانات أثناء الطلب، فقد تفكّر في إحضارها من ناحية العميل أو باستخدام الدالة getStaticProps.

استخدام الدالة getServerSideProps مقابل مسارات الواجهة البرمجية API Route

قد يكون العثور على مسار API مغريًا لإحضار البيانات من الخادم بدلًا من استدعاء هذا المسار من خلال الدالة getServerSideProps. لكن هذا الأسلوب غير ضروري وغير مجدٍ، لانه سينفِّذ طلبًا إضافيًا نظرًا لتنفيذ الدالة getServerSideProps مع المسار معًا على الخادم.

لنفترض مثلًا وجود مسار API يُستخدم في إحضار بيانات من منظومة إدارة المحتوى CMS. يُستدعى هذا المسار عندها من قبل الدالة getServerSideProps مباشرة، وسينتج عن ذلك استدعاء إضافي يخفض الأداء. بدلًا من ذلك أدرج تعليمات المنطق الذي يعتمده مسار API ضمن الدالة مباشرة، وقد يكون هذا المنطق استدعاءً لمنظومة إدارة المحتوى أو قاعدة بيانات أو مسارات API أخرى.

إحضار البيانات من جانب العميل في Next.js

إن احتوت صفحتك على بيانات تُحدَّث باستمرار ولا حاجة لتصييرها مسبقًا، بإمكانك عندها إحضار البيانات من جانب العميل وكمثال على سيناريوهات كهذه إحضار بيانات خاصة بالعميل:

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

تعمل هذه المقاربة جيدًا مع الصفحات التي تمثل لوحة تحكم أو إعدادات لانها صفحات خاصة بالمستخدم لا حاجة لتطبيق قواعد تحسين محركات البحث عليها، ولا حاجة لتصييرها مسبقًا. تُحدَّث هذه البيانات باستمرار ويتطلب ذلك إحضار هذه البيانات عند الطلب فقط.

استخدام الدالة getServerSideProps لإحضار البيانات عند الطلب في Next.js

يعرض المثال التالي كيفية إحضار البيانات عند الطلب ثم تصيير البيانات مسبقًا قبل عرضها:

function Page({ data }) {
  // تصيير البيانات
}

// تُستدعى هذه الشيفرة عند كل طلب
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // تمرير البيانات إلى الصفحة عن طريق الخصائص
  return { props: { data } }
}

export default Page

التخزين المؤقت أثناء التصيير من جانب الخادم (SSR)

بإمكانك استخدام ترويسات التخزين المؤقت (Cache-Control) ضمن الدالة getServerSideProps لتخزين الاستجابات الديناميكية مؤقتًا. استخدم القيمة stale-while-revalidate مثلًا:

// (s-maxage=10)تُعد هذه القيمة جديدة مدة عشر ثوان.
// إن أعيد الطلب ضمن هذه الثواني العشرة ستبقى هذه القيمة حديثة
// بينما إن أعيد الطلب قبل 59 ثانية ستُصيّر القيمة على الرغم من كونها قديمة
//(stale-while-revalidate=59).
//سيجري طلب خلف الستار لتحديث  هذه القيمة في الذاكرة المؤقتة 
//سترى هذه القيمة الجديدة إن حدّثت الصفحة 
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

تصيير الأخطاء عند استخدام الدالة getServerSideProps في Next.js

إن ظهر خطأ داخل الدالة getServerSideProps فستعرض الملف pages/500.js. راجع توثيق الصفحة 500 لتتعلم طريقة إنشائها. لن يُستخدم هذا الملف في مرحلة التطوير وستُعرض صفحة الخاصة بهذه المرحلة بدلًا منه.

التوليد الساكن للمسارات باستخدام الدالة getStaticProps

عندما تمتلك الصفحة مسارات ديناميكية وتستخدم في الوقت نفسه الدالة getStaticProps، لا بد حينها من تعريف قائمة بالمسارات التي ينبغي توليدها بشكل ساكن. مع تصدير الدالة التي تُدعى getStaticPaths من

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true // false or 'blocking'
  };
}

ينبغي استخدام الدالة getStaticPaths مع الدالة getStaticProps، ولا يمكنك استخدامها مع getServerSideProps.

يمكنك معرفة جميع المعاملات والخاصيات التي تُستخدم مع getStaticPaths، بالاطلاع على مرجع الواجهة البرمجية API reference.