How does Incremental Static Regeneration (ISR) update static content in production?

Explanation & Concept

ISR allows updating static pages in the background without rebuilding the entire website. When a request comes in after the `revalidate` period, Next.js serves the cached page while asynchronously triggering a regeneration.

Code Example

typescript

// app/blog/[id]/page.tsx
export const revalidate = 300; // Regenerate at most once every 5 minutes

export default async function BlogPost({ params }: { params: { id: string } }) {
  const post = await fetchPost(params.id);
  return <article>{post.content}</article>;
}

How It Works & Key Takeaways

ISR provides the speed of static sites with the freshness of dynamic sites, handling millions of views without straining origin databases.

Mock Test · 1 Questions · Optional

Ready for Layouts & Templates?

Take a quick test to evaluate yourself, or move straight to the next module.

Intermediate1 questions

Skip

Incremental Static RegenerationIntermediate

1Question 1 of 1

typescript

How does Incremental Static Regeneration (ISR) update static content in production?

Explanation & Concept

Code Example

typescript

// app/blog/[id]/page.tsx
export const revalidate = 300; // Regenerate at most once every 5 minutes

export default async function BlogPost({ params }: { params: { id: string } }) {
  const post = await fetchPost(params.id);
  return <article>{post.content}</article>;
}

How It Works & Key Takeaways

ISR provides the speed of static sites with the freshness of dynamic sites, handling millions of views without straining origin databases.

Mock Test · 1 Questions · Optional

Ready for Layouts & Templates?

Take a quick test to evaluate yourself, or move straight to the next module.

Intermediate1 questions

Skip