5 Reasons Static Sites Rock!

Publikováno: 16.11.2018

Static Sites are the new hotness in Web Development and rightfully so. Every day on podcasts, blog articles, and tweets I see and hear more and more people converting their sites. Let's check out f...

Celý článek

https://youtu.be/ZWA9gx\_jpWg

TLDR

Static Sites are incredibly powerful as well as fast, secure, and extremely easy to work with!

What Are Static Sites

Dynamic - files are dynamically changed on the server and then served

Static - files are static (pre-built) and served without change from the server

Let's start by explaining what static sites are. First, the term "static" does not mean that your site has no dynamic capabilities. It simply means that that your site consists of a set of "pre-built" files (namely html, js, and css files) that are directly served on request.

Dynamic sites, on the other hand, are being dynamically generated with each incoming request. Scotch.io frontend site is a mix between dynamic and static. The Scotch.io dashboard is a React SPA hosted completely on Netlify.

Because of this, you do not need a server (not one that you manage or you write code for) like Node or Apache. All your host provider needs is a way to return your static assets.

If you're looking for a great host for your static site, check out Getting Started With Netlify!

1. Speed

The lack of database calls and dynamic content generation makes Static Sites incredibly fast!

Web Developers are constantly trying to improve speed, which in turn, improves user experience. Specifically, they put a lot of focus on Time to First Byte (TTFB), which measures the time it takes from the initial request to the first byte received by the browser.

Related Reading: Keep Server Response Times Low

Since content is pre generated, the time it takes to dynamically generate content is taken out of the picture! This means no database queries, no html templating, etc.

As mentioned, static sites don't need a server that you have to manage. Since they are just static files, it's easy for these files to be replicated across the world. This means that someone requesting your site from Japan can be served from a local data center insted of one on the other side of the world. Content Delivery Networks (CDNs) are built to do just this, which makes them a perfect host static sites. They are able to serve your site from as close as possible geographically to the person that requested it.

2. Simplicity in Hosting

Hosting for static sites can be setup in minutes!

Simplicity in hosting has a lot in common with the benefit of speed. As we just talked about, all your host provider has to do is serve static assets. The host doesn't need to support a specific language or framework. In fact, it really doesn't care anything about the specifics of your application. It just needs to know how to serve files, and serve them fast!

All of the top cloud providers have added specific plans for serving static sites, but a few of the newer hosts have really made a splash. Here are a few excellent hosts for your static sites.

Netlify

Netlify was one of the front-runners in coining and pushing the JAM Stack (JavaScript, APIs, and Markup) for modern static sites. Their interface is a breeze to use, the features they provide are incredible for working with static sites and static site generators. I've moved to Netlify for hosting of one of my sites and love it! Here are a few articles you can check out for more information.

Zeit

I hear more and more about Zeit and the amazing products they have. One that I've really enjoyed so far is Hyper, which is a terminal built in Electron. They also have support for static sites with Zeit Now hosting.

Amazon S3

Amazon's cloud platform, AWS, was probably the first huge public cloud platform, used by individuals and enterprises alike. They have continued to add features to the platform over the years including file hosting with S3 which you can use for static sites.

Google Cloud Platform

Along with Amazon, the Google Cloud Platform is one of the biggest and most popular ones out there. They've got tons of different services. One of my favorites is Firebase, which is one of the easiest ways to spin up backend services for your app like a db, authentication, etc.

3. Security

No more having to update versions of your server... you're always up to date!

One of the biggest reasons that servers get hacked is being behind on updates and patches. Often, patches for vulnerabilities are available, but people have yet to install them because it's no easy feat to stay up to date with the constant stream of security fixes.

With static sites, however, because you don't need to manage a server, you also don't need to worry about updates, patches, etc. No more updating PHP. No more updating Wordpress. No more updating Node. You're always up to date!

This security concern is especially valid for different CMS's, most notably Wordpress. Wordpress is incredibly popular (I've several Wordpress sites myself), whhich, in turn, makes it heavily targeted. There are many obvious benefits to working with a CMS like Wordpress, but having to stay up to date for security purposes is certainly a hassle!

4. Developer Experience

After setting up continuous deployment, just write code and push!

Developer Workflow/Experience is probably underrated when considering new technologies, frameworks, and ideas. With static sites, the experience is one of the most important benefits. After a bit of initial setup, the workflow is seamless. Here'es what the typical flow looks like.

As a developer of static sites you'll typically follow these steps in your workflow.

Choose a host and create a site
connect your site to source control for Continuous Deployment
Make changes to your site and check them into source control
Continuous deployment grabs the latest code and triggers an automatic build of static assets
BOOM!! You're site is updated and ready to go

Find out how to Deploy Your First Site to Netlify

In addition to the general workflow being straight forward, there are lots of Static Site Generators/Frameworks that make it even easier. These generators have tools built in to

For a list of Static Site Generators, you can check out Static Gen, but, here are a few of the more popular ones in the Web Development community.

5. Community Support

I've alluded to this a bit, but the community is throwing a lot of support behind static sites and static site generators. Netlify initially coined the term JAM Stack (JavaScript, APIs, and Markup) that has become a driving force behind modern static sites. The term and idea has caught on in a big way.

Netlify hosts a yearly conference called JAMstack Conf with some of the biggest name speakers in the industry.

With the plethora of static site generators out there, as mentioned above, there are so many different options for developers. There are options for various languages like JavaScript, Go, Ruby, and more. There are also options for different frameworks like Angular, React, and Vue as well. Lots of options and lots of support are a plus in my mind.

Things To Consider

With any new technology, framework, etc. there are always downsides, and static sites are no exception. So, as you go forward, keep these things in mind.

have to build site every time you add content
will not get dynamic content for each user
handling logins and forms in general become tricky
dependency on 3rd party services for "backend" functionality

Recap

The idea of static sites is not new (all sites were static originally), but what they have evolved into is. There are lots of options for static site generators and lots of great hosts out there. At the very least, I would recommend taking a look at one of your sites and see if it makes since to convert it to a static site. Obviously, there are some benefits to be gained.

I would love to know what your experience is with static sites. What hosts do you use? Which static site generators? Comment below or find me on twitter at @jamesqquick.