Hämta data från API:er i Next.js: Använder getStaticProps och getServerSideProps

I processen att utveckla en Next.js applikation är att hämta data från API:er en avgörande aspekt för att visa dynamiskt innehåll. Den här artikeln guidar dig genom att använda getStaticProps för att hämta statisk data under byggprocessen och använda getServerSideProps för att hämta data från API:er på varje begäran.

Använder getStaticProps

getStaticProps är en inbyggd metod Next.js som stöder hämtning av statisk data under byggprocessen. Det låter dig skapa statiska sidor med efterfrågad data, som är förrenderad innan applikationen distribueras. Här är ett grundläggande exempel på hur du använder getStaticProps:

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

I exemplet ovan använder vi fetch för att fråga data från ett API och returnera data som rekvisita.

Använder getServerSideProps

getServerSideProps är en annan metod Next.js som gör att du kan hämta data från API:er på varje begäran. Detta säkerställer att innehållet alltid är uppdaterat och dynamiskt. Här är ett exempel på hur du använder getServerSideProps:

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

Metoden getServerSideProps kommer att fråga data från API:t varje gång en begäran görs till sidan.

Slutsats

I det här avsnittet har du lärt dig hur du effektivt hämtar data från API:er i din Next.js applikation. Genom att använda getStaticProps och getServerSideProps kan du visa både statiskt och dynamiskt innehåll flexibelt i din applikation.