View profile

What is the JAMStack?

What is the JAMStack?
By Mastering JS Weekly • Issue #36 • View online
The Jamstack (or JAMStack) is a interesting web development paradigm first coined by Netlify’s co-founder Mathias Biilmann. The key idea of the Jamstack is that web pages that need to make API requests when they’re loaded are harder to optimize and harder to debug.
A static HTML file that doesn’t need to make any API requests has several neat advantages:
  • Performance. You can deploy a static HTML file on a global CDN, so someone accessing your page from Sydney doesn’t suffer any performance penalty relative to someone accessing your page from New York or London. On the other hand, if your website relies on making API requests to a server running in AWS’ us-east region, users in Australia will experience slower load times.
  • Durability. Your page is still accessible even if your database or API is down.
  • Predictability. Weird things happen when API requests error out, or send back malformed responses. With a static page, there are fewer moving parts: you serve up the same page every time. That makes it easier to determine if a page is “broken”, and, if so, why it is broken.

What About Dynamic Pages?
Static HTML sounds great in theory, but what about in practice when you have a website that needs to have thousands of pages? The answer is that you need a build step to compile your website, including pre-fetching any data the pages need. That’s why the tools you’ll see most commonly associated with Jamstack apps are static site generators, like Jekyll or Gatsby.
For example, suppose you’re building an eCommerce store, and you’re looking to render a list of all the products you offer. Below is an example of a list of products offered by Bay Area startup ZBiotics.
How do you build a simple list of products?
How do you build a simple list of products?
There’s many ways you can build this page. In a classic web app, a user visiting the `/all-products` endpoint would hit a server endpoint that loads products from the database and renders the HTML.
In a single page app approach, a user visiting the `/all-products` endpoint would get an HTML page, which when makes an HTTP request to a RESTful API to load a list of products from the database.
The Jamstack introduces a third paradigm: a user visiting the `/all-products` endpoint gets a static HTML page with the list of products already included. Instead of loading the products at runtime, you load the list of products at compile time.
The tradeoff is that you need to make sure you recompile your site every time your data updates. For example, if you add a new product, you need to make sure you recompile your site, otherwise you end up with an update anomaly.
Recompiling your site when data changes is tricky and subtle. Gatsby supports a notion of data sources, and Gatsby Cloud supports incremental builds based on data sources to ensure you don’t have to recompile your entire site when one small data item changes.
Jamstack and MongoDB
If you’ve been reading Mastering Mongoose, the tradeoffs of using the Jamstack may sound familiar. That’s because they’re similar to the tradeoffs for denormalizing data in MongoDB.
If you have a `BlogPost` model in Mongoose, and you choose to embed the blog post author’s name, you get the same benefits: performance, durability, and predictability. But you also risk update anomalies if you aren’t careful when you update the author’s name.
Jamstack takes the principle of denormalization to the edge (pun intended). You can think of the Jamstack as “denormalizing” your whole web app.
Because the tradeoffs are similar, the Jamstack is best suited for similar use cases as database denormalization: data that is read 1000x more than it is updated. Blog posts are a classic example. Blog posts are typically written once, and then read thousands of times.
For example, the Mastering JS website can be considered a simple Jamstack app. We have a list of blog posts in markdown, and recompile the website every time we add a new blog post.
Thanks for subscribing to the Mastering JS Weekly newsletter! As a subscriber, you can get a discounted copy of our new eBook, Mastering Mongoose. If leave a review on GoodReads after purchasing, we will give you an extra $5 back. Thanks for your continued support!
Most Recent Tutorials
Other Interesting Reads
What JavaScript Developers Should Know About Curl |
Vue 3: mid 2020 status update · Issue #183 · vuejs/rfcs · GitHub
Did you enjoy this issue?
Mastering JS Weekly

Pragmatic web development. No bloatware allowed!

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue