APIs سے ڈیٹا بازیافت کرنا Next.js: getStaticProps اور getServerSideProps کا استعمال

ایپلیکیشن تیار کرنے کے عمل میں Next.js ، متحرک مواد کی نمائش کے لیے APIs سے ڈیٹا حاصل کرنا ایک اہم پہلو ہے۔ یہ مضمون getStaticProps تعمیراتی عمل کے دوران جامد ڈیٹا لانے کے لیے استعمال کرنے اور getServerSideProps ہر درخواست پر APIs سے ڈیٹا لانے کے لیے استعمال کرنے میں آپ کی رہنمائی کرے گا۔

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 API سے ڈیٹا استفسار کرنے اور ڈیٹا کو پرپس کے طور پر واپس کرنے کے لیے استعمال کرتے ہیں۔

getServerSideProps کا استعمال

getServerSideProps ایک اور طریقہ ہے Next.js جو آپ کو ہر درخواست پر APIs سے ڈیٹا حاصل کرنے کے قابل بناتا ہے۔ یہ یقینی بناتا ہے کہ مواد ہمیشہ اپ ٹو ڈیٹ اور متحرک ہے۔ یہاں استعمال کرنے کی ایک مثال ہے getServerSideProps:

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

getServerSideProps جب بھی صفحہ پر درخواست کی جائے گی تو طریقہ API سے ڈیٹا کا استفسار کرے گا ۔

نتیجہ

Next.js اس سیکشن میں، آپ نے سیکھا ہے کہ اپنی درخواست میں APIs سے ڈیٹا کو موثر طریقے سے کیسے حاصل کیا جائے ۔ استعمال کرکے getStaticProps اور getServerSideProps ، آپ اپنی ایپلیکیشن میں جامد اور متحرک دونوں مواد کو لچکدار طریقے سے ڈسپلے کر سکتے ہیں۔