ISR in NextJS

So what exactly is ISR ?

ISR stands for Incremental Static Regeneration. It's a technique that allows you to update static content after the initial build, without requiring a full site rebuild. Instead of regenerating a page on every request (like SSR) or only at build time (like pure SSG), ISR allows for re-validation and regeneration of specific pages in the background or on a timed interval. When a user requests an outdated page, the cached version is served immediately, while a new version is generated in the background. Subsequent requests will then receive the freshly updated page. This ensures users see content quickly while keeping it relatively fresh, bridging the gap between SSG and SSR.

So now as you understand ISR , is it same as lazy loading ?

No , ISR re-validates data , it does-not create data on demand . There is a slight difference but crucial difference.

Is ISR same as dynamic components ?

No , dynamic components are fundamentally different. Although data serving through may look same to the user , but primary goal of ISR is data freshness. To keep the data as fresh as possible , so that the user is not seeing some age old data , meanwhile things have changed in db .

But dynamic components , help us to create components , that help us to reduce initial loads of javascript. Whenever we have lots of javascript to be loaded , we want it to be loaded only on demand , with custom error boundaries and all , then we use dynamic components. Dynamic components are usually used for heavy code , that should not stop the initial page from at-least loading. For eg. , a rich text-editor , now an editor may not be always used in the app , so there's definitely no need to load it initially , when it is required , it will be dynamically called.

If you have read so far , thanks , I would love points on how i can improve , so leave down a comment , and I will make sure to follow it in the next one.

Reference : https://nextjs.org/docs/app/guides/incremental-static-regeneration