What is JAMStack?

Development Sep 18, 2018

JAM is an acronym for JavaScript API Markup. What does it mean though? It is not a framework or a specific technology. It is more of an architectural approach. A modern way web content is built, managed and distributed.

According to the official site, JAMStack means:

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

One of the key parts of JAMStack Architecture is switching to static. That means, using a Static Site Generator to build your site into plain old HTML, CSS, and JS, which does not change and can be served over CDN. If you need to make a change, you just rebuild the whole site. It is fast since most of the site remains the same. Moreover, the deploy takes very little time as it means only copying a bunch of files.

One important part to realize is that static does not mean limited interactivity and static data. The key part is that HTML and JS files served by the server are static. They're not changing. However, you still have JavaScript on the client. You can do everything you do in JS. That means you can fetch any data you need through an API call (usually REST or GraphQL) once your static page is loaded. The key difference is that the HTML with dynamic data is not constructed on the server, but rather on the client. Of course, in many cases, your site is really static and no API calls are necessary.

How to build with the JAMStack

We have already seen what the JAMstack stands for. So to build a project using the JAMstack, the project must meet the following criteria:

JavaScript: Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any front-end framework like React, Angular, Vue.js, etc. or even vanilla JavaScript.

APIs: All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTP with JavaScript. These can be custom-built or leverage third-party services.

Markup: Templated markup should be prebuilt at deploy time, usually using a site generator like NextJS, GatsbyJS, etc. for content sites, or a build tool like Webpack, ParcelJS etc. for web apps.

When building a project with the JAMstack, you should consider the following best practices:

The entire site should be served on CDN.
Employ atomic deploys.
Instant caching invalidation.
Everything should live on Git.
Markup builds should be automated.

Your project is not built with the JAMstack if:

Built with a server-side CMS like WordPress, Drupal etc.
A monolithic server-run web app that relies on a backend language like PHP, Node, or any other backend language.
A single page app (SPA) that uses isomorphic rendering to build views on the server at runtime.

Why JAMStack?

The JAMstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

Having seen what the JAMStack is, you might ask why go the JAMstack route? Below are some reasons you should consider the JAMStack:

Better Performance

Why wait for pages to build on the fly when you can generate them at deploy time? When it comes to minimizing the time to first byte, nothing beats pre-built files served over a CDN.

Higher Security

With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced. You can also leverage the domain expertise of specialist third-party services.

Cheaper, Easier Scaling

When your deployment amounts to a stack of files that can be served anywhere, scaling is a matter of serving those files in more places. CDNs are perfect for this, and often include scaling in all of their plans.

Better Developer Experience

Loose coupling and separation of controls allow for more targeted development and debugging, and the expanding selection of CMS options for site generators remove the need to maintain a separate stack for content and marketing.

Summary

In this article, we saw what the JAMStack is, what is not JAMStack, how to build with the JAMStack, why we should consider using the JAMstack for our next project. To serve different purposes like scalability, clear separation, using best-fit technologies, etc. For websites and web apps built with the JAMstack, do check out these examples.