API களில் இருந்து தரவைப் பெறுதல் Next.js: getStaticProps மற்றும் getServerSideProps ஆகியவற்றைப் பயன்படுத்துதல்

ஒரு பயன்பாட்டை உருவாக்கும் செயல்பாட்டில் Next.js, API களில் இருந்து தரவைப் பெறுவது மாறும் உள்ளடக்கத்தைக் காண்பிப்பதற்கான ஒரு முக்கிய அம்சமாகும். getStaticProps உருவாக்கச் செயல்பாட்டின் போது நிலையான தரவைப் பெறுவதற்கும், getServerSideProps ஒவ்வொரு கோரிக்கையிலும் API களில் இருந்து தரவைப் பெறுவதற்கும் இந்தக் கட்டுரை உங்களுக்கு வழிகாட்டும் .

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 ஒவ்வொரு கோரிக்கையிலும் API களில் இருந்து தரவைப் பெற உதவும் மற்றொரு முறை. உள்ளடக்கம் எப்பொழுதும் புதுப்பித்ததாகவும் மாறும் தன்மையுடனும் இருப்பதை இது உறுதி செய்கிறது. பயன்படுத்துவதற்கான ஒரு எடுத்துக்காட்டு இங்கே getServerSideProps:

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

getServerSideProps ஒவ்வொரு முறையும் பக்கத்திற்கு கோரிக்கை வைக்கப்படும்போது முறையானது API இலிருந்து தரவைக் கேட்கும் .

முடிவுரை

இந்தப் பிரிவில், உங்கள் பயன்பாட்டில் உள்ள API களில் இருந்து தரவை எவ்வாறு திறமையாகப் பெறுவது என்பதை நீங்கள் கற்றுக்கொண்டீர்கள் Next.js. getStaticProps மற்றும் பயன்படுத்துவதன் மூலம் getServerSideProps, உங்கள் பயன்பாட்டில் நிலையான மற்றும் மாறும் உள்ளடக்கத்தை நெகிழ்வாகக் காட்டலாம்.