Statically Generated Page with Data
Explore how to create statically generated pages in Next.js that fetch and render data from APIs. Understand the use of getStaticProps and async functions to deliver fast, pre-rendered content. Learn how to access and display API data, apply React hooks for verification, and enhance page styling for your giphy search app. Gain practical skills for building optimized React applications using static generation.
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 ...