Why Static Sites

by Trevor Sorel

September 04, 2020

Note: looking for a short and quick version of why static sites are great? Check out the TLDR version here. Otherwise, read on!

That’s right, an ancient technology as old as the internet itself may be the best tech solution for your website. Let me explain how that could be. I think you’ll find this new iteration of tried and tested tech to be really compelling. It actually simplifies development and improves performance.

What are static sites?

Static sites are websites that don’t utilize a server to generate dynamic content on demand. They’re fairly straightforward — just HTML, CSS, and JS, delivered to the client through a CDN on page load. In fact, static web pages were among the first sites to exist on the web, technically speaking. Today, however, they’ve been augmented for improved functionality.

These days static sites are usually generated by Static Site Generators (SSGs) like Jekyll or Gatsby, which empower developers with a myriad of features to organize and deploy code. These tools run before deployment, generating html files from the code the developer provides. SSGs are a bit like conductors for a pre-recorded orchestra, synthesizing parts and spitting out compiled markup that can be deployed statically, anywhere. This is the key concept here: with SSGs and their ecosystems, the heavy-lifting happens before (and occasionally during) deployment, but not after.

There is also a growing ecosystem of tools surrounding Static Sites that provide additional functionality: so-called headless tools that expose APIs to SSGs, which generate content from external sources on page load. This ecosystem makes up the component parts of the JAMstack, which stands for Javascript (to serve dynamic content), APIs (to update content on deploy), and Markup (SSGs)… I know, this is getting a little bit complicated, but the key takeaway is this: the new static ecosystem means static sites can serve almost any need, including e-commerce storefronts, with optimal efficiency.

In contrast, server-based tools like Wordpress inject dynamic content as users interact with the page. This latter method creates additional complexity, security vulnerabilities, (potentially) higher hosting costs, additional maintenance costs, and slower load times.

Now that we have an idea of what these tools are, lets dive a little deeper into the pros of Static Sites and SSGs.

Static sites are simple to build and maintain

Have you ever tried customizing a wordpress site? As a developer let me tell you, it’s a pain. Sure, with a preconfigured template, a wordpress site is simple to setup for the end user, but dig around in the code and the learning curve becomes steep.

While wordpress is particularly problematic here, other server-based solutions suffer from similar problems (see Joomla, or Drupal). Their implementations are necessarily complex, leading to a myriad of inefficiencies, costing more developer time (and consequently, customer dollars).

Static sites are much simpler to build and maintain. They don’t have complex render loops, massive nested file structures, or database setups to worry about. They run locally with a few simple commands, enabling the developer to hit the ground running. This is good for a paying customer, as it means lower costs. It also means fewer moving parts to break.

Static sites are more secure

Moreover, because they aren’t based on server technologies, static sites are more reliable and secure. SQL injection doesn’t work when there is no SQL database to inject into. This means no more maintenance fees as your developer works to update wordpress so it isn’t hackable.

Static sites are fast

Because they are served as static content, and don’t need to ping a server to receive content after page load, static sites are generally much faster than server-based sites. Being static, they are also easy to clone and serve up on a cloud network, so they load quickly from anywhere in the world. Loading times are very important for the user experience, evidenced by the fact that page load speed is directly correlated with visitor conversion rates (read more here).

Content Management Systems support Static sites

One concern many website owners have with going static is that they’ll lose the ability to edit their content through a CMS. After all, most content management systems utilize servers and databases to serve up dynamic content, so surely going static means losing this functionality. It’s an understandable concern, but is no longer valid.

There are now many content management solutions for static websites and applications, including services like Contentful and (my favorite) Forestry.io. These services utilize headless methods (not tied to the server where you host your website) to deploy new content to your site on command, through a UI. They do this by re-deploying your site when a change is made, running the build command to re-render the site.

We’re getting complicated again, but worry not, the details aren’t important. What does matter is that you can update and add content, as well as see previews with Static-compatible CMSes. Granted, the CMS experience with static content is different than the offerings from server-based systems, and tends to be less feature rich, but comes with its own pros. In particular, the ability to deploy content from one central source CMS to multiple locations is a major pro that’s attracting industry leaders to this technology.

Static sites can still serve dynamic content

Just because your site is static doesn’t mean it can’t be dynamic. There are many methods available for integrating dynamic content into static websites. A developer can use plain old vanilla javascript to implement animations and other interactive functionality. Or, if you require CRUD functionality (or other app functionality), a developer can utilize an API call to an external resource that returns data, and update the page’s state manually, or they can use a tool like React. Essentially, you could go as far as embedding a fully functional SPA (Single Page Application). The point here is that static sites need not be a limitation. In fact, they even have some major advantages as platforms for applications…

Static sites and applications are device agnostic

Because they don’t require a server to run, static sites can be rendered anywhere, including on mobile devices like tablets and smartphones. So, build your site or the frontend of your application in one location, and you’re able to render it anywhere, including as a mobile app by wrapping the frontend in a tool like Cordova/Phone gap. This is one of the major reasons that static applications have become more popular, they decouple the backend from the frontend, allowing much more flexibility in deployment. This means you can easily turn your website into a web application, if you so desire.

All in all, static websites offer a slew of benefits that make them a great option, particularly for marketing websites. That’s why they are the core technology in our stack here at Coastlight Digital.

    Looking for web design and development services?