cloudparts

Jamstack

Build every page into plain files ahead of time and serve them from a CDN, and reach anything dynamic through JavaScript calling APIs and functions, so no application server renders pages on request.

1 technology on this page ↓
Live model
What you’re watchingPage requests (blue) are answered by the CDN from prebuilt files; on the rare miss it fetches the file from the current deploy. Calls that need a live answer (orange) go from the browser to APIs and functions. Now and then a push or a CMS publish (purple) triggers a build that renders every page again and publishes a new deploy.

How it works

A traditional site renders each page when someone asks for it: a server runs the application code, queries the database and sends back HTML. Jamstack moves that work to build time. A static site generator such as Hugo, Jekyll, Eleventy, Astro or Next.js reads the templates, the Markdown and any data from a headless CMS or an API, and writes every page out as HTML, CSS and JavaScript files. The folder is then published as one deploy. On Netlify a deploy is atomic: Netlify uploads only the files that changed, and nothing goes live until all of them are there, after which the new version switches over on the CDN at once. Every deploy also keeps its own permalink whose content never changes, and rolling back means publishing one of the earlier deploys again, which Netlify says is instantaneous. Readers get files from the nearest CDN location; no application server or database sits on the read path. Whatever must be live, such as search, sign-in, payments or a form, runs in the browser as JavaScript calling third-party APIs or your own serverless functions. When content changes, the site is rebuilt: a CMS can call a build hook, a URL that starts a new build and deploy when it receives a POST. The cost is the build. It grows with the number of pages and is capped by the host: Cloudflare Pages stops a build after 20 minutes and allows 20,000 files per site on its Free plan, and GitHub Pages times out deployments after 10 minutes. Frameworks soften this with incremental regeneration: Next.js can serve a cached page and rebuild just that page in the background once its revalidation window, such as 60 seconds, has passed.

Think of it as

A newspaper instead of a short-order cook. The paper is written and printed overnight and stacked at every newsstand, so anyone can grab a copy without waiting, however many readers turn up. For the few things that need a live answer, such as placing a classified ad, you call the paper’s phone line. A correction means printing a new edition, not editing copies already sold.

Reach for it when

  • Content that changes far less often than it is read: documentation, blogs, marketing and product pages
  • Traffic that spikes without warning: a CDN serving files absorbs it, with no application servers to scale
  • You want a small attack surface and simple hosting: on the read path there are only files, no server code or database to exploit
  • A Git-based workflow with a preview for every pull request: Netlify and Cloudflare Pages build a separate preview URL for each change

Think twice when

  • Content that changes every few seconds, or pages that differ for every user, such as dashboards and feeds: rebuilding files can’t keep up, so render on request or in the browser
  • Very large sites without incremental builds: build time grows with page count, and hosts cap it (20 minutes on Cloudflare Pages, 10 minutes for a GitHub Pages deployment)
  • Most of the product is server logic and data: an app made of forms, transactions and permissions gains little from prebuilt pages and fits a PaaS or a full-stack framework better
  • Calling many third-party APIs straight from the browser: each one is another network round trip, another vendor and, unless it is meant to be public, a key that can’t live in client code

A real example

A documentation site has 2,000 Markdown pages in a Git repository and is built with Hugo on Cloudflare Pages. A push to main starts a build that must finish within 20 minutes; the output stays well under the Free plan’s 20,000-file limit and 25 MiB per file. Each pull request gets its own preview URL, so reviewers read the rendered page before merging. Readers fetch pages from Cloudflare’s network, with no server or database behind them. Search runs in the browser against a hosted search API, and the “Was this helpful?” form posts to a small function. When a writer fixes a typo in the CMS, the CMS calls the build hook and the whole site is rebuilt and redeployed.

Used for jamstack

Jamstack is something products do, not a kind of product. These are often used for it, grouped by what they are.

What each provider calls it

AWS
AWS Amplify Hosting: connects a Git repository (GitHub, Bitbucket, GitLab or AWS CodeCommit), builds on each commit and deploys static, single-page and server-rendered apps to the AWS global CDN
Google Cloud
Firebase Hosting: deploys static and single-page web apps to a global CDN with a single command, caching each uploaded file on SSDs at CDN edges
Azure
Azure Static Web Apps: builds on every push or merged pull request to a watched GitHub or Azure DevOps branch, serves static assets from globally distributed points, and hosts APIs on managed Azure Functions
Open source & others
Static site generators: Hugo (Apache 2.0), Jekyll (MIT), Eleventy, Astro, Gatsby (MIT), Next.js (MIT). Git-based hosts: Netlify, Cloudflare Pages, GitHub Pages

Where the work happens#

The same page can be produced at three different moments. Jamstack pushes as much as possible into the first column.

