આમાં 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, તમે તમારી એપ્લિકેશનમાં સ્થિર અને ગતિશીલ સામગ્રી બંનેને લવચીક રીતે પ્રદર્શિત કરી શકો છો.