ReviseAlgo Logo

Rendering

ISR

Learn incremental static regeneration in Next.js, how revalidation works, and when to combine static speed with controlled freshness.

1. Learning Objectives

By the end of this lesson, you will be able to:

  • Explain incremental static regeneration.
  • Use time-based revalidation for static pages.
  • Describe stale-while-revalidate behavior.
  • Choose ISR for content that is mostly static but changes after deployment.

    • Difficulty: Intermediate.

    2. Prerequisites

  • SSG basics.
  • Server data fetching.
  • Cache and CDN basics.

    • 3. Overview

    Incremental static regeneration lets static pages update after deployment. A page can be served from cache for speed, then regenerated in the background or on demand when it becomes stale.

    4. Why This Topic Matters

    Many pages are not fully static or fully dynamic. Product details, blogs, docs, and landing pages may change a few times per day. ISR keeps them fast without forcing a full rebuild for every edit.

    5. Real-World Analogy

    ISR is like a restaurant menu printed daily with a small chalkboard for updates. Most customers get the fast printed menu, and the staff refreshes the board when something changes.

    6. Core Concepts

    ConceptMeaning
    RevalidationProcess of refreshing cached static output.
    revalidateTime window after which cached data can refresh.
    Stale contentOlder cached content served while fresh content is generated.
    On-demand revalidationTriggered refresh after a CMS update or webhook.
    Cache tagLabel used to invalidate related cached data.

    7. Syntax & API Reference

    Fetch-level revalidation:

    8. Visual Diagram

    9. Live Example - Full Working Code

    What just happened? The page can be served statically, but Next.js is allowed to refresh the data after 60 seconds.

    10. Interactive Playground

    Try this:

  • Set revalidate = 10 and watch data refresh after the window.
  • Compare the behavior with cache: 'no-store'.
  • Add a CMS webhook route that calls revalidation after content changes.

    • 11. Common Mistakes

    MistakeWhy It HappensCorrect Approach
    Expecting instant updates from time-based ISRRevalidation is cache-driven.Use on-demand revalidation for immediate CMS updates.
    Using ISR for private dataStatic output can be shared.Use SSR or private caching for user-specific pages.
    Setting revalidate too low everywhereFreshness anxiety.Match the interval to business needs.

    12. Best Practices

  • Use ISR for public content that changes occasionally.
  • Pick revalidation windows based on user expectations.
  • Use on-demand revalidation for editorial workflows.
  • Avoid ISR for per-user private pages.
  • Monitor stale content tolerance and cache behavior.

    • 13. Browser Compatibility

    FeatureBrowser ImpactNotes
    Cached HTMLBroad supportBrowser receives normal HTML.
    Background regenerationServer/platform featureInvisible to browser.
    Client islandsRequires JavaScript for interactivitySame as other Next.js pages.

    14. Interview Questions

    Easy: What does ISR stand for?

    Answer: Incremental static regeneration.

    Medium: How is ISR different from SSG?

    Answer: SSG creates static output at build time, while ISR can refresh that static output after deployment.

    Hard: Why might users briefly see stale content with ISR?

    Answer: ISR can serve cached stale content while regeneration happens, trading instant freshness for speed and availability.

    15. Debugging Exercise

    Bug report: "The CMS editor published a typo fix, but the page still shows the old title for a few minutes."

    Solution

    The page likely uses time-based ISR. Either wait for the revalidation window and a request to trigger refresh, or implement on-demand revalidation from the CMS webhook.

    16. Practice Exercises

  • Easy: Add export const revalidate = 60 to a public page.
  • Medium: Use fetch-level revalidation for a product list.
  • Hard: Design an on-demand revalidation route for CMS updates.

    • 17. Scenario-Based Challenge

    An ecommerce product catalog has 50,000 public products. Prices update every 15 minutes, but traffic is high. Which strategy works?

    Walkthrough

    Use ISR with an interval matching pricing tolerance, selective static generation for popular products, and on-demand revalidation for urgent price updates.

    18. Quick Quiz

    1. What does ISR refresh? Answer: Static output or cached data. 2. Is ISR good for private dashboards? Answer: No. 3. What controls time-based refresh? Answer: revalidate. 4. Can ISR serve stale content briefly? Answer: Yes. 5. What helps refresh immediately after CMS changes? Answer: On-demand revalidation.

    19. Summary & Key Takeaways

  • ISR blends static speed with controlled freshness.
  • revalidate controls when cached output can refresh.
  • ISR is best for public content that changes occasionally.
  • Time-based ISR is not instant.
  • On-demand revalidation fits CMS publishing workflows.

    • 20. Cheat Sheet

    SituationISR Fit
    Blog edited dailyStrong
    Product catalogStrong
    User account pagePoor
    Breaking news homepageDepends on freshness needs
    Documentation siteStrong

    21. Further Reading

  • Next.js Docs: Incremental Static Regeneration.
  • Next.js Docs: Revalidating.
  • Vercel Docs: Caching.

    • 22. Next Lesson Preview

    Next, you will learn streaming, which sends parts of a server-rendered route as they become ready.