Bör jag använda funktionerna?

• Finns datan du behöver nyttja tillgänglig vid byggtid eller kommer från ett Headless CMS?

• Ni har fokus på hög prestanda och Search Engine Optimization, SEO och sidorna förändras inte så ofta.

• Sidan inte är användarspecifik och kan cache:as.

getStaticProps

• Körs under byggtid enbart på serversidan

• Bra för data och sidor som inte uppdateras ofta

• Exempel på användningsområden: En blogg eller stor katalog av produkter som inte ändras ofta

När vi exporterar getStaticProps från en sida så för-renderas den av Next.js under byggtiden på serversidan. Det är perfekt för sidor som sällan förändras.

Fördelen med den statiska genereringen är när användaren gör en förfrågan mot sidan så får de en redan optimerad sida med den dynamiska datan färdigbyggd.

Ett bra exempel där getStaticProps visar sin styrka är en artikelsida som denna, all data finns redan tillgänglig och vi kan utan problem bygga artiklarna i förväg.

Nedan exempel visar hur man implementerar getStaticProps. Funktionen returnerar datan vi har hämtat som vi sedan kan komma åt som en prop i sidans komponent.

pages/index.js

Javascriptexport default function Home({ data }) {
 return (
   <div className={styles.container}>
     …
   </div>
 );
}
 
export async function getStaticProps() {
 const res = await fetch("<https://api.thecatapi.com/v1/images/search?limit=10>");
 const data = await res.json();
 
 return {
   props: {
     data,
   },
 };
}

getStaticPaths

För att nyttja fördelarna med getStaticProps på en sida med dynamiska sökvägar (t.ex. [[...slug]].js) behöver vi bygga ihop getStaticProps tillsammans med getStaticPaths.

Om vi vill nyttja fördelarna med getStaticProps men på en sida som har dynamiska sökvägar så behöver vi även exportera funktionen getStaticPaths.

• Körs under byggtid

• För-rendera dynamiska sökvägar

• Kan endast exporteras från dynamiska sidor som även använder getStaticProps

• Exempel på användningsområde: En blogg med många inlägg och därav många länkar

Med getStaticPaths genererar vi en lista med våra sökvägar och sedan körs getStaticProps för varje sökväg och bygger en statisk sida.

Nedan exempel visar hur man kan implementera getStaticPaths och hur den returnerar listan under params objekt-nyckeln.

pages/[...cat].js

Javascriptexport async function getStaticPaths() {
 const pathList = [ "2bj", "3r7", "57u", "7gd", "9ua", "afc",
   "MTYwNTU4NQ", "MTYxNTQ5Mg", "wkWtPBQAT", "wYTCqC3gh",
 ];
 return {
   paths: [{ params: { cat: pathList } }],
   fallback: true,
 };
}

Vår getStaticProps på denna sida ser lite annorlunda ut från den på index.js sidan då den har en params prop som vi kan nyttja för att hämta den specifika datan.

Javascriptexport async function getStaticProps({ params }) {
 const slug = params.cat[0];
 const res = await fetch(`https://api.thecatapi.com/v1/images/${slug}`);
 const data = await res.json();
 
 return {
   props: {
     data,
   },
 };
}

getStaticProps och getStaticPaths är bara en liten bit av vad som gör Next.js så bra och varför vi ser den som en självklar del i våran stack!

Gillade du inlägget? Dela gärna vidare och ha en fin dag!