ISR: Static Speed for Dynamic Content
Incremental Static Regeneration (ISR) gives users a fast, static page while regenerating it in the background. It's ideal for e-commerce catalogs or blogs that update periodically.
Why it exists
Static sites are fast but can be stale. Server-rendered sites are fresh but slower. Incremental Static Regeneration (ISR) was created to solve this tradeoff, offering the performance of static content without requiring a full site rebuild for every minor data change.
The mental model
Think of ISR like a busy bakery that keeps a few popular cakes on display. When you buy one, you get it instantly. As you leave, the baker starts making a fresh one to replace it. You get your cake immediately, and the next customer gets a freshly baked one, with no one having to wait for it to be made from scratch.
How it works
A user requests a page and is served a fast, cached static version from a CDN. If a pre-configured time interval has passed (or an API call triggers it), the server regenerates the page in the background. The next visitor gets this newly generated, fresh page. This is the 'stale-while-revalidate' caching strategy. Frameworks like Next.js and SvelteKit manage the underlying cache headers and regeneration logic for you.
When to use it
ISR is perfect for content that updates periodically, not instantaneously. Key use cases include: first, large e-commerce catalogs with changing prices or stock; second, media sites where articles are updated in a headless CMS; and third, pages generated from discrete events like a git sync, not a continuous data stream.
When not to use it
Do not use ISR for data that must be real-time. Because users are initially served a stale version while the new one generates, it's a poor fit for live dashboards, stock tickers, or chat applications. These require client-side fetching or server-side rendering on every single request.
One canonical example
A blog uses a headless CMS. At build time, you pre-render the most popular posts. When a visitor requests a less popular post, it's generated on-demand and cached. If an author updates a post, the CMS can send an API call to trigger revalidation. The next visitor gets the old cached page instantly, while the server generates the updated version in the background for all subsequent visitors.
Interview question
Which scenario best describes how Incremental Static Regeneration (ISR) updates content for users?
- a.All content updates require a full site redeployment to become visible.
- b.Content is regenerated on every user request to ensure maximum freshness.
- c.The server continuously streams real-time data to users for instant updates.
- d.Users initially receive a cached page, and a fresh version is built in the background for later visitors.Correct
Why? this is the answer
The core mechanism of ISR is to serve an existing cached page instantly while a newer version is generated in the background. Subsequent visitors then receive this updated content, a strategy known as 'stale-while-revalidate'. Option B describes server-side rendering, which prioritizes freshness over immediate delivery.
Just read this? Test yourself on what you have been reading.
Read the original → vercel.com
- #caching
- #performance
- #frontend
- #next.js
- #sveltekit
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on caching — each one lists the topics its interview covers.
See open roles