Use Next.js Incremental Static Regeneration to pregenerate Notion API pages on-demand
In this video, we learn how to use Next.js' Incremental Static Regeneration to dynamically create new static assets per route.
Incremental Static Regeneration (ISR) is a great compromise between the performance benefits of static sites/pre-rendered pages and serving up fresh content.
Each time a user visits a particular route, they are served a static page. This is the case for anytime you declare a getStaticProps function, however with ISR, Next.js runs the getStaticProps function again in the background and creates a new static page for that route. The next person to visit the route will see the newly generated page. We can specify a timeout period to avoid this happening too frequently.
ISR is a complicated concept, but is super easy to implement in Next.js. Simply return revalidate: 60 from the getStaticProps function, and enjoy the magic!
Jon Meyers: [0:00] Our application has been modified to display each of our movies' titles. These are sorted based on when they were added to the Notion database. If I add a new movie and then refresh our application, when running in development mode, our new movie will be displayed at the top of the list.
[0:15] If we create a production build of our application, by running npm run build and then serve that with npm start, if I add a new movie and refresh our application, we're not going to see that new movie until we rebuild our app.
[0:35] Back over in our getStaticProps function we can opt into something called incremental static regeneration by returning the property revalidate and setting this to a number.
[0:46] If we rebuild and start our application again, when we add a new movie and refresh our application, we're not going to see that new movie, but what this is done in the background is kicked off another static build for just this one page. The next person who visits our page sees the new movie that we've added.
[1:04] Again, if I add another movie to our Notion database and refresh our application, the first person is going to kick off that static build and the next person to visit the website is going to get that new movie.
[1:16] If we had a highly trafficked page, this would not be very performant to rebuild the application every single time someone hits refresh, and that's why we passed the value 60 to revalidate. This means that that process will only happen at most once every 60 seconds.
[1:30] This value can be changed if we want that to happen more frequently or increased, if we don't mind that content being stale for a longer period of time.