Keep Static Pages Fresh on Vercel with Incremental Static Regeneration

Problem: Static Sites That Never Update

Static site generators give you blazing‑fast pages and zero runtime cost, but they assume that the content never changes after the build. If you publish a blog post or an e‑commerce catalog on a static site, any update normally requires a full rebuild and redeploy. That rebuild can take minutes, block new content from going live, and increase the chance of downtime if the build fails.

Thesis: Incremental Static Regeneration (ISR) Lets You Update On‑Demand

ISR is Vercel’s solution for this problem. It lets you specify a revalidate interval in getStaticProps. After that interval expires, the next request that hits the page triggers a background rebuild. The new page is cached at the edge and immediately served to future visitors, while the stale page is still shown to the visitor that initiated the rebuild.

How to Enable ISR in a Next.js Project on Vercel

1. Make sure you’re using Next.js 9.5 or later. ISR isn’t available in older versions.
2. In the page component’s data‑fetching function, add a revalidate key. For example:

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/items').then(r => r.json());
  return {
    props: { items: data },
    revalidate: 10 // seconds
  };
}

Replace the fetch URL with your actual source. The revalidate value is in seconds; Vercel caps it at 3,600 (1 hour) on free accounts and 86,400 (24 h) on paid plans.

1. Commit the change and push to your Git repository. Vercel will detect the new getStaticProps and rebuild the page.
2. Deploy using vercel deploy or through the Git integration. The page will be served from the edge immediately after the build.

Concrete Example: A Blog List Page

Suppose you have a /blog page that lists recent posts. You want new posts to appear within 10 seconds of publishing.

// pages/blog.js
export default function Blog({ posts }) {
  return (
    

      {posts.map(p => (
        
{p.title}
      ))}
    
  );
}

export async function getStaticProps() {
  const res = await fetch('https://api.myblog.com/posts');
  const posts = await res.json();
  return {
    props: { posts },
    revalidate: 10
  };
}

Deploy the app. In the first 10 seconds after a new post is added to the API, the page will still show the old list. Once a visitor requests /blog after the 10‑second window, Vercel will rebuild the page in the background. The new version is stored in the edge cache, and subsequent requests receive the fresh list instantly. The visitor who triggered the rebuild sees the old list until the rebuild finishes; they can refresh to get the new content.

Trade‑offs and Limitations

• Revalidation Window: The revalidate value cannot exceed the plan‑specific maximum. On free accounts it’s 60 minutes; on paid accounts it’s 24 hours. If you need more frequent updates, consider a serverless function or edge function instead.
• Stale‑While‑Revalidate: During the regeneration window, visitors see stale content. For highly time‑sensitive data (e.g., stock prices) ISR is unsuitable.
• Regeneration Failures: If the rebuild fails, Vercel falls back to the last successful build. The page remains stale until the next successful regeneration.
• Build Complexity: ISR requires your page to be statically generated. Pages that rely on dynamic user data or authentication cannot use ISR.

How to Verify ISR Is Working

1. After deployment, open the Vercel dashboard and navigate to the project’s Edge Cache tab. You should see a record for the page with a Revalidated timestamp that updates after the revalidate interval.
2. Make a request to the page and inspect the response headers:

curl -I https://your-app.vercel.app/blog

You should see headers like x-vercel-cache: HIT or MISS and x-vercel-revalidation: 10. A MISS indicates the page was freshly regenerated.

1. Wait longer than the revalidate period, then refresh the page. The x-vercel-cache header should change to HIT, confirming the new content is served from the edge cache.

Actionable Takeaway

If your site mixes static pages with content that updates rarely (blog posts, documentation, product catalogs), enable ISR on the relevant pages. Set revalidate to a value that balances freshness with build cost. Monitor the Edge Cache tab and the x-vercel-revalidation header to ensure ISR behaves as expected. For data that changes more frequently or requires real‑time accuracy, fall back to serverless or edge functions.