NextJS Incremental Static Generation and Regeneration Explained

Incremental Static Regeneration brings the best of Static Site Generation (SSG) and Server Side Rendering (SSR) to NextJS. The feature allows you to update static content after you have already built your site, meaning your users get a blazing fast experience and the latest data. In this video, you'll learn how to enable and work with incremental static regeneration.

[@DjSeymur]

No one: Ado every second: Latest and greatest Great video, btw. Thank you !

[@ado]

Lmao. Every video I get hung up on a specific phrase and keep repeating it. Thanks!

[@sahaneakanayaka3394]

The explanation was brilliant. Definitely the best tutorial which I have found that demonstrates ISR more efficiently. ❤🙏

[@raiyanrazi1144]

Incremental static regeneration work as: (Let's suppose regeneration:1) the data will get validated "at most once" in 1 sec. What's "at most once" mean? 1. The first request will get the old cached data. And this will notify nextJs that hey you need to revalidate now in 1 sec. 2. The revalidation scheme doesn't come in action until unless first request comes in. 3. It's not like data will get revalidated after each sec. It will only get revalidated once the first request comes in. That's why we see old data when we make the first request.

[@cassiosalvador7961]

I was still not sure about this 1 sec example (despite Ado's great explanation overall) until I read this, thank you!

[@lbarcelocarrera]

Thanks for the explanation, came looking for this! Does that means that first request (In your point 3.) will always get the old version? Meaning only the second visitor gets the updated version of the page?

[@user-mz6dc3cl2x]

@@lbarcelocarrera Yes.

[@smakosh]

This is revalidation, you could cover up incremental static generation on a dynamic route with the fallback property, good video none the less

[@mdjakaria1540]

Great Explain Love From Bangladesh

[@elbugdepanchito134]

Thanks! It helped me a lot to understand how it works. Nice video!

[@ado]

Glad to hear it!

[@tichouls5176]

Awesome content ! thank you so much, I will definatly give it a try. Do you know if the new content that is updated is SEO optimized as well as the rest of the static data ?

[@graysmith1935]

Can you see the effects of the regeneration without having to refresh. For example, if someone updated their profile and wanted to see the changes, would they need to refresh the page before being able to see the changes?

[@lalitvavdara5841]

you probably need to use useEffect hook on frontEnd with the profile data as dependency...

[@specifycs]

That's where you want to go with something else like SWR (stale-while-revalidate) for that, though that's for client-side rendering.

[@jonathanbradbury950]

Great video, thanks a lot for sharing your knowledge.

[@suaterklc22]

Thank you, great video!

[@ado]

Glad you liked it!

[@404socialclub7]

how to deploy ISR build folder ? I migrate from ssg to isr, currently, I deploy the out folder with export method.. now when i remove (export method (does not support ISR (getStatichPath fallback :true right ?) firebase can't detect the index folder...

[@cassiosalvador7961]

That was a great explanation, thank you!

[@Automat1kkk]

Grüß dich... schöne Erklärung! Gut gemacht... ☘ Hast du eigentlich schon jenes Miracle Hydrogen Rich Water aus so einem Wasserstoffanreicherer jemals getestet? Dieses Wasser ist wirklich fresh! 😊 Es hilft einem echt produktiv zu bleiben .. ;)

[@chocolatemagnum1174]

Amazing, thank you

[@kumardeepanshu8503]

The problem is that, if I add one more post after build , it will not update on the frontend, and to do that we need getserversideprops, and it took almost 2 to 3 sec to load which is slow .. 🥺

[@electrotsmishar]

wonderful tutorial

[@damo7212]

Thank you so much.I have a next question. Will be site regenerated if you add new post? I mean, will we see the fourth post without rebuild?

[@ado]

Hi Roman. If you have set the revalidate property, then yes it will regenerate the site when you add a fourth post. If you don't want that to happen and you want the 4th post to show up only after your manually rebuild/redeploy the app then you wouldn't set a revalidate property. :)

[@electrichimp]

I'm having trouble getting my head around SSR. When for example you set your revalidation time to 1 second, does that mean that your server will rebuild the site every 1 second (adding server costs), or does it mean it will rebuild after 1 second IF there have been changes that require a rebuild?

[@putuaudipasuatmadi6115]

Revalidate: 1 means it will only regenerate once every first request on that particular interval. For example, Revalidate: 30; It can only regenerate ONCE for each 30 seconds. If someone send a first request in that interval, it will regenerates. If someone again send another request in that interval, it will not regenerate as it haven't passed 30 seconds. It will again regenerate if someone send a request after that interval. If no one sends a request at all, nothing will regenerate.

[@electrichimp]

@@putuaudipasuatmadi6115 thank you, much appreciated!!

[@putuaudipasuatmadi6115]

@@electrichimp I hope it helps :D

[@Getentertainedp]

Thanks for such a valuable content. But when should I go for getStaticProps instead of getServerSideProps ? can you please explain with real world example?

[@faiyazrafeek2628]

Kudos to you

[@arslanhasanov8223]

Pretty clear

[@aumgnfeig9367]

Can you do a video on using redux persist with nextjs? With a store for frontend and backend.

[@rayluxembourg129]

Something is very weird to me. How can you access the database without a backend? is this like a frontend API based mongo library?

[@hamed4451]

what is it for?when a user refresh a page and he cant see new data ? He will left the pqge without see the new datas?is it right? All of user have to reload twice to see the change? Or if one user refresh twice and get new data its enough and others can see new data?🤔

[@ado]

Great question. With incremental SSR, the idea is that the user will see new data consistently, the demo is a little contrived in the video. For most pages on a website, they will not be changing data every second or even every minute. So if you set your SSR to 1 second for example, your users will for the most part always get the latest data. SSR is really great for blog pages for example, that don't change often. It ensures the page loads blazing fast, and that any changes you make the blog are reflected as well to your users. SSR may not be as useful if you absolutely must have up to date data that changes constantly, like say a stocks ticker for example.

[@graysmith1935]

Thanks! How does this work when you have thousands of pages? Is it just constantly hammering your APIs?

[@ado]

Hey Gary. With Incremental Static Regeneration, it runs once at build time and builds all the pages you want it to build. Then it'll regenerate pages as they are visited by your users, so no it would not hammer your API constantly :)

[@iamdeveloper2580]

@@ado so we dont need getServerSideProsps if we have ISR?

[@rajashekhar433]

What if API failure scenario???

[@devvio3826]

Thanks

[@hariskasman]

wow, your eyes is beautifull,

[@ado]

Thanks 😅

[@berlino5563]

Can you creare a real project with this stack and admin dashboard? :)

[@ado]

We started a real project here: github.com/speakdotdev/app it's still very much work in progress but if you follow that repo you'll see changes over time :)

