ਵਿੱਚ 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 ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ APIs ਤੋਂ ਡੇਟਾ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਨਾ ਹੈ। getStaticProps ਅਤੇ ਦੀ ਵਰਤੋਂ ਕਰਕੇ getServerSideProps, ਤੁਸੀਂ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਸਥਿਰ ਅਤੇ ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ ਨੂੰ ਲਚਕਦਾਰ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ।