Jamstack explained

Jamstack explained

Schema

JAMstack schema

JAMstack

JAMstack is a concept / architecture for a web stack based on client-side JavaScript, APIs and pre-rendered Markup.

The core of this concept is the pre-rendered static web site in HTML.
This in conjunction with some of the following technologies used on the client-side:

  • dynamic content powered by JavaScript
  • client-side APIs or by using APIs from the server-side (RESTful API CMS / web services)

Mostly we can divide the web stack in 3 parts:

  1. Content stored in a headless or decoupled CMS, markdown with metadata in frontmatter or markup with metadata, ...
  2. A static site generator (SSG) to generate the static HTML pages. This is not necessarily present when using a headless CMS (API only) with an app, pwa (progressive web application), client-side JavaScript only depending on APIs for content.
  3. The static generated HTML pages (frontend web site)

Headless vs decoupled CMS

A headless CMS only provides content/data with a RESTfull API. No content is pre-rendered
A decoupled CMS is a headless CMS with the addition of pre-rendering static pages, and on the backend CMS: templating, editing interaface, authentication, ...

Markdown / markup

When using no CMS, a static site generator (SSG) is used with data coming from different possible sources
- markdown with metadata stored in YAML front matter inside a --- block
- markup, HTML: metadata could be stored in comments or meta property attributes inside the HTML code
- JSON data files
- ...

Static site generators

A lot of static site generators (SSG) exist to simplify the task. Use one that uses a technology you know or already use

- Jekyll (ruby, supported by GitHub)
- Gatsby.js (Node.js JavaScript, React, GraphQL)
- Eleventy (Node.js JavaScript)
- Hugo (golang)
- ...


Or write it in the programming language you already use
- PHP
- JavaScript
- ASP
- ...

Using a template engine (Twig (PHP), Liquid (Ruby), EJS (JavaScript), Handlebars.js, ...)

Limitations / advantages

JAMstack eliminate limitations of a traditional coupled (monolithic) CMS system

Advantages:

- performance
- security
- reduced complexity
- no critical updates
- web site not going offline / maintenance
- low cost scaling
- simple caching
- removes lots of points of failures
- can serve more connections
- usable in CDN

Disadvantages:
- Some functionalities provided by a CMS out of the box or with plugins must be programmed or by using an external API provider that most likely isn't free.