Date: 20-07-2019
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:
- Content stored in a headless or decoupled CMS, markdown with metadata in frontmatter or markup with metadata, ...
- 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.
- 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.