[@berlino5563]

ado 😊

[@serkanakman9945]

Thank you for your great tutorials. Now everything is more clear about SSR in nextJS after your videos

[@ado]

Awesome!! I'm glad it helped

[@justinho4427]

Great work! Look forward to more and more videos, especially nextjs, tailwind and react in general. Cheers.

[@joon-young9589]

thanks

[@muhammadalbab2678]

somone pls help me, i'm having a hard time to wrap my head around this ssg and ssr thing. my question is if ssg can do as the video says, if i want my user get the latest data so i can just always use the ssg thing, is there any drawbacks? or is it better to use ssg? i'm so confused haha

[@rajashekhar433]

Thanks for the video and performance scores are too low for mobile but 60s for desktop

[@parasmanikc7341]

Great Video! Thanks for the clear guidance Ado

[@saalimkhan4133]

Thnx

[@nalbur_]

What an explanation video. Just WOW good job bro. Keep going

[@iamdeveloper2580]

What about dynamic routs ? I mean post/[id] is it good?

[@VincentFulco]

Great detail and explanation. Thanks.

[@HannesKirsman]

Nice video, didn't know next.js can do that. We're working on site where users can log in so probably it would not be perfect for that situation?

[@ado]

Hey Hannes. With Incremental Static Regeneration, you wouldn't be able to get the user login information in the getStaticProps() method since it's all done at build time and doesn't capture cookies or user context, but you could do it in the component itself if you wanted to load some additional protected component data. :)

[@HannesKirsman]

@@ado thank you!

[@73dines]

Odlican tutorijal. Kanal se mora ispratiti. :)

[@ado]

hvala :)