Next.js
/Advanced
Incremental Static Regeneration (ISR)
Definition
A hybrid rendering strategy that creates static pages at build time (like SSG), but allows them to be updated in the background periodically without needing to rebuild the entire site.
Explain Like I'm New
The magic bullet of Next.js. You serve ultra-fast static HTML pages to users. But, you tell Next.js: 'If this page is older than 60 seconds, secretly rebuild a fresh version in the background'. The next user gets the fresh page.
Real World Example
An e-commerce product page. You want the ultra-fast load times of SSG, but if the price changes in the database, you don't want to redeploy the whole site. ISR updates the price automatically in the background.
Common Use Cases
- •E-commerce products
- •News articles
- •Large-scale content sites
Interactive Example
/* Incremental Static Regeneration in the App Router */ // Option 1: Revalidate a specific fetch request every 60 seconds export default async function ProductPage() { const res = await fetch('https://api.store.com/product/1', { next: { revalidate: 60 } // The magic ISR property! }); const product = await res.json(); // ... } // Option 2: Route Segment Config (Revalidate the entire page) export const revalidate = 60; // Revalidate this page every 60 seconds export default async function Page() { // All fetches in this component will use the 60s rule // ... }
Interview Questions
basic
- Does ISR require the entire application to be rebuilt and redeployed to show new data?
intermediate
- If a page has an ISR revalidation time of 60 seconds, and a user visits it at 61 seconds, do they see the old data or the new data?