New to Jamstack? Everything You Need to Know to Get Started
The Jamstack has been taking the development community by storm. It offers many benefits that range from performance to cost-effectiveness, all while providing developers with a better suite of tools to work with.
We published our first article about the Jamstack around 7 years ago. Back then, it was still in its infancy. Since this first post, we have published many resources to help new & seasoned Jamstack developers. However, this article is probably the most important of them all to get familiar with the Jamstack.
Here, we’ll talk about what the Jamstack is and explore both its benefits and challenges. We’ll break down each concept, walking through what pieces are needed to build a Jamstack app.
Table of content:
What is the Jamstack?
The Jamstack is an architecture where a website is delivered statically, such as serving HTML from static hosting or CDN (content delivery network), but providing dynamic content and an interactive experience through JavaScript. The term itself represents the JAM in a website: JavaScript, APIs, and Markup.
This concept started from an idea: that the developer community needed a way to get past the potential negative stigmas of the word “static”. It gives us a term to describe how a modern dynamic web app is built.
Some argue we’re past the JAM in Jamstack, but the concepts remain. We still depend on Markup to deliver a website or application and optionally can use JavaScript and APIs to enhance the experience.
Though Jamstack includes the word “stack”, it’s more of an architecture. It’s a foundation and set of principles that when put together represent a powerful way of building web applications.
What’s the difference compared to traditional architecture?
If you look at the beginning of the web, we can see Jamstack concepts in practice. Before server-side solutions were in place, developers wrote HTML by hand and served static sites to their visitors.
But as the web grew, the technology matured, seeing complex and powerful server-side solutions come into the picture. That led to projects like WordPress, where with a small amount of work to install it on a server, you can be up and running with an entire website and a content management system (CMS).
While WordPress is in fact still pretty much dominant, developers wanted to deliver static content in a way that would be more performant. They were also looking for fewer moving pieces and less maintenance than typical serverful solutions that run on the client-side.
This gave way to static site generators and static hosting solutions like AWS S3, which a developer could use to deliver an entire website statically. This eventually led to platforms like Netlify and Vercel that made that process easier and came up with a ton of features to make the web development process better.
What are the benefits of the Jamstack?
The Jamstack comes with a lot of benefits compared to the more traditional web development approach. For instance, Jamstack web apps are fast, reliable, scalable, and usually pretty cheap.
Out of the box, they hit all of the 5 AWS Well-Architected pillars. By delivering an app from a static hosting platform, you’re:
Limiting the number of moving pieces required to deliver that app
Exposing fewer attack surfaces for bad actors
Providing an app that will infinitely scale, suffering from less downtime
Delivering the website fast as its mostly static files
Spending less money on hosting
Beyond these benefits, the Jamstack world is rich with a fantastic developer experience.
Frameworks like Next.js and Gatsby allow you to build a new web app in 1 minute. You can then deploy that website from a GitHub repository to Netlify or Vercel in 1 additional minute. Alternatively, you can use tools like Stackbit and Builder.io that take care of that entire end-to-end process.
Web services are also being driven by the Jamstack growth to provide a better developer experience. Content management systems and eCommerce services (like Snipcart) make it easy to manage even the most complex applications built with the Jamstack.
While it’s already fun and easy to build web apps in the Jamstack world, it’s still relatively young. There’s a ton of growth potential and room for improvement that will continue to change how we develop web applications.
What are the disadvantages of Jamstack?
The Jamstack main disadvantage for some is its strength for others. More traditional ways of building a website, like WordPress, don’t require you to think about the frontend and backend. The entire solution comes with a user interface and a content management system that ultimately serves a rendered website.
With the Jamstack, on the other hand, you need multiple tools and services to accomplish the same result. You’ll also need to think about your frontend and your backend separately since those will be decoupled. Since many pieces of a web project are decoupled, managing and building a website with the Jamstack architecture might be more complex for less tech-savvy users. While I may create the frontend of my application with Next.js for example, I would need to choose another solution for user and content management.
Some argue there’s a lot of benefit to having decoupled parts each doing their tasks really well. Others feel there are too many different services to manage, each with its own separate billing and user management.
There’s also a challenge with how Jamstack projects are built for large websites. If you’re just starting off with a few pages, you may not notice, but websites with thousands or millions of pages are going to have a hard time as their static site generator needs to render each page before getting deployed.
The good news is this problem is actively being tackled with features like Incremental Builds.
Like any architecture or set of tools, it’s important that you weigh the pros and cons of the Jamstack for your project, instead of being dogmatic about a particular solution.
How has the Jamstack evolved over the years?
Like any new, popular technology, the Jamstack has seen a lot of growth and has evolved since it first appeared.
How to get started with the Jamstack?
One of my favorite parts of working with the Jamstack is the tooling. For me, it makes web development fun.
The tools we have available make it relatively easy to build and deploy production-ready websites that can withstand huge traffic spikes or bring a rich experience to our content.
Building the frontend of a Jamstack app
Let’s start with the frontend of the Jamstack. While the core of a Jamstack website is the static HTML that’s delivered to the browser, JavaScript and the UI frameworks that build the experience are what popularized the architecture.
Tools like React, Vue, Angular, and Svelte are UI-focused frameworks that help developers build applications with modular components. They ultimately render to HTML with JavaScript right in the browser (or server) making the process of building interactions or serving dynamic content more natural and declarative.
Static site generators and web frameworks such as Gatsby, Next.js, Gridsome, Scully, and SvelteKit extend those frameworks providing the ability to more easily manage the content that gets added to the projects and render pages out to static files.
Most of these projects have provided the ability to render the pages out at build time, meaning you’re serving the entire rendered experience to the browser straight from the HTML, instead of waiting for it to load on the client. This typically allows you to provide a faster web app rather than relying on JavaScript to fill in the entire page.
But once those pages load the HTML and JavaScript, you’re still able to fully take advantage of the UI frameworks like React to fill in any missing pieces or provide the interactive elements.
Some of the UI frameworks available for developers:
Some of the static site generators and web frameworks available or developers:
Managing content, data, and the backend of a Jamstack app
At the heart of any website or application is the content. This comes in many forms, whether it’s a personal blog or the products of an online store.
The rise of the Jamstack has brought endless solutions trying to tackle specific problems in the space. Tools like Auth0 provide user authentication and management, which can bring many challenges on its own. Others like DatoCMS (or even headless WordPress) give developers and their clients the ability to manage content and access it with an API integration. Snipcart provides an easy way to add a shopping cart and entire checkout experience to a website, giving eCommerce powers to anyone on the web.
Beyond all of the services made available, projects like Netlify and Vercel make it easy to build serverless functions, where you can start developing your own backend service. If you need something more tailored to your needs, you can integrate custom infrastructure from AWS, Azure, or Google Cloud that can provide the static front of the application with the highly dynamic backend pieces to provide that rich experience.
The awesome part about Jamstack apps is that they provide a central point to bring in any feature or service you need, paving the way for powerful solutions focused on tackling your specific challenge.
Some of the cloud services available for developers:
Learn how to use FaunaDB in your Jamstack site here.
Deploying a Jamstack app
As a frontend developer myself, arguably one of the more painful parts of building a web application is deploying a website and managing CI/CD systems. If you’ve been around the web for a while, you might remember the days of having to manually drag over files into your favorite FTP client.
In the Jamstack world, tools like Netlify and Vercel have given us the ability to have a sort of automated DevOps. After connecting our projects to a service with our Git provider, our website or application is automatically deployed any time changes are merged into the main branch.
This extends even further with features like deploy previews. By default, any time you create a new branch and set up a new merge request, you get new environments that give you a unique URL to preview your changes. This makes it incredibly easy to share those changes with your client or to get a review from your coworker.
But we’re not limited to those tools to deploy our websites. Because at that point our apps are static HTML files, we can really put them wherever we want. The end result being static files makes our projects versatile and gives us many different options for getting them out to the world.
Some of the hosting and deployment options available for developers:
Transitioning or migrating to the Jamstack
There’s no such thing as a negligible migration, but thanks to the flexibility of the Jamstack and the core idea that you can pull in content from different sources, we can take existing infrastructure and use it to take a step in the Jamstack direction.
For instance, any new WordPress project automatically ships with a REST API, allowing you to grab your website’s content. Projects like WPGraphQL, which is actually being funded by Gatsby, are also working to expand this into a GraphQL interface allowing more complex querying for your data. Using these tools will enable you to use WordPress as a headless CMS.
While there’s going to be an inevitable cost associated with that transition process, you’ll be able to maintain the core business logic in your backend while taking advantage of the benefits of the Jamstack with your frontend.
Great Jamstack resources
If you’re interested in learning more or want to keep up with the rapid changes in the community, here are some resources that we like to keep an eye on.
Websites
StaticGen: a full list of available SSGs
HeadlessCMS: a full list of available headless CMSs
Build Your DXP: catalog of services you can use with your project
Blogs
Podcasts
Newsletters
Books
How to contribute?
Beyond contributing by creating new projects using Jamstack tech, there are more ways to get involved with the Jamstack community:
Open Source: Tons of Jamstack projects are open source and they all need your help! Whether it’s updating documentation or contributing to feature development, every little bit helps. Search by "jamstack" on GitHub to give you an idea!
Building & Sharing: A lot of time goes into creating new projects, take the time to share your work with the community. That work can inspire others to learn more about the Jamstack and show what’s possible.
Content Creation & Teaching: Whether it’s an article, video, or an entire course, helping others learn with guided materials will help the community grow and become more confident with the Jamstack.
Learn More & Advocate: There’s an endless amount of tools and concepts you can learn, take those concepts and advocate for them for your next client project or with your boss.
Support the Industry: With many services available, each company is at a different level of investment whether it’s a VC-funded company or a bootstrapped company. Show your support by using the powerful services available and helping spread the word about the tech you’ve had success with.
At Snipcart, we are always open to relevant article contributions from devs with killer content to share. Let us know if you’re interested.
Closing Thoughts
The Jamstack is a modern architecture that’s taken the web by storm. It provides a ton of benefits out-of-the-box with little downside, allowing you to supercharge the web experience for you and your visitors.
One of the most exciting parts is the growing community and ecosystem. As great as the tooling is today, the teams building Jamstack solutions are going to keep pushing the boundaries of what can be done, making the web a better place for developers and the people using it.
What are your thoughts on the Jamstack? What successes have you had or what challenges have you run into? Let us know in the comments.
