Choosing the right web architecture is one of the most common dilemmas when building a website. You might have heard of static and dynamic websites, but you are unsure how each approach will affect your website in the long run.
This article explains what exactly static and dynamic sites are, how they compare to each other, and how to employ modern tooling to reap the benefits of static sites with simplified workflows.
#What is a static website?
A static site is built with pages of static content or plain HTML, Javascript, or CSS code. This content stays consistent regardless of the user or where the user is and offers little interactivity. Because the content served is not dependent on a particular user, it can be pre-rendered, leading to fast performance and lightweight overhead in simple use cases.
#Static websites: how did they evolve?
Static was once the only way to build a website. Originally, websites were static HTML pages, which were coded separately and were time-intensive. For multi-page sites, each would have to be individual HTML files, lacking repeatable elements.
As users began to expect better performance, developers craved more intuitive workflows. With the advent of dynamic websites came the ability to share repeatable code across different pages. Things that should be consistent across the site could now be “components”, saving developers time and energy.
However, dynamic sites added more overhead on the server side, and querying content on the fly led to longer load times. These dilemmas led to the emergence of static sites, with more teams turning to static builds for simple sites due to their performance benefits.
Today, the tooling and community around static sites have grown significantly with the rise in popularity of the Jamstack. Static sites enable teams to get projects up and running quickly and find creative ways to add dynamic content to largely static sites.
#How do static websites work
Depending on your use case, you can build a static website using these 3 methods in the modern days:
Simple static sites—Simple static sites are a good option for sites where the content does not change often or when the site is straightforward. If you want to build a simple presentation with a few pages, e.g., a web page for a local business or a personal blog, it's best to build it in HTML/CSS for simplicity.
- Use a static site generator (SSG )—A Static Site Generator (SSG) may supplement more complex use cases, especially useful when you have hardcoded content or content in the markdown files. You want to reuse a page or templates, and you have content maintained by technical people who can edit content directly in code or are comfortable doing it in markdown files.
- Static site generator + a headless CMS—This method is mainly employed where website and content relations are more complex and non-technical editors manage your content (they don't have to be purely non-technical, but they are uncomfortable pushing changes to the repo every time a content change is made).
It’s worth noting that although many folks criticize static websites’ limitations compared to dynamic websites, they are only looking at the simplest way of constructing a static website. Most of these can be remedied by using SSGs and a headless CMS.
#Components of a modern static website
Modern static sites gained more popularity with the rise of the Jamstack. The Jamstack promotes modular architectures to give teams the functionality they need without the rigid structure of monolith systems. As mentioned in the content above, modern static sites typically have the following components.
Static site generator
Static Site Generators create static HTML web pages based on data and templates from within the tool. When teams use a static site generator, they benefit from the website's static nature while still having tooling such as repeatable components and powerful APIs, which can create more modern workflows and experiences.
In tandem with a headless CMS, an SSG can help teams balance the benefits of static sites while using modern workflows. A diverse ecosystem of SSGs can suit a broad range of use cases and team needs.
The content and CMS
The content layer is how teams store and manage their content for their static site. Some teams use a collection of markdown files; however, this can become cumbersome as time goes on and more content is created.
Headless CMS can be a good way to organize and manage content while benefiting from a static site. It provides the capability to create an organized repository of structured content without the opinion of a front-end system. Headless CMS also creates a more distributed workflow, with content editors able to manipulate all of the content without the need to involve developers.
#Pros of static websites
We will break down some of the key advantages of static sites to fully explain how you can choose between a static site and a dynamic one.
Security
Static sites are more secure than dynamic sites because static sites are pre-built files that only communicate with the backend when there are changes to the content instead of at every request and do not send information to the server. The high volume of information sent to the server and the high volume of round trips are common vulnerabilities for tooling such as Wordpress.
Using a headless CMS can also provide an extra layer between databases with sensitive information and the SSG and allow users to federate data from existing external databases.
Performance
Static sites remove the time needed to fetch the content for the user on a case-by-case basis using pre-built static files. The pre-built files mean that it is easy to create high-performing static sites. In light of the page experience update with Google, to be competitive in terms of performance, the static website is the best option for teams wanting to maintain strong SEO.
Requires fewer machine resources
Because static sites are built once and only rebuilt when there are changes to the content and serve HTML and CSS, they do not require teams to constantly compile multiple files and roundtrips to the database to retrieve content. Users are served the prebuilt content, which saves machine resources and enables speedy performance.
#Cons of static websites
There are some slight disadvantages of working with static sites which make them not ideal for every team and use case.
Requires development knowledge/expertise
Building static sites requires teams to find developers with experience with tooling such as Static Site Generators or plan time for teams to adjust to the approaches into project timelines. Because of the popularity of these frameworks and systems, there is a large community of developers with experience with these technologies. However, it is still an important consideration when starting new projects.
Requires additional effort to add dynamic content
Dynamic content requires teams to add additional services or mutate content into your chosen headless CMS. While adding dynamic content with the Jamstack and static sites requires an extra step, it enables teams to implement best-of-breed services built for a specific use case. Popular types of dynamic content include user-generated content (UGC), such as a comment section or a place to submit forms.
#What is a dynamic website?
Dynamic websites are sites that serve content based on the user. Considerations such as language, location, and target group are taken into account, and content is served based on the information relevant to the user.
#Pros and cons of dynamic websites
Dynamic content requires content to be served based on the user. This means that for every user request, a round trip to the database is required to retrieve content, populate the page with the content, and serve it to the user.
While this means the user receives highly relevant information, there are often trade-offs, such as exceptional performance and security.
Static Site Generators have found a way to strike a balance between static and dynamic sites, offering the benefits of traditional static sites while offering more interaction.
#Static site generators (SSGs) vs. dynamic websites
Static Site Generators enable teams to benefit from the processing power of static sites while enabling teams to build modern, efficient developer workflows.
Instead of having to build every static page separately, SSGs promote the creation of reusable components that can be used across a particular project and serve page specific html, Javascript, and CSS where it is appropriate. There is a lot of tooling around SSGs that enable more personalization and dynamic experiences while the sites remain largely static.
The key difference between dynamic sites and sites built with SSGs is that dynamic sites still require additional roundtrips for every user request. With SSGs, the website will serve pre-rendered static files.
#How to build a static website
Taking a closer look at how to build a static site gives teams considering this approach a better understanding of what to expect from this approach.
1. Choose a frontend framework
The first consideration is which frontend framework to use. Many static sites follow Jamstack methodology, meaning that the framework will be Javascript based. Some popular frontend frameworks for building with static sites include React, Vue.js, and AngularJS.
2. Choose a headless CMS
A headless CMS is a key element for managing content effectively, especially for content-heavy sites. Important considerations for selecting the best CMS for your team include how easy it is to federate content with a particular CMS and whether or not they offer functionality like localization out of the box.
3. Choose a hosting platform
Like the frontend framework, the hosting platform is largely based on team preference. Popular choices include Vercel and Netlify.
Static sites are a good option for many use cases in the modern web context. By integrating additional services, teams can strike a balance between the performance benefits of static sites and the interactive experiences enabled by dynamic content.
Blog Author