Jamstack is a popular web development philosophy that aims to speed up both web development and the time it takes to download a web page. Drawing from devops and CI/CD, Jamstack upends long-held techniques for building interactive web pages, shifting load-time code execution away from web servers and toward in-browser JavaScript and external services accessed via APIs. The end result is a developer-friendly approach to building static websites that render very quickly and can be easily customized for multiple platforms.
The Jamstack architecture
Jamstack is a web application architecture based on three pillars, which provide the initials in its name: JavaScript, APIs, and markup. Web pages on a Jamstack site consist of standard markup language, so they can be built and tested anywhere, without dependencies on application servers or server-side technologies like Node.js. Any interactive functionality is provided by standard JavaScript code that executes in the browser, which makes calls to reusable APIs over HTTPS. These calls are used to access external data or any other functionality that can’t be built into the web page itself.
To understand why Jamstack is revolutionary, consider the LAMP stack, which exemplifies the way most developers have thought about web development for the last 15 years. LAMP stands for Linux (the operating system that powers most web servers), Apache (the server software running on those Linux machines), MySQL (the database where web application data is stored), and PHP/Perl/Python (the language used to write the server-side code). When you point your browser to a LAMP-based website, the web server executes the server-side code that generates the web page on the fly, drawing data as needed from the MySQL database.
The LAMP architecture lets developers create dynamic and interactive websites, but it also requires a powerful web server—and the more traffic a site gets, the more server-side computing power it needs. Even with a fully featured server, dynamic web pages can take a long time to build and load. In a world of people with short attention spans, who are often browsing the web on their phones, that delay has become a major pain point.
Jamstack was born as part of the static website movement, which arose in the mid 2010s as a reaction against this traditional model of how a website should work. To understand Jamstack, you need to understand the technology behind static websites.
Static websites and Jamstack
If you had to explain to a complete newbie how the web works, it might go something like this: Somewhere in a web server’s filesystem there are HTML files, accessible by HTTP addresses, which a web browser downloads and then interprets to create a web page. But that’s a description of a static website: It assumes the HTML files already exist when the web browser goes looking for them. But much of the web over the past decade was dominated by dynamic websites, which generate HTML files on the fly in response to web requests, often based on parameters passed to the web server via forms or in the URL itself.
Static site generators
In the very early days of the web, when web pages were invariably static, many web developers wrote HTML code by hand. As web pages grew more complex, tools like Macromedia’s Dreamweaver arrived and began to generate static HTML pages programmatically. As the static website movement took off, a new wave of static site generators began to emerge, including Gatsby, Hugo, and Jeckyll. Unlike WYSIWYG tools like Dreamweaver, static site generators are command-line driven and designed to integrate well with CI/CD processes. HTML files are generated by these tools, often based on content written in Markdown, and automatically uploaded to a version control repository like GitHub. As these files are marked ready for production, static pages on the live website are automatically updated.
Content delivery networks
An important thing to keep in mind is that static in this context doesn’t imply simple web 1.0 pages that aren’t interactive. These pages can include advanced JavaScript that executes in the browser and makes API calls to databases, server-side functionality, or hosted serverless functions. But because none of that execution happens on the web server, a static site doesn’t need an industrial-powered web host complete with a database. Many static sites are deployed to content delivery networks, or CDNs, where content is mirrored on multiple servers around the world in order to be delivered quickly to users anywhere.
Mathieu Dionne, marketing lead at Snipcart, describes the early days of this new world of static websites in a blog post, and mentions that around 2015, "the Netlify founders ... had just come up with the term 'Jamstack' to work around the negative connotation of 'static web.'"
We've described the Jamstack process throughout this section. Now, let's briefly discuss Netlify and its role in the Jamstack ecosystem.
Netlify and Jamstack
Netlify is a cloud computing and web hosting company, and its cofounder, Mathias Biilmann, coined the term Jamstack. Netlify’s services are tailored to customers who want to build sites based on the Jamstack philosophy.
Netlify claims to have cracked a specific problem that had been holding back static websites, which is cache invalidation. Database-driven dynamic websites may consume a lot of server resources, but you can be certain that they’ll serve up the latest version of your website to any visitor who stops by. Because Jamstack websites are often hosted on the multiple distributed servers of a CDN, updates are less straightforward. It can take anywhere from a few minutes to hours for each CDN server to figure out that its cached version of the site is no longer valid. To work around this problem, Netlify’s CDN provides instant cache invalidation for HTML files.
In the years since Netlify raised the Jamstack flag, the company has used the technology as the backbone of its PaaS offering, providing a content platform for big companies like Nike and Peleton.
Jamstack with Gatsby
Netlify isn’t the only hosting provider in the Jamstack space, and it doesn’t have any kind of trademark or proprietary control over the term. A variety of Jamstack hosting and deployment solutions are available, and most of the big cloud providers are getting in on the action, including Amazon Web Services, Google Firebase, and Microsoft Azure. Other, more specialized companies have also entered this space, including Gatsby, Inc., creator of the static site generator of the same name.
Gatsby (the company) has built a high-flying services offering on the back of the Gatsby site generator. Because of its open source roots, the Gatsby site generator is also offered by other service providers, including Netlify.
The headless CMS
Of course, getting a website built and hosted is just the beginning, as you know if you've ever had to manage a website. You also need a way to create new content and add it to your site. Because the people doing that typically aren't programmers, they’ll need a user-friendly tool—namely, a content management system, or CMS. Traditional CMSes, like WordPress, offer a back-end user interface (UI) where you can enter website content, manage a database where that content is stored, and build dynamic web pages that present that content in response to browser requests.
CMSes for Jamstack sites work differently, and they are generally known as headless. A headless CMS offers a UI for entering and managing content and a database or other means of storing it, but does not itself generate HTML code for a browser to parse. Instead, the website’s static HTML pages use JavaScript to make calls to the CMS’s APIs, and the CMS returns the content in a format that JavaScript can turn into a web page.
This system thoroughly separates content from presentation, which of course is a longstanding ideal of programming. Because the CMS has an accessible API, multiple web pages can easily use it. For instance, if you’ve built separate mobile, desktop, and smartwatch versions of your website, all of these versions can access the same content stored in the CMS.
Netlify, as you might expect, has its own offering in this space, called NetlifyCMS, but there are other offerings available; developer Nebojsa Radakovic breaks them down in his introduction to headless CMSes. There are a lot of up-and-comers on that list, as well as one very familiar name. While we used WordPress as an example of a traditional CMS, it can also be run as a headless CMS to power a Jamstack site.
Why use Jamstack?
We've touched on many of the benefits to using Jamstack but it's worth recapping them, now that you have a full picture:
- Speed: Static sites load more quickly—and that isn't just a matter of convenience. Google penalizes slow sites by lowering their search rank, and customers accustomed to quick responses often abandon ecommerce transactions if steps are slow to load.
- Developer experience: Developers can build static sites using the devops techniques that have transformed the industry's practices and productivity. And the Jamstack philosophy produces site stacks that cleanly separate concerns, allowing developers to focus on their areas of specialization: front-end designers and developers can build sites without needing to be fluent in a server-side language, while back-end developers can focus on APIs. Content questions are fully handled in the realm of the CMS.
- Flexibility: Static sites can be hosted by traditional web servers, CDNs, specialized services, or some combination of the three. And because headless CMSes interact with front ends via APIs, you can easily build sites for multiple platforms that share the same content.
When not to use Jamstack
With all those benefits, it still needs to be said that Jamstack isn't for everyone. The flipside of Jamstack being tailored to developer needs is that, if you want to run a Jamstack-based site, you will be more reliant on developers than you might want. This isn't so bad for companies that already have or are willing to hire a dedicated web development team with the skills necessary for Jamstack. But many smaller shops are accustomed to using off-the-shelf commercial or open source software that lets them run their websites with little need for day-to-day developer involvement. Ecommerce sites, in particular, tend to rely on a wide variety of plugins and libraries developed over the years for traditional web hosting solutions; their Jamstack equivalents aren't as widespread or mature, meaning that Jamstack is not always good for ecommerce.
Is Jamstack popular?
Despite the hype surrounding it, Jamstack currently backs a fairly small sliver of all websites. The Web Almanac estimated that, in 2021, sites built by static site generators (almost all of which would have been built along the lines of the Jamstack philosophy) made up only about 1 percent of all websites. That said, Jamstack is in a period of rapid growth, with its market share growing by a factor of more than two every year for the past three years. One big sign of increasing developer interest in the technology: about a third of Jamstack developers are quite new to the scene, having fewer than two years of experience.
Jamstack tutorials
Looking to go deeper? Check out these Jamstack developer tutorials:
- Hasura, a company that focuses on the GraphQL API system used by Gatsby and other Jamstack platforms, has a good high-level tutorial that takes you step-by-step through the architectural considerations and choices that go into a Jamstack site.
- The web host Digital Ocean has a good tutorial on building a Jamstack portfolio site using Angular and Scully.
- Netlify offers a video tutorial that covers a lot of ground from the basics to more advanced topics, and include an introduction to building a database-driven Jamstack site.
Once you’ve mastered the basic concepts outlined here, you’ll be ready to use Jamstack principles and technologies for your websites. Happy learning!