There are many terms in the tech world that seem more complicated than they truly are. This could certainly be said of Jamstack. In recent times, a lot more people have started using it, but many still have a complicated view of what it truly is.
A development stack is simply the underlying tools, frameworks, and libraries used to build or run applications. The MEAN stack (MongoDB, Express.js, Angular, and Node.js) and MERN stack (MongoDB, Express.js, React, and Node.js) come to mind.
Jamstack is a software architecture designed to make the web faster, more secure, and more scalable. It utilizes the following underlying components:
Jamstack is built on the concept that a website can be served statically but also provide dynamic content through the underlying components — mainly JavaScript and APIs.
Examples of Jamstack projects range from a simple HTML webpage with potentially no JavaScript deployed to a web host to a full-scale blog built with Vue.js powered by a headless CMS like Ghost. The two are vastly different implementations, but they’re still built on the same principle.
In using Jamstack to build web applications, we are following an approach wherein tasks like authentication or payment processing are outsourced to APIs, and the focus is largely on the app’s frontend build.
As such, Jamstack is the frontend developer’s dream. If you want to build a blog today, you don’t have to worry about the backend — managing databases to store articles, images, etc. You get to focus on the frontend where you thrive, using the APIs made available to the Jamstack, e.g., headless CMS.
It’s important to note, however, that you don’t have to use all three components for your project to be considered Jamstack. You don’t need to use JavaScript; you don’t need to use APIs.
A lot of static projects we build fall into this category. The Vue, Angular, or React app that you build and deploy as a static app is Jamstack. That simple HTML file that has no JavaScript and literally doesn’t do anything dynamic? Yup, that’s also a Jamstack app.
You may have noticed the other stacks mentioned above (MEAN and MERN) are capitalized, and indeed, Jamstack also used to be stylized as JAMstack. But because JAMstack now encompasses more than what its original JAM acronym stands for, it has becomes a term that simply represents the entire concept of statically served web applications.
So if you’re concerned about the right way to write this word, the answer is Jamstack.
In the past, we built applications by having them send requests to the web server, and these servers then built the HTML for each site visit. This was a less responsive web experience as a lot of work was done on each page request.
We moved on to building asynchronous web experiences using tools like AJAX (Asynchronous JavaScript and XML, which also got a rebrand to just Ajax after XML was largely replaced by JSON) to build interactive web applications that reduced the number of page loads and requests we had to make to the server.
Single-page applications came along and gave websites faster transitions with the feel of native apps. A lot of tools and frameworks were developed to make it easier for developers to take advantage of this. A major downside, however, was that SPAs struggled with search engine optimization (SEO) because individual pages did not have their own URLs.
This major downside of SPAs led to a trend of people building more static sites using static site generators (SSGs) like Jekyll, which also saw increased adoption because it powers GitHub Pages, a GitHub platform that allows users host websites from their repositories.
The major difference between SSGs and SPAs is that the heavy lifting is already done at build time for SSGs, and individual pages are generated. In contrast, SPAs have to create pages and views on request. This also means better SEO for SSGs. And since the heavy lifting is only done once and in the background, SSGs maintain high performance despite increased traffic.
Static site generators fall under the Jamstack as well. You can choose to host them on Netlify or on a CDN like Cloudflare. CDNs help reduce the costs of hosting web applications while also increasing speed, scalability, and security. They also make the Jamstack faster because they tend to serve content from servers that are geographically closer to website visitors, meaning faster loading times and an overall better experience.
Today, Jamstack websites are supported and powered by a lot of popular frameworks that you can use to build your next web app. Some of these include React (Gatsby, Next.js), Vue (Gridsome, Nuxt.js), Hugo, and a bunch more. With these tools, you are most likely already familiar with what you need to build Jamstack sites.
A website can be considered Jamstack based on the markup and how it is served. If your application is not compiling and rendering an HTML file on a server at request time, then your website is Jamstack. Once again, you don’t have to use JavaScript or even call APIs for your website to be considered Jamstack.
I’m still writing about it, so most definitely. I consider the most significant benefit of Jamstack to be that it makes it easy for developers of any kind, especially frontend developers, to build solutions without having to worry too much about the backend activities. It’s perfect for quickly building out minimum viable products (MVPs), side projects, portfolios, and a whole lot more.
Even when you are building your own APIs, you can spin up a Vue project that consumes this API, thereby decoupling the dependencies that tend to arise if you have the API and its frontend together — a whole lot easier for the frontend developer or team to work on and maintain.
There are a lot of exciting possibilities still to come for Jamstack, and it’s an actively growing community that you, too, can become a part of. If you want to learn more, become a part of the community, and exchange ideas, you can check out the Jamstack community page to find events and communities near you.
If you want to find out more about what makes the Jamstack amazing, you can read more about its benefits — security, scale, performance, maintainability, portability, and developer experience — on its official webpage. There are also a lot of other resources on the internet that demonstrate how to build Jamstack websites using multiple frameworks and tools. Do check them out.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Nitro.js is a solution in the server-side JavaScript landscape that offers features like universal deployment, auto-imports, and file-based routing.
Ding! You got a notification, but does it cause a little bump of dopamine or a slow drag of cortisol? […]
A guide for using JWT authentication to prevent basic security issues while understanding the shortcomings of JWTs.
Auth.js makes adding authentication to web apps easier and more secure. Let’s discuss why you should use it in your projects.
Learn more →
