Why The Best Websites Are Static

Mark Catalano - Oct 5 '18 - - Dev Community

All websites are different, but three things every website needs to be are safe, fast, and cost-effective. Static websites are all three. Publishers, who have lost patience with the ongoing maintenance, outsized cost, and unreliable performance of dynamically generated websites, are now embracing the built-in benefits of going static. And as more tools and services rise to meet the needs of static websites, it’s quickly becoming the case that most—if not all—websites should be static from the start.

So just how fast, secure, and affordable are static sites? By only serving static HTML files—with most weighing in at only a few dozen kilobytes—the cost of hosting a website falls to pennies per day. When those lightweight static files are distributed on a content-delivery network (CDN), loading times evaporate. A well-designed static website on a CDN can load in a just few dozen milliseconds. Static sites, with their speedy load times, are more likely to be preferred by search engines and rise higher in the results. And when that blog post or landing page goes viral, there’s no chance that the site will go down. Best of all, static websites are secure by default because there’s no data collected, there’s no session tokens, and there’s no security holes for an attacker to breach. It’s a simple solution. It just works.

The speed, security, and affordability of static sites is a consequence of their simplicity. So perhaps the biggest reason why we’ve seen an explosion in the number of static sites is that they’re just less complicated. Together, we’ve come to realize that most sites are just better if they’re left static. Static site generators like Jekyll, Hugo, and Gatsby have made it simple to quickly create all the pages a static site needs by reducing them to a handful of design templates and content folders. Why pay to keep a rendering server running nonstop just to deliver a simple blog post that probably won’t ever change after it’s published? Why build up an entire database infrastructure behind a single product landing page?

As the popularity of static sites has grown, new tools and solutions have arisen to eliminate some of the downsides to choosing to go static, like providing a user-friendly CMS (TakeShape), handling user-generated content (Formstack), and integrating with third-party APIs (edge functions). Even better, these new tools are informed by the same values of speed, security, and simplicity. An entire new software architecture, JAMstack (Javascript, APIs, and Markup), has rapidly grown out of this static-first approach. By building beautiful web applications on the foundations of a static site, all the tools up the stack get to be simpler, faster, and more secure, as well. It’s now possible to have the best of both worlds: a simple static website and a richly-interactive web application, at the same time.

One problem to going static used to be content management: none of the existing solutions like Wordpress or Drupal work with this static-first approach. As a consequence, there’s been incredible progress reimagining what a CMS should be for this new static era. Rather than have an old, monolithic CMS managing the content, rendering the content, and serving the content, the next-generation of CMS treat their content as a service. These new headless CMS, so-called because they don’t attempt to render a dynamic website at all, instead just publish their data for static site generators to grab and use when they’re building a site. For example, TakeShape allows its users to create and edit content like posts, pages, or products—and creates a GraphQL API for it. On its own, this API could provide the content for any static site; but to make things faster and easier for developers, TakeShape has created their own static site generator that talks to the API for you. Like the static sites they feed their data to, a content-as-a-service CMS ends up being faster, safer, and cheaper than a legacy system like Wordpress, while keeping the rich web editing interface we’ve grown familiar with.

Another problem static sites have faced is receiving and handling input from users, from simple contact forms to complex checkout systems. The serverless movement has grown to solve this problem elegantly. With a more complete service like Netlify or just a one-off AWS Lambda function, input handling and server-side code is now easier to develop, cheaper to run, and more secure than ever before. It’s not surprising that the serverless and static trends have grown alongside one another—they’re a perfect match. Together, they vastly simplify the existing complexity of creating a website.

Finally, we no longer have to choose between a static site and web applications. We can have our cake and eat it, too! Progressive enhancement, a design best-practice of providing a consistent baseline experience and then building upon it with more sophisticated functionality, has totally changed how we think about delivering interactivity on the web. With the increasing sophistication of client-side Javascript frameworks like React, Vue, and Angular, it’s now possible to deliver a simple static site that progressively unfolds into a highly functional web application. Everybody can have a reliable and delightful experience, from the most data-constrained mobile devices to the fastest desktops with a hardwired Gigabit network connection. More importantly, it means that now there’s even fewer reasons for websites not to start from a lightweight, speedy static foundation.

It’s clear that bloated, unwieldy, and insecure dynamic websites are quickly becoming obsolete. Leaving those tools in the past, we should work to build a web where speed, security, and affordability are easy to achieve. It’s simpler than ever, with tools like TakeShape to publish a static site, keep it updated, and even give it the rich interactivity we’ve come to expect on the web. The future of the web is static, and it’s going to stay that way.

Interested in CMS for Static Sites?

TakeShape is a headless GraphQL CMS and static site generator. At TakeShape we're committed to building the best CMS tools possible for developers and content creators. It's easy to get started and we offer flexible pricing. Sign up for an account today. Developer projects are always free!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .