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 कडून डेटाची क्वेरी करेल .

निष्कर्ष

या विभागात, तुम्ही तुमच्या Next.js ऍप्लिकेशनमधील API मधून डेटा कार्यक्षमतेने कसा आणायचा हे शिकले आहे. वापरून getStaticProps आणि getServerSideProps, तुम्ही तुमच्या अॅप्लिकेशनमध्ये स्थिर आणि डायनॅमिक दोन्ही सामग्री लवचिकपणे प्रदर्शित करू शकता.