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 five reasons why so many people are moving to static sites!
Table of Contents
Static Sites are incredibly powerful as well as fast, secure, and extremely easy to work with!
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.Essential Reading: Learn React from Scratch! (2020 Edition)
If you're looking for a great host for your static site, check out Getting Started With Netlify!
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.
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.
- Getting Started With Netlify
- Deploying Your First Site to Netlify
- Build and Deploy Your First Lambda Function To Netlify
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'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.
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.
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!
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.
Netlify hosts a yearly conference called JAMstack Conf with some of the biggest name speakers in the industry.
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
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.
Like this article? Follow @jamesqquick on Twitter