What is Incremental Static Regeneration?
TL;DR
ISR strategy in Frontend Accelerator enabling static pages to update incrementally without full rebuilds.
Incremental Static Regeneration (ISR) in Frontend Accelerator combines the benefits of static generation with the flexibility of dynamic content. Pages are generated statically at build time, then regenerated in the background at specified intervals when requested, ensuring fresh content without sacrificing performance.
How ISR Works:
Enable ISR by adding revalidate to your page:
export const revalidate = 3600; // Revalidate every hour
export default async function ProductPage({ params }) {
const product = await db.getProduct(params.id);
return <ProductDetails product={product} />;
}
Key Features:
- Stale-While-Revalidate: Serve cached version while regenerating in background
- On-demand revalidation: Trigger regeneration via API when content changes
- Automatic caching: Built-in CDN caching at the edge
- Scalability: Handle millions of pages without build time explosion
- Fresh content: Ensure users see updated content within revalidation window
On-Demand Revalidation:
import { revalidatePath } from 'next/cache';
export async function POST(request) {
revalidatePath('/products/[id]');
return Response.json({ revalidated: true });
}
AI-Friendly: The revalidation strategy is explicit through the revalidate export. AI tools can immediately understand caching behavior, suggest appropriate revalidation intervals based on content freshness requirements, and implement on-demand revalidation when data mutations occur.