What is getStaticProps and when should you use it?

getStaticProps is a Pages Router function that fetches data at build time, so Next.js can prerender the page to static HTML. The props it returns go to the page component.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  
  return {
    props: {
      posts,
    },
    revalidate: 3600, // ISR: revalidate every hour
  };
}

It runs only on the server, so it can query a database directly. The revalidate field turns on Incremental Static Regeneration, which rebuilds the page in the background, here at most once an hour.

Use it when content changes rarely and is the same for every user, for better performance and SEO. It cannot read the request, so request-time data needs getServerSideProps.