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

・ISR is a feature in the NextJS framework for React that allows you to update static pages after they have been deployed, without needing to rebuild the entire site. This combines the performance and SEO benefits of a static site with the ability to display up-to-date, dynamic content.

How ISR Works
With traditionalStatic Site Generation(SSG), all pages are generated at build time, and a full redeployment is required to update content. ISR solves this by:

・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, however, triggers NextJS 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:
NextJS also supports "On-demand Revalidation", which allows you to purge the cache manually via an AIP route, rather than waiting for a time interval to pass.

Implementation in Next.js
ISR is primarily a Next.js feature, and in the App Router, it is handled via the revalidate export in data-fetching functions or as a fetch option.

// 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,
similar to SSG.

・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.