Building a static website or web application seems like a project from the late '90s when we were just started getting excited about somewhat dynamic web and basic javascript.

Links were built by hand, and it made site navigation fragile.

The introduction of database-managed CMS changed everything - as a developer, you could create a layout, customize the theme, and hand off a complete site to your customer for content entry.

Why abandon this and step backward?

We came full circle - take a concept of a static site, apply some modern magic to make things run more efficiently, and suddenly quite a few problems are solved.

• Increased security.
  There is no backend; therefore, there is nothing to compromise. No bots are trying to break into your admin interface.
  
• Reduced complexity.
  Sure, you still need to patch up your VM. But there are no constant patches required to keep your modules and plugins up to date.
  
• Reduced cost.
  You don't need to install and run Node.js - or anything else really - to host your site. You don't need to spin another VM to run a database. Hosting becomes very inexpensive in comparison, just throw static files on CDN. You also do not need to count for time monitoring APIs, microservices, and databases.
  
• Increased reliability.
  You have a single point of failure - the host. But there is no database, web host, or external APIs to fail. Even externally hosted images can be downloaded and processed during build time, instead of linking to the host when requested.
  
• Increased performance.
  Instead of making round trips to the database, you load static content. Less traffic==less latency==faster and better user experience.
  
• Easy scaling - add CDN for global delivery.
  
• Easy versioning.
  Use git for your project and have a build-in history of your content. Want to answer the question, "Who made the change to this page three years ago?" Done.
  
• Non-engineer-friendly maintenance.
  Let's say you are creating a new website for a small business or nonprofit, and you've decided on WordPress. First off, kudos for steering your client away from using Facebook as the only source of internet presence. While there is nothing wrong with cross-promotion, it's always safer to build your brand on your territory. Your client got specific requirements on layout and functionality, you've set them up, and the site goes live. But what about ongoing maintenance? Who will be doing plugin and WordPress updates? What if future updates break the plugin, or it becomes not compatible without migration or conversion?

Does performance matter?

Absolutely. The devices may be powerful and internet average speeds faster, but you can still quickly end up with a site that takes over 5-7 seconds to load if you are not careful.

Result?

You'll see an increased bounce rate, higher shopping cart abandonment percentage, lower ranking in searches.

From personal experience, static sites feel incredibly lightning fast.

Use Cases

What would be the functional use cases for static websites?

• Portfolios
• Tutorials
• Newsletters
• Blogs
• Dashboards where data updates once a day
• Company website
• e-commerce

What if you are building something complex that requires dynamic functionality? 

For example, an e-commerce site would need inventory management, contact form, search capabilities, and shopping cart integration. 

You can integrate with Snipcart or Stripe, GetForm or Netlify Forms, Algolia for search, and Prismic or Storyblok to create and manage product templates. 

Use Netlify Functions or AWS Lambda for server-side functionality - or write and host your solution for managing things like session keys and webhooks processing.

Architecture pattern - Jamstack

Jamstack is a modern web development architecture pattern that may include JavaScript (for interaction), API(for data), and Markup. 

The main idea is a static website that doesn't require a web server or a backend that can be served off CDN and is build and deployed automatically and atomically. 

The force behind Jamstack is Netlify, a San Francisco-based company whose mission is to provide a web development platform with build/deploy/host capabilities for fast and secure websites and apps.

What about navigation? Do I build links by hand?

This is where modern magic comes in.

At the moment of writing, there are well over 400 open-source static site generators available. You can pick your preferred language (Perl, Python, JavaScript, Ruby, Lisp, PHP, F#, Haskell, C) and template support, so the learning curve is rather small.

Configure the project so that static generators can figure out how to build backlinks. If the build is successful, the resulting files can be deployed to the server. To make life easier, set up automatic deployment triggered by git commits (see https://www.netlify.com).

The workflow then may look like this:

• Create transformation rules
• Add content
• Run build
• If everything checks out, commit your changes - your entire site is in git
• The automated build is triggered, and your site is deployed

Adding content

Where should you store content for your static site? The best approach depends on your goals.

You can reuse existing content stored in WordPress or Drupal. Pull content feeds from third-party providers. Use a database or file system to store structured or unstructured content. Or take advantage of headless CMS like Contentful, Storyblok, or Sanity.

Using headless CMS

If you ever spend time migrating a substantial amount of content from one platform to another - or chasing down the reason for some obscure paragraph change three years ago, headless CMS may be worth a look. It serves as a code repository for your content, providing management, history, and versioning in a collaborative environment.

Managed content can be accessed via REST APIs, giving flexibility of using the same material with any front-end solution of your choosing.

Want to build your own e-commerce site? Create a product description using a headless CSM schema.

React and Gatsby

If you know React, Gatsby is the obvious choice for a static website generator. Gatsby takes React components (that can be further enriched by consuming local or remote data sourced by GraphQL), applies CSS styling, and turns rendered results in the static site.

It boasts vibrant developer community support, providing themes, multiple starter projects (similar to create-react-app), and a variety of plugins to extend functionality.

Few other features worth mentioning are hot reloading of content and code, minification, responsive images, and the ability to add authentication.

Hosting

If you like simple: S3 bucket, GitHub pages, Firebase, CDN

If you like to use a platform specifically built for Jamstack - Netlify, Vercel

Another tool in the toolbelt

Should you use nothing but Jamstack for any new website and application? 

Probably not. 

Software development evolves very quickly - every few years, a new pattern appears that meant to solve some significant pain points and usually ends up introducing a few new ones. 

But it is a great pattern to try out, a truly fantastic tool in your development toolbelt. It is maturing and will support more use cases in the future.