Tietojen hakeminen sovellusliittymistä Next.js: getStaticProps- ja getServerSideProps-käyttö

Sovellusta kehitettäessä Next.js tietojen hakeminen sovellusliittymistä on ratkaiseva tekijä dynaamisen sisällön näyttämisessä. Tämä artikkeli opastaa sinua käyttämään getStaticProps staattisen tiedon hakemiseen rakennusprosessin aikana ja getServerSideProps tietojen hakemiseen API-liittymistä jokaisessa pyynnössä.

Käytä getStaticPropsia

getStaticProps on sisäänrakennettu menetelmä, Next.js joka tukee staattisen tiedon hakemista rakennusprosessin aikana. Sen avulla voit luoda staattisia sivuja kyselyillä tiedoilla, jotka esihahmonnetaan ennen sovelluksen käyttöönottoa. Tässä on perusesimerkki sovelluksen käytöstä getStaticProps:

export async function getStaticProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  

Yllä olevassa esimerkissä käytämme fetch tietojen kyselyä API:lta ja tietojen palauttamista rekvisiittana.

Käytä getServerSidePropsia

getServerSideProps on toinen menetelmä Next.js, jonka avulla voit noutaa tietoja sovellusliittymistä jokaisessa pyynnössä. Tämä varmistaa, että sisältö on aina ajan tasalla ja dynaaminen. Tässä on esimerkki käytöstä getServerSideProps:

export async function getServerSideProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  

Menetelmä getServerSideProps kyselee tietoja API:lta aina, kun sivulle tehdään pyyntö.

Johtopäätös

Tässä osiossa olet oppinut kuinka tehokkaasti noutaa tietoja sovelluksesi sovellusliittymistä Next.js. Käyttämällä getStaticProps ja getServerSideProps, voit näyttää sovelluksessasi joustavasti sekä staattista että dynaamista sisältöä.