The Definition

A JAM Stack application is “An application that uses only the core building block of JS, APIs, and Markup”. By its strictest definition, it is a serverless JS application plus an additional requirement that further increases efficiency — HTML markup is generated during build time only. During build, data is fetched via API request for each page, and HTML is subsequently hydrated with data and saved in the bundled production version. Every page can be served statically.

You might be thinking, that sounds like a pretty restrictive platform on which to build an application — what if I need user login, or to save comment data on the site? What if I want to sell things on the internet? And that’s true, in reality there are very few applications that are actually pure JAM Stack. The only sites that can afford to be are online documentation pages, or other truly static sites.

But that’s ok. the JAM stack is meant to be an ideal, not a strict opinionated framework. What that means is that you should start from the perspective of thinking about how you can move as much of your application to be statically rendered and cached, and then what you can’t, you can use JS and JSON APIs to handle. Need ecommerce? there’s an API for that. Need to store data in a serverless mongo DB? There’s an API for that too.

Who’s Using it Now?

The JAM Stack is in use in many production applications. The one that gets a lot of attention is Smashing Magazine, a popular front end development website featuring articles, tips and tricks, etc. Major production applications have also been developed by companies such as Nike and Peloton on the JAM Stack, though it should be noted both companies have built promotional sites, and not their primary site with this architecture.

Should I Use It For My Next App?

Yes and no. The JAM Stack is a great proof of concept that highlights some best practices in modern development: Using CMSs to increase app edibility, caching what you can via CDN, and thinking about static rendering. The “Pure JAM” Stack is too narrow to be used in all but a few select cases currently. The emergence of frameworks like Next/Nuxt.js that focus primarily on helping developers build JAM-Centric apps shows me that the pattern is gaining popularity, so in the following years I expect a move towards JAM, but not to a pure JAM state.

The Components in Detail

Here are the component definitions for the JAM stack — how you use them, especially the API part — is up to you. More on that later.

JavaScript: Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client.

APIs: All server-side functions or database actions are abstracted into reusable APIs, accessed over HTTPS with JS. Be it SaaS, third-party services or custom-built.

Markup: Templated markup should be prebuilt at build time, usually using a site generator for content sites, or a build tool for web apps.

#jamstack #coding #programming #js #javascript #api