What is JAMstack?

📌 This is just some demo content. This article comes straight from "Cloudflare's Performance Learning Center" at this address: https://www.cloudflare.com/learning/performance/what-is-jamstack/ The canonical URL has been set to forward SEO benefits to the original authors.

JAMstack is an approach to frontend web development (the construction of content and interfaces that users interact with). It allows developers to quickly create and efficiently serve static websites to users.

In a JAMstack web application, as much HTML as possible is pre-built and stored in a content delivery network (CDN). Instead of running a monolithic backend application on the server side to generate dynamic content, dynamic components of the application are based on APIs. Ideally, this results in a much faster user experience and a much simpler developer experience.

What does the term 'JAMstack' stand for?

JAM stands for _J_avaScript, _A_PIs, _M_arkup.

Stack refers to the combination of all these things in a way that allows developers to build applications and websites.

A JAMstack website or application is constructed using only these three elements. The static website that the user sees is built out of HTML and CSS markup code. JavaScript is used for any necessary dynamic functionality, and for calling APIs. APIs provide the application's backend.

Suppose Bob builds a web application that provides updates on European football scores. Bob creates a backend application that runs on a server he operates and constantly checks the scores of the latest matches. When a user opens up the web application, Bob's server generates HTML pages that display those scores, then sends those pages to the user. However, Bob's web application is somewhat slow: before a user can view those pages, they have to wait for the backend application to run, for the HTML to be generated, and for the HTML to reach their device.

Now suppose Bob rebuilds his web application using a JAMstack approach. Instead of writing an entire backend application, he creates a series of lightweight HTML pages that he stores in a CDN. When a user opens up the application, the CDN immediately delivers the corresponding HTML pages to the user, since the CDN is far closer to the user than Bob's server. The application also makes an API call in order to fill out the live football match scores on the page. Bob's web application now loads very quickly for the user, and from Bob's perspective, there is much less need to write code that will handle the backend, server-side work of updating the scores.

What is a static website?

A static website is made up of one or more static webpages, which are HTML files that load in a browser the same way no matter who loads the file. Because static webpages consist solely of HTML, with no additional code that needs to run in the browser, they can load extremely quickly. (To see what HTML code looks like, right-click on a webpage while using the Chrome browser and click "View Page Source".)

By contrast, dynamic webpages are different each time they load. In order to provide a more interactive, personalized user experience, dynamic webpages change based on the user opening the page, the location of the page load, the time of day, and any number of other changing data inputs. When a dynamic webpage loads, code has to run either on the web server that hosts the webpage or within the user's browser. This reliance on running code can slow down the user experience.

Dynamic webpages are not the only way to create a modernized user experience. A mostly static JAMstack website can still provide a dynamic, personalized experience for users by occasionally generating new static content or calling APIs to fill out updated content.

How do JAMstack applications handle backend functions?

In application development, the backend is the code that runs on a server behind the scenes. Usually a user is not aware of what is happening on the backend while they use a website or application. While JavaScript and markup dictate the way a JAMstack application appears to a user, it still needs backend functions in order to work. JAMstack handles this by calling APIs using JavaScript.

Using APIs means that JAMstack developers do not have to construct their own backend applications. They can build on already-existing APIs to make their websites and apps work.

When developers want to build their own functionality for an application, they can create a new API. APIs can be reused in a variety of contexts, so when developers build their own APIs for the backend, they should only need to construct that functionality once in order to use it in future applications.

How does JAMstack relate to microservices?

Using APIs allows JAMstack developers to take a microservices approach to the backend. In a microservices architecture, an application's backend is broken down into smaller chunks that run on command - just as a JAMstack application calls various APIs when necessary, but otherwise does not need backend support.

It is also possible to construct a JAMstack application that uses a partially or fully serverless backend. Serverless functions are small, reusable snippets of code that run on demand. However, a serverless architecture often requires a more hands-on approach to the backend by the developer, since they are essentially building the backend application themselves instead of calling APIs (although they do not have to worry about provisioning servers).

What are the benefits of using JAMstack?