Techscrypt

What is the JAMStack

jamstackcms

JAMStack is an architecture pattern designed to build websites and apps. It makes apps faster, secure and scalable. The primary principles behind the JAMStack are decoupling and pre-rendering.

Decoupling

This is the process of separating services to make them easier to manage and deploy. It makes each individual piece of the application much more agile, since it serves a specific purpose.

When individual services are independent of each other, they can be easily upgraded or completely replaced. Note that when we say they are independent, they might still be producers/consumers of information sent to/from other services, but as long as the data contract between them remains the same, one service does not care what underlying architecture is powering another service. For example, if service A expects another service B that provides an API <some-url>/users/ to return a list of users, it does not care if the API B is implemented using Java, Python or Javascript. As long as it gets the expected data in the correct format, service A is happy with the API provided by B. JAMStack architecture is a strong advocate of Decoupling services.

Pre-rendering

Prerendering is the process of preloading all the elements that are required for viewing a web page before it is requested. This is enabled by generating the web page at the build stage rather than doing it on-demand when a user visits the page. Prerendering is also enabled by serving static site content from highly available and distributed networks called CDNs (content delivery network). This enables search engine optimization and reduces the server side performance impact since we are not building the web pages on demand.

JAMStack components

The JAMStack architecture can be built using 2 components

  1. Static site generator
  2. Content management system

Static Site Generator

This is a framework that you can use to build static sites. Ideally, it will consume some content and produce a static website that can be directly deployed to a CDN.

Popular static site generators include

Generator Language/Framework
NextJS Javascript / ReactJS
GatsbyJS Javascript / ReactJS
Hugo GOlang / GO templates
Jekyll Ruby / Liquid

Content Management System (CMS)

This is a system that can provide an API for the static site generator to consume. Essentially the CMS provides a way to create and manage your content. This content can be consumed by another service. However, the CMS is not concerned with what service is using the API that it provides. In this case, we want to use the static site generator to build a website, but any other service could potentially use our CMS as well.

Popular content management services include Netlify CMS, Ghost, Strapi, etc.

References

  1. JAMStack
  2. What is a CDN
  3. Content management system