إحضار البيانات من واجهات برمجة التطبيقات في Next.js: استخدام getStaticProps و getServerSideProps

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

باستخدام getStaticProps

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

export async function getStaticProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  

في المثال أعلاه ، نستخدم fetch للاستعلام عن البيانات من واجهة برمجة التطبيقات وإرجاع البيانات كدعامات.

باستخدام getServerSideProps

getServerSideProps هي طريقة أخرى Next.js تمكنك من جلب البيانات من واجهات برمجة التطبيقات عند كل طلب. هذا يضمن أن المحتوى محدث دائمًا وديناميكيًا. فيما يلي مثال على استخدام getServerSideProps:

export async function getServerSideProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  

getServerSideProps ستستعلم الطريقة عن البيانات من واجهة برمجة التطبيقات في كل مرة يتم فيها تقديم طلب إلى الصفحة .

خاتمة

في هذا القسم ، تعلمت كيفية جلب البيانات بكفاءة من واجهات برمجة التطبيقات في تطبيقك Next.js. باستخدام getStaticProps و getServerSideProps ، يمكنك عرض كل من المحتوى الثابت والديناميكي بمرونة في تطبيقك.