Static Site Generation

Explanation

Static Site Generation at build time will build each of the individual pages for your websites.

getStaticProps() Explanation

This functions runs at build time!

getStaticProps() is primarily used in Next.js to fetch data at build time, making it ideal for static content that does not change often. For example:

  • Documentation Sites: Technical documentation where the content updates infrequently.
  • Marketing Pages: Landing pages or informational pages where the content is mostly static.
  • Blog Posts: Blog posts whose content does not change often

Main Purpose

getStaticProps fetch data at build time that does not change often (not dynamic)

getStaticPaths() Explanation

This functions runs at build time as well

getStaticPaths is used in conjunction with getStaticProps to generate static pages for dynamic routes at build time. use getStaticPaths when you have a dynamic route, like [id].ts in the pages directory, and you want to pre-render these routes based on some data. For example:

  • Blog Posts: Blog posts whose content does not change often

Main Purpose

getStaticPaths is used to prerender dynamic websites at build time

Testing with API data

Here we generated a list of blogs posts at build time! First we get the list of all blogs by using getStaticProps

NOTE: Since data is already loaded, there is no flickering. Compare this to the client-side-fetching route.

List of Blogs