किसी एप्लिकेशन को विकसित करने की प्रक्रिया में 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, आप अपने एप्लिकेशन में स्थिर और गतिशील दोनों सामग्री को लचीले ढंग से प्रदर्शित कर सकते हैं।