Statically Generated Page with Data

When should I statically generate a page with data?

If you have a page that is going to use or display data from an API, but it does not necessarily have to look for updated data every time the page loads, then you can statically generate a page with data.

Let me give you an example using our Giphy Search App. I want to show users some giphys related to cats when someone lands on your home page. Any cat giphys will be fine to show. I am not really concerned if the Giphy API gets more cat giphys in the future and I am showing old ones. This is a good use case for generating a page statically with data.

When you run a build on your application, the page is generated with data at that time. The page is then served to users from a CDN.

How to implement

Let’s build out the functionality discussed conceptually above.

The most important part when creating these types of pages is the function getStaticProps(). Props refer to properties. These properties are what a page needs in order to render its HTML.

getStaticProps()

Below you will see the implementation of getStaticProps(). You will use an async function because inside the getStaticProps() function you will use the reserved keyword await. When data comes from an API it can take some time. It may be only a few milliseconds, but you need to wait for that data to return before next can use it to process the page and generate the HTML.