Learn IT Fundamentals with Teacher Pochi

Jamstack

Key points

  • Jamstack is a website architecture named after its initials — JavaScript, API, and Markup.
  • Its defining trait is that the page's HTML is built ahead of time, at "build time," rather than on every request.
  • Because the pre-built HTML is delivered as-is, pages load fast and there's less server surface exposed to attack.

What is Jamstack?

Jamstack is an approach to building websites that combines JavaScript (on-screen behavior), APIs (fetching data), and Markup (pre-generated HTML).

The most important point is "when the HTML gets built." With Jamstack, the necessary data is fetched and the HTML is built ahead of time, at "build time," before any user ever visits the site.

Build time:
fetch data from the API
Generate
static HTML
Deliver
as-is

How it differs from traditional server-side rendering

The traditional approach (server-side rendering) has the server query the database and reassemble the HTML from scratch on every single visit. Jamstack differs in that this assembly work is finished ahead of time.

On every
visit
Traditional
Query the DB
and assemble HTML

Teacher Pochi's hintThe traditional approach is like "food delivery that's cooked to order," while Jamstack is like "handing out flyers that were already printed in advance." Delivery requires cooking for every single order, but pre-printed flyers just need to be handed out — much faster, and the kitchen (server) never gets swamped.

Division of labor between build time and runtime

With Jamstack, there's a clear split between "what happens at build time" and "what can happen after the page is opened (at runtime)."

Build timeFetch data from the API and generate HTML. Done all at once, ahead of time.
RuntimeJavaScript calls the API for things like form submissions or fetching the latest data.

It's not a strict rule that "everything must be pre-generated." For parts that change on the spot — like showing information after login — JavaScript calls the API again at runtime to fill in the gap.

The benefits of Jamstack

  • Fast loading: since it just returns pre-built HTML, there's no need to assemble anything on the spot.
  • Stronger security: fewer direct entry points into the database, which shrinks the attack surface.
  • Resilient under load: the same static files can easily be duplicated and delivered worldwide, making it easier to handle traffic spikes.

What kinds of sites is it suited for?

Good fitBlogs, corporate sites, documentation, and other sites that don't update too frequently
Needs extra workSites dealing with information that changes by the second, like stock levels or prices

A common combination is to turn information that rarely changes into HTML at build time, and use API calls only for the parts that need to be real-time.

Well-known Jamstack tools and services

Putting Jamstack into practice usually involves tools and services like these.

  • Next.js, Gatsby, Astro (frameworks for generating static sites)
  • Netlify, Vercel (services that handle builds and hosting)
  • microCMS, Contentful (headless CMS platforms for managing content)

This very site is deployed as static files via Netlify.

Summary

Jamstack is an architecture that combines JavaScript, APIs, and Markup, building the HTML ahead of time at build time to achieve fast, secure delivery. The key difference from traditional server-side rendering comes down to "when the HTML gets built."

Related topics:

🏠 Back to top