Static Site Generation

• HTML pages are generated at build time, before site is deployed, rather than on the server when a user requests a page.
• Pages are pre-rendered into static HTML files.
• These pages are served directly by a web server or CDN when users visit.

SSG Workflow:

Imagine building a blog with SSG:

1. At build time, runs npm run build with a static site generator (Nextjs, Gatsby, …).
2. Generator fetches data from a db or API
3. Generator applies templates and layouts to generate HTML for each page.

Example: For three blog posts, SSG creates:
/blog/post1.html
/blog/post2.html
/blog/post3.html

1. All static HTML pages are uploaded to a server or CDN.
   • No server-side code is needed at request time.
2. User visits /blog/post1.
3. The server or CDN directly serves the pre-built HTML.
4. Browser renders the page instantly.
5. If the site has dynamic behavior (like React components), JS can hydrate the static page.

Advantages of SSG

1. Blazing fast ✅
   • HTML is already built; served directly from CDN.