The Jamstack is a popular web development stack that offers a variety of benefits and has taken the development community by storm in recent years but what exactly is it? In this article let’s examine how it works at a high level and talk about why you might want to use it.
In the early days of the web, html files served from static servers were the basis of most websites. Today however, many websites are generated on demand by powerful back-ends, as pages are requested. The latter approach has led to many benefits but also led to issues with security, performance, complexity, and cost.
What if you could have the best of both worlds? That’s where the Jamstack enters the picture.
The idea is to generate page markup for the whole site at build time, instead of on each user request. Then those generated static files can be hosted on a CDN with servers geographically closest to the end user’s actual location. The makes for a quick and speedy response.
There are a ton of so called static site generators out there that can generate this HTML for us based on data from your choice of APIs, database, etc. A great registry for discovering these static site generators can be found at https://jamstack.org/generators/.
All of them include standards for templating, controlling page meta data, fetching data, and more. Each also support a variety of unique features geared towards developer preference.
When it comes to triggering the build of a site built with one of the aforementioned generators, the flexibility here is just as rich.
You can trigger rebuilds of your site when pushing new code to a git repository on Github, Gitlab, or Bitbucket effectively creating an extremely low config CI/CD. Hosting providers like Netlify and Vercel are geared towards this very use case.
Also most headless CMS options these days provide webhooks that can fire whenever certain events occur, such as a new blog post being created or an author’s profile being updated. Static site generators can be setup to respond to these webhooks, triggering rebuilds, and giving content managers the exact right amount of control.
Thus far, you might be thinking that this Jamstack approach seems pretty limiting. After all, what if I want show different content to different users depending on who they are, where they are, or any other number of factors. Obviously, we can’t customize the markup if it’s not being generated at request time.
A great resource to find such micro-services is https://jamstacktools.org/.
This registry sorts services by category and allows you to search for just what you need. By no means is the service 100% comprehensive though. Certainly a google search for your need along with the term “Jamstack” can reveal still dozens more pre-built solutions to quickly plugin to your app.
If you’re thinking that the Jamstack approach seems pretty cool, I’d happen to agree. Before concluding let’s sum up the benefits it provides.
Just like any other technology, the Jamstack is no silver bullet. It has it pros and cons. So let’s talk about those downsides briefly.
One downsides is that there is a short delay to viewing content updates made in your CMS as the site must be re-built before it goes live. However, this becomes a lot less of an issue with the live previews provided with a tool like Storyblok.
Another downside is that build time is directly coupled to the size of your site. This is because on each build, every page must be generated from scratch, so the more pages you have the longer the build will take.
There are several approaches to deal with this depending on the static site generator you end up using. To ease your mind though, just know that Smashing Magazine, a developer and designer oriented publication with thousands of articles, successfully hosts their site on the Jamstack. In fact, they wrote a whole article about how they migrated from WordPress to the Jamstack.
If you end up choosing Nuxt to do your static site generation it comes with support for incremental site generation that allows you to intelligently cache results, and then only rebuild what’s changed.
In conclusion, the Jamstack is a modern approach with a wealth of time and frustration saving benefits. If you’ve got an upcoming project that could benefit from the Jamstack, why not give it a try?
➡️ We’ll even help walk you through the process of using Nuxt and Storyblok CMS in our course: Jamstack the Complete Guide. In it you can learn not only the concepts behind the Jamstack but get hands on building on it for yourself!