اذهب إلى المحتوى
  • 0

ما الفرق بين getServerSideProps و getStaticProps في nextjs

عبد النور محمد

السؤال

get static props تجلب البيانات و get server side props أيضا تجلب اليانات واستخدامهما تقريبا متماثل 

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

ولكن ما الفرق بينهما وكيف لي معرفة أي واحدة أستخدم وفي أي وقت ؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

نعم يعتبر استخدامهما متماثل ولكن هناك اختلاف في الحالات اليت يجب استخدام أياً من هما حيث تعتبر في كثير من الحالات التي ستستخدم فيها ال getStaticProps مثل

  • البيانات المطلوبة لجعل الصفحة متاحة في وقت البناء جاهزة

  • في حالة أنك تقوم بجلب البيانات من  headless CMS.

  • في حالة أنك تهتم كثيراً بال SEO

والحالة التي يمكنك استخدام getServerSideProps  فيها هي

  •  في حالة أنه يتم جلب البيانات عند كل request من المستخدم لبناء الصفحة  
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

عمل الدالتين

دالة getStaticProps تستخدم لجلب البيانات في وقت البناء

ودالة getServerSideProps تستخدم لجلب البيانات عند كل طلب

متى ولماذا يجب عليك إستعمال أحد الدالتين

تستخدم دالة getServerSideProps عندما تريد تجهيز التطبيق عند كل طلب بالبيانات الذي تم جلبها ، و يتم إستدعائها في كل مرة تريد تحميل الصفحة ولكن سيتم تنفيذ الكود في السيرفر فقط وهذا يكون أكثر سرعة وحماية

اما دالة getStaticProps فتستخدمها عندما يمكن جلب البيانات مرة واحدة عند وقت البناء ويمكن إستخدامها عند كل طلب بدون تحديث هذه البيانات

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...