close

దీనిలో 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, మీరు మీ అప్లికేషన్‌లో స్థిరమైన మరియు డైనమిక్ కంటెంట్‌ను సరళంగా ప్రదర్శించవచ్చు.