1. What is Static Site Generation (SSG)?

Static Site Generation, aka Static Rendering (SR), is the process of delivering a pre-rendered, or static, HTML to the client that was built ahead of time instead of in response to a request.

2. How does Static Site Generation (SSG) work?

How does Static Site Generation (SSG) work?
  1. we start with the server, which fetches any needed data from external datastores
  2. combines the data with HTML templates, to generate a static HTML page for each route
  3. when a client sends a GET request
  4. the server responds with a pre-generated HTML page
  5. which the client then renders

3. What are the Pros and Cons of Static Site Generation (SSG)?

Pros:

  • fast load
  • cheap to host and cache
  • server load scales with content change, not user requests
  • secure
  • easy distribution via CDNs

Cons:

  • every content change requires entire site be rebuilt
  • limited user management
  • real-time data needs to be added separately
  • same content for all users

4. When should you use Static Site Generation (SSG)?

  • when you need fast load times
  • when your content is mostly the same for all users
  • when your content does not change very often

Perfect for static content websites, such as blogs, magazines, projects and maybe also e-commerce websites


Resources

Static Rendering
Deliver pre-rendered HTML content that was generated when the site was built
Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19)
One of the core values of the web is its accessibility: the same medium can be used to deliver content that adapts to different devices, capabilities and connection types. This variability needs to be factored into every architectural decision that is made. Luckily, frameworks are here to help.This…

Client-Side Rendering vs Server-Side Rendering vs Static-Site Generation

Static vs Dynamic websites - The pros and cons
The advantages and disadvantages between Static vs Dynamic Websites. Which one should you choose? Explore the considerations needed for your decision.
What are the pros and cons of using static site generators?
Answer (1 of 2): I am using a Static Site Generator for my blog. Back then I was using Wordpress. This list was taken from an article I wrote about moving to static site generators. Here I am comparing the experience to content management systems. Pros * Very cheap. This is one of the main rea…
Advantages & Disadvantages of Static Site Generators
Could it be possible that static sites are making a comeback? Even though the popularity of content management systems has skyrocketed in recent years, some projects are still better served by static sites. It seems that, at least in some cases, static sites are a more advantageous choice compared t…

Caching static and dynamic content: How does it work?

Patterns for Building JavaScript Websites in 2022
Deciding on the approaches and tools to use to build on web these days can be a challenging prospect.…
Static Rendering | JavaScript Patterns
Website created for the FrontendMasters course on JavaScript Patterns by Lydia Hallie
Critical rendering path - Web performance | MDN
The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Document Object Model (DOM), CSS Object Model…
Application Holotypes: A Guide to Architecture Decisions - JASON Format