Static Site Vs Dynamic Site - What are the Main Differences?

A distributed network optimized for serving assets to users. By being geographically distributed, a CDN can provide redundancy and also improve delivery performance as a result of servicing requests from the infrastructure closest to the user making the request.

— Source: Jamstack

• Server-side rendering [pre-built files stored on a web server] and usually cached

• Delivered by a CDN

• Serves pre-rendered/ pre-generated/pre-built HTML, CSS, and JavaScript files to a web browser

• HTML files that load quickly

• Files are not altered when shipping to the visitor

• Pages look the same to everyone navigating to a page (or URL)

• Static files are lightweight (and are thus cheaper and faster to serve)

• Security is also enhanced as the content database (Headless CMS) is independent

• No interactions with the database

Note: It is important to flag that static does not mean that a website is unresponsive to a user’s actions.

It means that the website is likely to be exceptionally quick. In layman's terms the request from the browser is met with a simple response - 'here is the file, I am sending it back'. Because CDNs are used, the request should hit the nearest server to the request which positively impacts load times.

This is a key point - site speed is a vital part of web performance and this is a key motivation when developers select a static site-based architecture over a dynamic one. 

Speed is also a significant ranking factor for SEO alongside Core Web Vitals as aHrefs article recently advised:

Page Speed

Page speed is a ranking factor on desktop and mobile. Your site doesn't have to be lightning-fast, just fast enough so that Google doesn't demote your page for offering a slow experience.

Core Web Vitals

Core Web Vitals measure a page’s loading performance, interactivity + visual stability. Google uses three metrics to do this: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

In summary, when it comes to a static site the primary benefit is a fast load time in the browser which is of significant importance for some categories of users. 

Aside from SEO, conversion rates are also negatively impacted by slow sites which partly explains why major e-commerce sites are moving off legacy platforms to Headless CMSs [What is a Headless CMS?] (which power the content on static sites).

The ‘time to first byte' is also a common measure as to how fast a site is and again a static site outperforms a dynamic site keeping everything else.

Web development with static site generators is a hybrid process and an SSG enables you to generate HTML pages during a build process, and deploy them to a server and CDN. These enable you to construct your website locally as usual while compiling it into static files for deployment. As developers create static sites and have alternatives to support the majority of computer languages, they are growing in popularity.

Static Site Generator

A tool which can be run as part of a build to transform content, data, and templates into files which can be deployed to a hosting environment as a ready-to-serve web site. 

—Source: Jamstack

Popular Static Site Generators

The following represent the most popular static site generators on the market.

• Next.js - a framework for statically exported React apps (Javascript)

• Nuxt.js - a minimalist framework for serverless Vue.js applications  (Javascript)

• Gatsby - uses React to help build fast websites (Javascript)

• Jekyll - One of the most commonly used static site generators. (Ruby)

There is a long list of static site generators on the Jamstack site.

https://jamstack.org/generators/ 

Speed/ performance is the main benefit of a Static Site which is why they are becoming popular with websites where optimum performance is a key consideration. They are not as easy to get up and running as say WordPress but once it is live the performance will trump a dynamic site.

It takes us back to a key point when it comes to CMS selection or which site architecture you want to use. The context of the site is a key determinant. A personal website designed as a brochure site where budgets are minimal and traffic expectations are modest will be best suited to a WordPress, Wix, or Squarespace CMS. However, for those companies looking to build high-performing sites with significant traffic and a need to optimize traffic then static sites and Headless becomes a credible route to consider.

Static Sites and Headless CMS

The reason static sites and Headless CMS's work well is that a Headless CMS provides content through an API, and a static site consumes content through an API. An SSG thus allows you to create a static site and can be pre-configured to work with an API to access the content.

Key Points a Marketing Leader Needs to Know

For those working in marketing, the differences between static sites and dynamic sites is unlikely to represent a key discussion that comes up all that frequently. The main points to take away are that there are different approaches to managing websites, and developers will often have strong views as to which route to go down. Like many things it is a case-by-case decision. 

• Traditional v Headless CMS

• What are the Key Benefits of a Headless CMS?