JAM stack - what it is?

JAM - it’s an acronym form JavaScript, APis and Markup. It’s a modern architecture for fast, client-side oriented web development. It is a static website - no running servers are needed to show the content. For example, the site might be hosted directly from the CDN.

• JavaScript - handles interaction via external APIs, whole request/response cycle. All logic happens on the client side. A modern JS framework might be used (Vue, React, Angular) but good old plain vanilla js is sufficient. You can use fetch API + ServiceWorkers and have Progressive Web App.
• Markup - speed’s up content generation.
• APIs - That is a key to success. All potential server-side logic is extracted to external APIs. It might be your own, or third-party solutions

It is a perfect solution for projects that haveinfrequent writes and potentially massive reads. An ideal example is a blog. Actually, this blog might be considered a JAM stack. It uses Jekyll with Markdown as a template engine. Before deployment, it generates pure .html files which are hosted directly from Github pages. It does not have a database, where data is stored.

Great features of JAM stack

It’s fast! No database querying, no template parsing means that you get your content almost immediately. Because all logic happens on client-side and you can leverage client cache. You can make your site offline available - remember it’s just a html page!

Easy & Fast deployment cycle! - just generate your html and push it to the storage. That’s it, it works.

Easy to scale it up - for example using AWS S3 + CloudFront - your content scales up automatically and can handle a very high load.

Problems

• SEO - if JS is needed to show content to your page - web crawler might have problems. There are workarounds to this problem - but I am not a SEO expert.
• Authentication - if you have a lot of areas that require authentication it might be tricky to implement this properly.

What can I use?

Generators

• VuePress
• nuxt.js - vue clone of next.js
• Jekyll - ruby stastic site generator
• Hugo - go lang static site generator
• Gatsby.js - React static site generator. It support’s GraphQL

APIs

• Wordpress - really you can use is as a headless API
• Netlify CMS - opencource content management
• Strapi - Node.js CMS

resources

• JAMstack org
• Dev to blog post
• Podcast about JAM stack with Netlify CEO