ReactJS(NextJs) Rendering Pattern ~Incremental Static Regeneration (ISR)~

Source: Dev.to

How ISR Works

• Serving from cache: The initial request for a page serves a pre‑generated, static version from the cache, ensuring a consistently fast response.
• Background regeneration (time‑based): You specify a revalidate time in seconds. After this interval passes, the next user request still receives the stale (cached) page immediately. This request triggers Next.js to regenerate a fresh version of the page in the background.
• Serving fresh content: Once the new page is successfully generated, it replaces the cached version, and all subsequent visitors receive the updated content.

On‑Demand Revalidation

Implementation in Next.js

// app/page.tsx or similar
export const revalidate = 60; // Regenerate the page every 60 seconds

export default async function Page() {
  const res = await fetch('https://example.com/items');
  const items = await res.json();
  // ... render items
}

Benefits

• Improved performance: Pages are served instantly from a CDN cache.
• Reduced build times: Only the necessary pages are regenerated, making it efficient for a large site.
• SEO advantages: Delivers fresh, static HTML pages, which are optimal for search engines.
• Fresh content without redeployment: Content updates from a CMS or database are reflected without a full site rebuild.