JAMstack Notes

JAMstack

A modern web development architecture that focuses on decoupling the front-end and back-end, utilizing JavaScript, APIs, and Markup.

JAM

JavaScript, APIs, and Markup: the core technologies used in JAMstack architecture.

JavaScript (in JAMstack)

Handles interactivity and data fetching via APIs in a JAMstack site.

APIs (in JAMstack)

Provide backend functionality, often through headless CMS, third-party services, or custom APIs.

Markup (in JAMstack)

Static site generators pre-render content into static HTML files.

Primary purpose of JAMstack

JAMstack decouples the front-end and back-end, pre-renders static content, and uses CDNs for faster and more secure delivery, reducing the load on servers.

How a JAMstack website is built and served

Static content is generated using SSGs, stored on a CDN, and APIs are used to retrieve dynamic data when needed.

Four main benefits of JAMstack

Faster loading times, reduced exposure to attacks, simplified workflow, and high scalability.

Comparison between JAMstack and LAMP stack

JAMstack is a modern architecture focused on static content and decoupled backends, while LAMP stack is a traditional server-rendered application architecture.

Why choose JAMstack over LAMP

Modern front-end frameworks, simplified workflows, and improved performance and scalability.

Key steps to create a basic JAMstack website

Plan content structure, generate static pages, use APIs for dynamic features, and host on a CDN.

APIs use in JAMstack architecture

Enable dynamic features such as comments and weather updates in a JAMstack site.

Example of a JAMstack technology stack using Vue.js

Vue.js + Nuxt.js + Contentful + Vercel

How each JAMstack component contributes to the quality attributes

JavaScript: Enhances interactivity and performance.
APIs: Provide dynamic content and functionality.
Markup: Ensures fast loading times and SEO benefits.