How to use Incremental Static Regeneration in Next.js

In this video, I show you how I added GitHub metrics to the projects page on my website.

My website is statically generated and pre-rendered into static HTML at build-time that is served to the browser. I use webhooks via Contentful to publish new blog posts and trigger a site rebuild. However, for data that I have no control over — when people star or fork my repositories, for example — it would be impossible to know when to rebuild the HTML for the site — and this is where Incremental Static Regeneration comes in!

0:00 Intro
0:14 Setting the scene and describing the goal
0:40 Exploring the GitHub GraphQL API explorer
1:10 Extending the Contentful GraphQL query to retrieve repository name
1:24 Creating a new JavaScript class to query the GitHub GraphQL API
1:32 Generating a personal access token for access to the GitHub API
1:57 Querying the GitHub API for repository stars and forks by repository name
2:27 Adding the new data to the HTML DOM
2:57 Adding Incremental Static Regeneration to validate the data from GitHub
4:22 Incremental Static Regeneration explanation

This is a highlight of a live Twitch broadcast which aired on Wednesday 14th April 2021.

#nextjs #javascript #webdev

[tehsimo]

Started watching your stream today and was loving it, really top notch content!

[hardimos]

More amazing #content! Such a time to be alive!

[GamerSolitO]

Wouldnt it be great to only update a component, instead of an entire page? because I can see how it flicks because of the re-loading. Is this possible? Im new to next.js and react as a whole. Thank you for this great video!