ISR

## 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 | Concept | Meaning | |---|---| | Revalidation | Process of refreshing cached static output. | | `revalidate` | Time window after which cached data can refresh. | | Stale content | Older cached content served while fresh content is generated. | | On-demand revalidation | Triggered refresh after a CMS update or webhook. | | Cache tag | Label 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 | Mistake | Why It Happens | Correct Approach | |---|---|---| | Expecting instant updates from time-based ISR | Revalidation is cache-driven. | Use on-demand revalidation for immediate CMS updates. | | Using ISR for private data | Static output can be shared. | Use SSR or private caching for user-specific pages. | | Setting revalidate too low everywhere | Freshness 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 | Feature | Browser Impact | Notes | |---|---|---| | Cached HTML | Broad support | Browser receives normal HTML. | | Background regeneration | Server/platform feature | Invisible to browser. | | Client islands | Requires JavaScript for interactivity | Same 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 | Situation | ISR Fit | |---|---| | Blog edited daily | Strong | | Product catalog | Strong | | User account page | Poor | | Breaking news homepage | Depends on freshness needs | | Documentation site | Strong | ## 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.