Static Site Generation (SSG) and Hybrid Rendering

Static Site Generation (SSG) pre-renders a website into static HTML at build time. While traditional SSG is limited by build scaling, modern frameworks introduce hybrid patterns like **Incremental Static Regeneration (ISR)** to handle massive content scale.

1. Traditional SSG vs. The Build Time Wall

Traditional SSG (e.g., Hugo, Jekyll) renders every page on every build.

* **Pros:** Maximum performance (CDN delivery), high security (no database at runtime), zero infrastructure cost.

* **Cons:** Build times grow linearly with the number of pages. For 100k+ pages, a full rebuild can take hours.

2. Incremental Static Regeneration (ISR)

ISR (popularized by Next.js) allows you to create or update static pages *after* you’ve built your site. It combines the benefits of static sites with the flexibility of server-side rendering.

2.1 The Revalidation Lifecycle

1. **Initial Build:** The site is built with a subset of pages.

2. **Stale Request:** A user requests a page. If the "revalidate" period has passed, the server serves the *stale* static page but triggers a background re-generation.

3. **Background Update:** The server fetches fresh data and re-renders the HTML.

4. **Fresh Cache:** The next user to request the page receives the updated static version.

3. Hybrid Patterns: ISR and SSG

Modern architectures (like Astro or Next.js) allow mixing rendering modes per-route:

* **Static (SSG):** For content that rarely changes (About, Privacy Policy).

* **Incremental (ISR):** For massive content sets (Product pages, Blog posts).

* **On-Demand (SSR):** For personalized or real-time data (User profiles, Dashboards).

4. Practitioner Insights

4.1 The "Fallback" Strategy

When using ISR for dynamic routes, use a `fallback` state (e.g., `fallback: 'blocking'` or a loading skeleton) to ensure that users requesting newly created content (not in the initial build) don't receive a 404.

4.2 Cache Invalidation (On-Demand ISR)

Instead of waiting for a timer, use **On-Demand Revalidation**. Trigger a webhook from your CMS to purge the cache and re-generate a specific page the moment it is updated.

4.3 Islands Architecture (Astro)

In hybrid SSG, use the **Islands Architecture** to keep the HTML static while only hydrating specific interactive widgets. This minimizes the "JavaScript tax" on initial load.