Henter data fra API'er i Next.js: Brug af getStaticProps og getServerSideProps

I processen med at udvikle en Next.js applikation er hentning af data fra API'er et afgørende aspekt for at vise dynamisk indhold. Denne artikel vil guide dig gennem at bruge getStaticProps til at hente statiske data under byggeprocessen og bruge getServerSideProps til at hente data fra API'er på hver anmodning.

Brug af getStaticProps

getStaticProps er en indbygget metode, Next.js der understøtter hentning af statiske data under byggeprocessen. Det giver dig mulighed for at oprette statiske sider med forespurgte data, som er præ-renderet, før applikationen implementeres. Her er et grundlæggende eksempel på brug getStaticProps:

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

I ovenstående eksempel bruger vi fetch til at forespørge data fra en API og returnere dataene som rekvisitter.

Brug af getServerSideProps

getServerSideProps er en anden metode, Next.js der gør det muligt for dig at hente data fra API'er på hver anmodning. Dette sikrer, at indholdet altid er up-to-date og dynamisk. Her er et eksempel på brug getServerSideProps:

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

Metoden getServerSideProps vil forespørge data fra API'en, hver gang der sendes en anmodning til siden.

Konklusion

I dette afsnit har du lært, hvordan du effektivt henter data fra API'er i din Next.js applikation. Ved at bruge getStaticProps og getServerSideProps kan du vise både statisk og dynamisk indhold fleksibelt i din applikation.