Static Site Generation

The entire website is compiled into a set of static assets—HTML, CSS, JavaScript, and images—during a build process. This occurs once, at deploy time, rather than on-demand for each user request. The output is a directory of pre-rendered files ready for distribution.

• Process: Data is fetched from APIs, headless CMSs, or local files during the build.
• Result: Each route generates a corresponding index.html file.
• Contrast: Unlike Server-Side Rendering (SSR), no server runtime is needed to assemble pages on the fly.

Pre-built static files are deployed directly to a Content Delivery Network (CDN), a globally distributed network of edge servers. When a user requests a page, the CDN serves the pre-rendered HTML from the node geographically closest to them, minimizing latency.

• Edge Caching: Assets are cached at the edge, often with a long Time-To-Live (TTL).
• Global Scale: A CDN absorbs traffic spikes without scaling origin servers.
• Cache Invalidation: Updating content requires a full or partial rebuild and redeployment to purge the CDN cache.

Each build produces a completely self-contained, immutable snapshot of the entire website. This deployment artifact is atomic; the new version replaces the old one entirely. This guarantees perfect consistency across all CDN edge nodes and eliminates the risk of runtime state corruption.

• Atomic Swaps: The switch from old to new version is instantaneous.
• Instant Rollbacks: Reverting to a previous version is as simple as redeploying an earlier build artifact.
• Debugging: Every deployment is a fully reproducible, version-controlled artifact.

An SSG site has a dramatically reduced attack surface. With no live server, database, or application logic processing requests, traditional server-side vulnerabilities are eliminated. The infrastructure is reduced to serving static files.

• No Server-Side Code Execution: Eliminates SQL injection, cross-site scripting via server templates, and authentication bypass attacks.
• No Origin Server to Compromise: The CDN acts as a shield, and the origin is often just object storage.
• DDoS Resilience: CDNs are inherently designed to absorb large-scale distributed denial-of-service attacks.

SSG is the optimal rendering strategy for content that does not change on a per-request basis and where performance and security are paramount. It is less suited for applications requiring real-time, user-specific data on every page load.

• Best For: Marketing sites, documentation, blogs, personal portfolios, and e-commerce product listing pages.
• Less Ideal For: Real-time dashboards, social media feeds, or applications with millions of user-generated pages that would cause prohibitively long build times.
• Hybrid Approach: Modern frameworks offer Incremental Static Regeneration (ISR) to update specific pages post-deployment without a full rebuild, bridging the gap between static and dynamic.

A hybrid rendering technique that allows developers to update static pages on a per-page basis without requiring a full site rebuild. ISR combines the speed and security of static generation with the flexibility of server-side rendering by re-generating a page in the background when a request arrives after a specified cache TTL expires. This is essential for large-scale programmatic sites where rebuilding thousands of pages for a single data change is computationally prohibitive.

A rendering method that generates the full HTML for a page on the server in response to each request, rather than at build time. While SSG pre-builds all pages, SSR computes them on-demand, ensuring the content is always fresh but incurring higher Time to First Byte (TTFB) latency. SSR is often the fallback for pages that cannot be statically generated due to real-time data dependencies or personalization requirements.

The client-side process where JavaScript attaches event listeners and application state to the static HTML sent by the server or CDN. After an SSG page loads, the framework 'hydrates' the inert DOM nodes, making the pre-rendered page fully interactive. Understanding hydration is key to avoiding layout shifts and unresponsive interfaces in statically generated applications that require dynamic client-side behavior.

Serverless functions that run at the edge of a CDN network, allowing developers to execute custom logic like authentication, A/B testing, or URL rewriting geographically close to the user. When paired with SSG, edge functions can add dynamic capabilities to otherwise static pages without sacrificing the performance benefits of global distribution. They act as a lightweight middleware layer between the cached static asset and the end user.

The process of purging or updating cached content on a CDN when the origin data changes, ensuring end-users receive the most current version of a resource. For SSG sites, a full rebuild inherently invalidates the entire cache. However, advanced strategies using surrogate keys allow for granular, targeted purging of specific pages or sections, which is critical for large programmatic sites where a full cache flush is inefficient.

A back-end only content management system that decouples the content repository from the presentation layer, delivering structured content via API to any front-end channel. SSG frameworks consume data from a Headless CMS at build time, pulling structured content to generate static pages. This decoupling is the foundational architectural pattern for programmatic content infrastructure, enabling a 'create once, publish everywhere' workflow.