What Is the JAMstack and How Do I Get Started?
Tags: Technology, Programming, JavaScript, Jamstack, Development

What Makes Up the JAMstack?

Back to the JAMstack: it’s typically comprised of three components: JavaScript, APIs, and Markup.

Its history stems from growing the term “static site” into something more meaningful (and marketable). So, while ultimately a static site is the end result, it’s blown up to include first-class tooling for every step of the way.

JAMstack breakdown

While there isn’t any specific set of tools that you need to use, or any tools at all beyond simple HTML, there are great examples of what can make up each part of the stack. Let’s dive into each component a little bit.

JavaScript

The component that’s probably done the most work to popularize the JAMstack is JavaScript. Our favorite browser language allows us to provide all of the dynamic and interactive bits that we might not have if we’re serving plain HTML without it.

This is where a lot of times you’ll see UI frameworks like React, Vue, and newcomers like Svelte come into play.

“A Simple Component” example from reactjs.org

They make building apps simpler and more organized by providing component APIs and tooling that compile down to a simple HTML file (or a bunch of them).

Those HTML files include a group of assets like images, CSS, and the actual JS that ultimately get served to a browser via your favorite CDN (content delivery network).

APIs

Utilizing the strengths of APIs is core to how you make a JAMstack app dynamic.

Whether it’s authentication or search, your application will use JavaScript to make an HTTP request to another provider which will ultimately enhance the experience in one form or another.

Gatsby coined the phrase “content mesh” that does a pretty good job of describing the possibilities here.

You don’t necessarily have to reach out to only one host for an API, but you can reach out to as many as you need (but try not to go overboard).

For instance, if you have a headless Wordpress API where you host your blog posts, a Cloudinary account where you store your specialized media, and an Elasticsearch instance that provides your search functionality, they all work together to provide a single experience to the people using your site.

Markup

This is the critical piece. Whether it’s your handwritten HTML or the code that compiles down to the HTML, it’s the first part you’re serving to the client. This is kind of a de facto piece of any website, but how you serve it is the most important piece.

To be considered a JAMstack app, the HTML needs to be served statically, which basically means not being dynamically rendered from a server.

If you’re piecing a page together and serving it with PHP, it’s probably not a JAMstack app. If you upload and serve a single HTML file from storage that constructs an app with JavaScript, it sounds like a JAMstack app.

Static output from Gatsby on AWS S3

But that doesn’t mean we have to always build 100% of the app within the browser. Tools like Gatsby and other static site generators allow us to pull in some or all of our API sources at build time and render the pages out as HTML files.

Think if you have a Wordpress blog, we can pull in all of the posts and ultimately create a new HTML file for each post. That means we’re going to be able to serve a precompiled version of the page directly to the browser which usually equates to a quicker first paint and faster experience for your visitor.