StageAt build timeAt the edge, per requestIn the browser
What runsThe site generator renders every pageThe CDN returns a cached fileJavaScript calls APIs and functions
Good forArticles, docs, product pagesEvery read of those pagesSearch, sign-in, forms, carts
FreshnessAs of the last buildAs of the last deploy, or the revalidation window with incremental regenerationLive
Cost driverBuild minutes and build countBandwidthAPI calls and function invocations
  • Build limits are real constraints. Cloudflare Pages’ Free plan allows 500 builds a month, one at a time; GitHub Pages has a soft limit of 10 builds an hour unless you publish with your own GitHub Actions workflow, a 1 GB site size and a soft 100 GB a month of bandwidth. Netlify has no per-deploy file limit but fails deploys with more than 54,000 files in one directory.

From acronym to architecture#

The name started as JAMstack: JavaScript, APIs and Markup, the subtitle of Matt Biilmann’s 2016 talk. As frameworks such as Next.js and Gatsby made it common to build whole sites out of JavaScript, the letters stopped describing the practice. In July 2022 Netlify’s Phil Hawksworth published a refreshed definition that drops the acronym: “an architectural approach that decouples the web experience layer from data and business logic”, with best practices that “evolve alongside modern technologies”. That is the definition jamstack.org shows today.

Netlify, which coined the word, has since moved its own marketing to the “composable web”. In August 2023 it closed the Jamstack Community Discord, and Biilmann said the architecture had “won out to a degree where there’s little distinguishing ‘Modern Web Architecture’ from Jamstack architecture”. Its December 2023 State of Web Development report, formerly the Jamstack Community Survey, avoided the word; among its roughly 6,500 respondents, 46% used Next.js and 18% Astro. The ideas (prebuilt pages on a CDN, atomic deploys, preview URLs per pull request, APIs for the dynamic parts) are now standard features of hosts and frameworks, whatever they are called.

In code · bash

# 1. Render every page to plain files at build time
hugo build --minify --destination public

# 2. Upload the folder as a new deployment on the CDN (here Cloudflare Pages)
npx wrangler pages deploy public --branch=main

# 3. When an editor publishes in the CMS, it calls a build hook (here Netlify's)
#    and the whole site is rebuilt and redeployed
curl -X POST -d '{}' https://api.netlify.com/build_hooks/5c23354f454e1350f8543e78

Worth exploring

WebsiteJamstackNetlify, with community contributions on GitHubThe home of the Jamstack definition, with a glossary, videos (Jamstack TV), the 2022 community survey and filterable directories of about 370 static site generators and 130 headless CMSs. Netlify coined the term and runs the site, so expect its framing; the directories take entries by pull request, so check how current each project is yourself.
All resources →

Often confused with

Where it came from2008–2023

Most of the industry built large, monolithic websites that rendered pages on request. Static site generators offered another way, and on December 18, 2008, GitHub Pages made one mainstream: push to a branch and GitHub publishes the site, running every Pages repository through Jekyll, which Tom Preston-Werner called a “blog-aware static site generator”.

At Netlify, Matt Biilmann and Chris Bach were building workflows for this kind of site and found no short name for the architecture, so in 2015 they coined “Jamstack”. Biilmann took it mainstream with the talk at SmashingConf San Francisco 2016, “The New Front-end Stack. Javascript, APIs and Markup”, and in 2019 Biilmann and Phil Hawksworth published the O’Reilly book “Modern Web Development on the Jamstack”. The pitch: prebuild the front end, serve it from a CDN, and buy authentication, payments, content management and search as APIs instead of running them.

Success blurred the edges. In 2022 the definition was rewritten as decoupling the web experience layer from data and business logic. On February 1, 2023, Netlify bought Gatsby, saying “the future of the web is composable architectures”; that August it closed the Jamstack Community Discord, and in October its Compose conference replaced the annual Jamstack Conf. The term faded; the practices live on in hosts such as Netlify, Cloudflare Pages and Azure Static Web Apps, which build on every push and serve the result from a CDN.

Why it’s built this way

Prerender at build time instead of on each request
Pages built once and served from a CDN remove the cost, complexity and risk of dynamic servers as critical infrastructure, in jamstack.org’s words, and every reader gets the same fast file.
Decouple the front end from the services behind it
With mature APIs for authentication, payments, content management and search, a team can outsource those parts rather than build and operate them, and jamstack.org argues the clean decoupling brings greater portability and flexibility.
Atomic, immutable deploys
Uploading files one by one, by FTP or to S3, can put a new page live before its images, scripts and CSS. Netlify publishes a deploy only once every file is in place, and keeps each deploy at a permalink whose content never changes.
Git push as the deploy button
GitHub Pages made publishing “as easy as pushing to your GitHub repository” in 2008, and Jamstack hosts kept that: every push builds, and every pull request gets a preview.

Timeline

  1. 2008

    GitHub Pages launches on December 18, publishing sites through Jekyll

  2. 2015

    Matt Biilmann and Chris Bach coin “Jamstack” at Netlify

  3. 2016

    Biilmann’s SmashingConf talk “The New Front-end Stack. Javascript, APIs and Markup”

  4. 2019

    O’Reilly publishes “Modern Web Development on the Jamstack” by Biilmann and Hawksworth

  5. 2022

    A refreshed definition drops the acronym (July 11)

  6. 2023

    Netlify buys Gatsby (February 1), closes the community Discord and replaces Jamstack Conf with Compose

Sources20

Improve this page on GitHub