Skip to content
micro-frontend.dev 2.0

JavaScript Static Site Generation

Author: Natalia Venditto

Date First Published: Wed Jan 04 2023

What is Static Site Generation?

Static Generators typically generate HTML from markdown, at buildtime.

The result are therefore static pages that are usually cached at CDN level.

server side generation

Static Site Generation and performance metrics

Static Site Generation is a great way to improve performance metrics, especially Time to First Byte (TTFB) and First Contentful Paint (FCP). Other metrics that are equally improved are First Paint (FP), First Contentful Paint (FCP) and Time to Interactive. (TTI).

Mechanism and caching

Static Site Generation is a form of static data fetching implementation. This means that pages generated are cached indefinitely, until there is cache invalidation or flushing, because the page was rebuilt.

Considerations

You may need to consider how many pages you will be generating. Depending on the supporting system and other constraints, it may take a long time to render thousands of pages at buildtime. Although this is typically not a problem, you may want to make sure the system is configured to rebuild only those pages that have been newly created or updated, while keeping the rest in the cache, to save resources.

You can see the slide from a conference deck depicting the process and the pros and cons, here.