// Tutorial //

JAMstack: The What, the Why and the How

Published on December 12, 2019
Default avatar
By Chimezie Enyinnaya
Developer and author at DigitalOcean.
JAMstack: The What, the Why and the How

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Introduction

Web development often involves the use of different development stacks, including the LAMP stack, the MEAN stack, the MERN stack, etc. JAMstack is another stack that offers some unique benefits to developers. This article will discuss those benefits and some general definitions and terms in order to provide an introduction to the JAMstack.

What is the JAMstack?

Static websites have been growing recently in use and functionality. No longer a collection of HTML and CSS files, static websites do things like process payments, handle realtime activities, and more. To call these sites “static” undermines and under-describes their functionality. Hence, the term JAMstack.

JAMstack stands for JavaScript, APIs, and Markup. According to the official website, JAMstack means:

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

The term was coined by Mathias Biilmann, co-founder of Netlify.

With the JAMstack, we no longer talk about specific technologies such as operating systems, web servers, backend programming languages, or databases. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a more streamlined developer experience.

Why the JAMstack?

When should you consider using the JAMstack? Some reasons you might consider the JAMstack include:

  • Faster performance: Because a JAMstack website is pre-built HTML and assets, it can be served over a CDN.
  • Higher security: JAMstack websites reduce server and database surface area vulnerabilities.
  • Lower cost: The cost of running a JAMstack website is generally lower than comparable alternatives since it uses fewer resources.
  • Better developer experience: With the JAMstack, there is no tight coupling between the application backend and frontend. This means that you can select from among different CMS and content infrastructure options, removing the need for separate stacks to maintain and serve content. Using JAMstack also simplifies the process of using third-party services like Algolia and Netlify Forms.

There are also a growing number of services that integrate dynamic functionality into JAMstack websites, including:

How To Build with the JAMstack

In order to build a project using the JAMstack, it 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 frontend framework like Vue.js, React, Angular, 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 pre-built at deploy time, usually using a site generator like GatsbyJS, Nuxt.js, or Hugo for content sites, or a build tool like Webpack, or ParcelJS for web apps.

With those in mind, the following projects are not JAMstack projects:

  • A project 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.

When building a project with the JAMstack, keep the following best practices in mind:

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

Conclusion

In this article, you learned about what the JAMstack is and why you might consider it for your next project. You also learned about project requirements for JAMstack sites. For examples of websites and web apps built with the JAMstack, you can also look at these official examples.

You can learn more about the JAMstack by going through the official website and the resources section.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!