DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Next.js 9.5 - Stable Incremental Static Regeneration
Tim Cheung
Tim Cheung

Posted on • Updated on

Next.js 9.5 - Stable Incremental Static Regeneration

One of the benefits of State Site Generation is that we can keep our site static generated at build time and put all site files distributed to global edge CDN. The result is a fast, reliable, and safe browsing experience.

However, suppose we need to fetch the dynamic data frequently, and the data source didn't provide any webhook mechanism to rebuild the site. In that case, we need to rebuild the site for every data update manually. It will be tedious tasks to do so.

To enjoy both worlds, static site generation, and dynamic data fetching without manual site rebuild. Next.js has introduced - Incremental Static Generation feature.

All you need to do is add the revalidate inside getStaticProps return

export async function getStaticProps () {
  return {
    props: await getDataFromCMS(),
    // we will attempt to re-generate the page:
    // - when a request comes in
    // - at most once every second
    revalidate: 1
  }
} 

To showcase this great feature, the next.js team has created an example https://reactions-demo.now.sh/

Demo

By updating the reaction in GitHub, the next app will revalidate and rebuild the page in no time!

Thanks for reading! You can follow my twitter or blog for more news.

Top comments (1)

Collapse
 
simsimjae profile image
Sim Jae Cheol • Edited on

Hello, I read well. I have a question. I know that in case of incremental static regeneration, the page is recreated upon request. Does that mean that the person who makes the request for the first time sees the data that has not been updated?

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.