user
children
Incremental Site Generation: Combining Static and Dynamic
Hamza Miloud Amar
June 24, 2024
6 min read
In our last post, we covered Server-Side Rendering. Today, we'll delve into Incremental Site Generation (ISG), a technique that builds upon Static Site Generation by allowing pages to be generated or updated incrementally after the initial build. ISG ensures that your site remains fast and up-to-date without needing a full rebuild for every change.
Web Development Group
Me , Server , Browser, CDN, Narrator
narrator
Imagine a traditional Moroccan wedding feast where up to four different courses are served. If all the courses were prepared at once, it would create a lot of stress for the chefs and could delay the feast.
narrator
Instead, the chefs prepare the first course in advance so it's ready to serve as soon as the guests arrive. While the guests enjoy the first course, the chefs start preparing the next course and so on. This way, each dish is ready just in time, keeping the process smooth and efficient.
narrator
Incremental Static Regeneration (ISR) – is where some content is pre-rendered. As users interact with the site, new or updated content is generated on demand, keeping the experience fresh and current without overloading the system.
narrator
ISR uses two techniques that differ from SSG: the fallback technique and interval caching.
user
children
narrator
Of course! The fallback technique is used to generate pages on demand that don't already exist.
narrator
Imagine a large UI library documentation site with thousands of pages stored in a database or CMS. Instead of pre-rendering all the pages at once, which can take a long time, we pre-render only the most visited pages.
narrator
For less visited pages, we generate them when they are first requested, similar to Server-Side Rendering (SSR). But unlike SSR, once a page is generated, it is saved as static HTML. So the next time someone visits, the server can quickly serve the pre-rendered static page.
user
children
narrator
The interval caching technique is used to keep page content updated.
narrator
ISR offers a smart way to keep your site's content up to date. We use a mechanism called stale-while-revalidate, which balances speed and freshness. Each page has a set cache lifespan. When a user requests a page, we first check if the cached version is still valid. If it is, it's immediately served for optimal speed.
narrator
When the cache lifespan expires, the cached version is still served, but a background process begins to regenerate the page. The next time a user requests the page, they seamlessly receive the updated version. This strategy ensures a fast user experience while keeping the displayed information fresh .
user
children
browser
children
server
when the user ask for a page, Because we are in ISR we have Two option either we return cached version or generate new page
server
Check if the page is pre-rendered: If the page is pre-rendered and has a cache timer and it hasn't expired, I send you the cached version right away for speed.
server
Cache timer expired: If the cache timer has expired, I'll still send you the old cached version, but I'll start generating a fresh version of the page in the background. The next time someone visits the page, they'll get the updated content.
server
Page doesn't exist: If the page doesn't exist, I'll generate it on demand, transform it into HTML, and send it to you.
browser
children
browser
children
user
children
server
children
user
children
server
Performance: Pre-rendered pages load very quickly, providing a better user experience.
server
SEO: Static pages are easily indexed by search engines, improving SEO.
server
Scalability: Only the most visited pages are pre-rendered, reducing the build time and server load.
server
Content Freshness: Pages can be updated without a full site rebuild, ensuring content is always up-to-date.
server
Flexibility: Combines the best aspects of static and dynamic rendering, allowing for on-demand generation and updates.
user
children
server
Complexity: Implementing ISR requires careful planning for cache invalidation and content updates.
server
Consistency: Ensuring data consistency across static and dynamic content can be challenging.
server
Build Process: Determining the optimal re-generation triggers and intervals can be tricky and might need adjustments over time.
server
Resource Management: Properly managing server resources to handle both static and dynamic content generation is crucial.
user
children
server
children
me
children
Thank you for joining us in exploring Incremental Site Generation. In our next post, we'll discuss Progressive Hydration, a technique that optimizes the hydration process for improved performance and user experience. Goodbye for now, and see you in our next discussion on Progressive Hydration!
Your support helps me create more helpful content. If you enjoyed this, please consider buying me a coffee.
