Together with Charlotte Douglas International Airport (CLT) we proudly launched our first website as part of our Digital Airport Platform. An optimal user experience on both desktop and mobile. To achieve this result, we have chosen for a static website that uses JavaScript. In addition to JavaScript, we have used external APIs and a Markup language. The combination of these elements is described as a JAMstack structure (a way in which static web applications are developed).

In this blog we leave the term JAMstack behind us and delve deeper into the advantages, disadvantages and functioning of static vs. dynamic websites.

What is a static website?

With static websites, the individual web pages are shown to the user as they are stored. In the case of the CLT website, we use a so-called Static Site Generator to build these static pages. Simply put, the static site generator is a program that converts source files into web pages. These source files are templates that are enriched with data by the static site generator. This data can be retrieved through an API from a third party during this process if necessary.

The templates are composed of components that can be manipulated client-side dynamically. This provides end users with a native experience as they have the feeling of not leaving the webpage at all. Examples are the header and footer that remain visible regardless of whether a user requests another page.

Dynamic components of the website are written in JavaScript. Often a front-end library is used such as Vue or React, but Vanilla JavaScript is also a suitable solution. All required server-side functionalities are available via an API, accessible through HTTP with JavaScript. The final HTML pages are generated via templates in a markup language such as Markdown or React JSX, which is normally done by a static site generator.

Blog websites are a well-known use case. The articles are written in a headless CMS or simple markup language such as Markdown. For each article, a web page is generated by rendering the content in the template and converting it into HTML, CSS and if necessary JavaScript.

With static websites, changes to source files or content are not immediately visible. The website must logically be regenerated. This sounds complex, but there are many tools that can automate this process. We have opted for webhooks via a build server. A signal is sent to the build server after an adjustment of the source code or content. The build server generates a new version of the website and replaces the old website.

Benefits

The main difference between dynamic and static websites is that static sites do not have any server side processing. All pages are already built before a user visits the website. This conceptual difference gives static sites a number of advantages over a dynamic variant.

Performance

Static websites have better performance compared to dynamic ones. A web page of a dynamic site goes through a number of steps before it can be displayed in the browser. With a static site, these steps are completed before the page is requested.

Take a traditional WordPress website for example. The content that is created in the WordPress CMS is stored in a database. As soon as a user requests a web page, WordPress retrieves the required content from the database. PHP then generates an HTML page that is displayed in the browser. Every single time a web page is requested, it needs to be rebuilt. This does not benefit the speed of the website.

A static website does not use a database or server-side rendering. Unlike WordPress, all web pages are created before being requested by a user. The necessary HTML and assets are already generated during the build, so they are ready when the page is requested by a user. Hosting via a CDN

Because there is server side no need for a database and no further processing takes place, a static site can be hosted on a Content Delivery Network (CDN). This gives the performance and scalability an extra boost.

A CDN is a worldwide network of servers with copies of the same static files. A user is therefore always relatively close to a server in the delivery network. The loading time is therefore lower than it would have been when hosting static files on a normal web server.

SEO

Nowadays, performance is an important factor in Google's search engine ranking. If used properly, a static website offers a number of major SEO related advantages over a dynamic website.

A first major advantage: static websites can generate easily readable URLs. Dynamic websites often use complex rewrite rules for the configuration of a web server. With a static website, the path in the URL simply corresponds to the location of the files of the site. This benefits ranking in Google.

When unsuitable

Despite the advantages of a static site, there are still reasons to opt for a dynamic website.

User specific content

A static site generator generates only a single variant of each page and each page gets its own URL. If a single web page can differ from its content - for example in the case of an A/B-test - a static website may not be the best choice. Yet there are ways in which the same result can be achieved with a static site. This way you could dynamically load parts of the static site.

Developer dependent

In a WordPress CMS, the manager is very free to act. In the case of a static website, a programmer is usually required for adjustments to the website. Via a Headless CMS such as Contentful, it is possible to offer comparable freedom in terms of content management. However, functional adjustments require the expertise of a software developer.

Real-time updates

Adjustments to a static website are not immediately visible. The website must be regenerated. Depending on the size of the website, this can take a few minutes. A website that has to show a lot of real-time updates may therefore have a better dynamic structure.

Conclusion

A static website is a website in which the individual web pages are shown to the user as stored in advance. In other words, all pages are already built before a user visits the website. In the case of a dynamic website, all pages are only built when a user visits the website.

We find a main advantage of a static website in performance and speed. These are considerably higher compared to dynamic websites. However, dynamic websites can be preferred if, for example, many real-time updates have to be shown to the user. In addition, a dynamic website does not require the expertise of a software developer for every modification to the site. Our preference?

At M2mobi we value the quality of our work. For that reason we prefer to develop static websites. If many real-time updates need to be shown to the user - such as flight statuses - we choose to load them dynamically.