تفاصيل getStaticProps

إليك بعض المعلومات الأساسية التي يجب أن تعرفها حول getStaticProps.

جلب بيانات من API خارجي أو استعلام قاعدة بيانات

في ملف lib/posts.js، قمنا بتنفيذ الدالة getSortedPostsData التي تجلب البيانات من نظام الملفات. لكن يمكنك جلب البيانات من مصادر أخرى، مثل نقطة نهاية (endpoint) API خارجية، وستعمل بشكل جيد:

export async function getSortedPostsData() {
  // بدلاً من نظام الملفات،
  // جلب بيانات المنشورات من نقطة نهاية API خارجية
  const res = await fetch('..');
  return res.json();
}

ملاحظة: يقوم Next.js بتوفير دالة fetch() على كل من العميل والخادم. لا تحتاج إلى استيرادها.

يمكنك أيضًا استعلام قاعدة البيانات مباشرة:

import someDatabaseSDK from 'someDatabaseSDK'
 
const databaseClient = someDatabaseSDK.createClient(...)
 
export async function getSortedPostsData() {
  // بدلاً من نظام الملفات،
  // جلب بيانات المنشورات من قاعدة بيانات
  return databaseClient.query('SELECT posts...')
}

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

وضع التطوير مقابل وضع الإنتاج

• في وضع التطوير (npm run dev أو yarn dev)، تعمل getStaticProps في كل طلب.
• في وضع الإنتاج، تعمل getStaticProps في وقت البناء. ومع ذلك، يمكن تحسين هذا السلوك باستخدام مفتاح fallback الذي تُرجعه getStaticPaths.

لأنها مصممة للعمل في وقت البناء، لن تتمكن من استخدام البيانات المتاحة فقط أثناء وقت الطلب، مثل معلمات الاستعلام (query parameters) أو رؤوس HTTP.

مسموح فقط في الصفحات

يمكن تصدير getStaticProps فقط من صفحة. لا يمكن تصديرها من ملفات غير الصفحات.

أحد أسباب هذا القيد هو أن React يحتاج إلى الحصول على جميع البيانات المطلوبة قبل عرض الصفحة.

ماذا لو احتجت إلى جلب البيانات في وقت الطلب؟

بما أن التوليد الثابت (Static Generation) يحدث مرة واحدة في وقت البناء، فهو غير مناسب للبيانات التي يتم تحديثها بشكل متكرر أو تتغير مع كل طلب مستخدم.

في مثل هذه الحالات، حيث من المحتمل أن تتغير بياناتك، يمكنك استخدام عرض من جانب الخادم (Server-side Rendering). دعونا نتعلم المزيد عن عرض جانب الخادم في القسم التالي.