Jamstack WTF

Create a new Jamstack site in 60 seconds jamstack.new

Jamstack has revolutionized the way we think about building for the web by providing a simpler developer experience, better performance, lower cost and greater scalability.

This simple guide will help you understand why it exists and how to get started.

Table of contents

  1. What is Jamstack?
    1. History
    2. Meaning
    3. Benefits
    4. Best practices
    5. Workflow
    6. Timeline
  2. Getting started
    1. Development
    2. Deployment
    3. Dynamic parts
    4. CMS
  3. Resources
  4. About

What is Jamstack

History

"Jamstack" was originally cased as "JAMstack" where "JAM" stood for JavaScript, API & Markup.

"A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup"

— Mathias Biilmann (CEO & Co-founder of Netlify).

JavaScript
APIs
Markup
JAM

JavaScript

Dynamic functionalities are handled by JavaScript. There is no restriction on which framework or library you must use.

APIs

Server side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services or your custom function.

Markup

Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a Static Site Generator.

Meaning

Today, Jamstack is used to more broadly refer to an architectural approach for building websites. Though there are varying opinions on what exactly Jamstack means today, these attributes are present in most sites that claim to be Jamstack sites:

Decoupled

The front end uses tooling separate from the back end. The front end is typically built using a static site generator. And the back end is often integrated with the front through the use of APIs used during the build process. Server-side processes can also be run using serverless functions.

Static-first

While various practices exist for introducing dynamic elements to Jamstack sites, most are pre-rendered, which means the front end was built and compiled into HTML, CSS, and JavaScript files.

Progressively enhanced

JavaScript can be introduced to pre-rendered sites on an as-needed basis, thus increasing performance in the browser.

Benefits

Here are the main benefits provided by the Jamstack.

Faster performance

Serve pre-built markup and assets over a CDN.

More secure

No need to worry about server or database vulnerabilities.

Less expensive

Hosting of static files is cheap oreven free.

Better developer experience

Front end developers can focus on the front end, without being tied to a monolithic architecture. This usually means quicker and more focused development.

Scalability

If your product suddenly goes viral and has many active users, the CDN seamlessly compensates.

Best practices

The following tips will help you leverage the best out of the stack.

Content delivery network

Since all the markup and assets are pre-built, they can be served via CDN. This provides better performance and easier scalability.

Learn more

Atomic deploys

Each deploy is a full snapshot of the site. This helps guarantee a consistent version of the site globally.

Learn more

Cache invalidation

Once your build is uploaded, the CDN invalidates its cache. This means that your new build is live in an instant.

Learn more

Everything in version control

Your codebase lives in version control system, such as Git. The main benefits are changing the history of every file, collaborators and traceability.

Learn more

Automated builds

Your server is notified when a new build is required, typically via webhooks. Server builds the project, updates the CDNs and the site is live.

Learn more

Workflow

Here's an ideal Jamstack workflow:

Develop
Version Control
Automated build
Static assets
Atomic deploy
Pre-render & invalidate cache
Update CDN

Timeline

A brief history of Jamstack shows its growth in popularity.

2015

Static sites are becoming popular due to the popularity of certain SSG such as Jekyll.

2016

A small group of developers believe that Static sites don't have to be static and the term "Jamstack" comes to life.

2017

The modern web revolution starts prioritising the importance of performance, scalability and developer experience. The term Jamstack starts to be adopted by a wider group of developers and the first enterprise Jamstack projects are announced.

2018

Tools like Netlify, Gatsby and Contentful have helped promote the term and the community is rapidly growing. This was also the year of the first Jamstack Conference.

2019

The year that Jamstack went mainstream. An explosion of new tools and services enter the market to support Jamstack sites.

2020

"JAMstack" becomes "Jamstack" and brought with it a new brand for the community. ZEIT becomes Vercel and begins blurring the lines of what Jamstack really means as Next.js grows in popularity, largely due to its ability to combine server-side and static rendering in the same site.

2021

While Jamstack continues to expand, confusion about what it really means has become a common theme. And yet, tools like RedwoodJS and Blitz.js show us that Jamstack isn’t slowing down.

2022

Jamstack continues to grow. One of the significant releases this year was the beta version of Astro.js 1.0.
Source: SnipCart

Getting started

Development

However you decide to generate your HTML assets is up to you. The three most common approaches are:

Hand coding

Simple and effective method of writing HTML, it's ideal for super simple pages.

Static Site Generators

Most Jamstack sites are powered by a static site generator. There's no enforcement on which SSG you decide to use.

See more SSGs

Site Builders

Tools that bring Jamstack to less technical users, while enabling developers to customize sites through modern tooling.

Deployment

Your built site needs to be hosted somewhere. There are great services that provide this for free and with ease.

See more deployment services

Dynamic parts

Jamstack websites don't have to be static. There are great services available to help bring some dynamic data to your product.

Custom functions

You can also abstract your own functions into reusable APIs.

Custom data

As you add features to your site, you may want to store user profiles, shopping cart data, game levels, or other dynamic data. There are many DBaaS (database as a service) tools out there today.

Comments

Many Jamstack products have dynamic comment sections. These are typically used on blogs.

Forms

A great way to interact with your audience. Tools like Netlify support this by default, though there are other form-based services.

E-Commerce

Setting up an online store on the Jamstack has never been easier.

Search

Rely on third party services to integrate a search functionality.

See more static services

CMS

Jamstack sites can also be controlled via a Content Management System, these are typically known as Headless CMS. Once a change in the CMS is made, a new build of your site will be triggered and then deployed as static assets.

See more CMS services

Resources

Here's a list of hand-picked Jamstack resources ranging from learning materials to third party services.

Services

Articles

Videos

Books

Podcast

Newsletter

Report

Community

About

This project was originally built by @peduarte and presented at the Jamstack meetup in London. It is maintained by Stackbit.

The goal of this project is to gather the concept of Jamstack in a straight-forward way to encourage other developers to adopt the workflow.

Built with the help of Astro, Tailwind CSS, Netlify, and Github.

Jamstack.