We published our first article about the Jamstack +/- 6 years ago. Back then, it was still in its infancy. Since this first post, we have published many valuable resources to help new & seasoned Jamstack developers. This is the most important one.

The Jamstack has been taking the development community by storm. It offers many benefits that range from performance to cost-effectiveness, all while making developers happy with a better suite of tools to build with.

Here, we’ll talk about what the Jamstack exactly is along with both its benefits and challenges. We’ll break down each concept, walking through what pieces are needed to build a Jamstack app, as well as how to pitch the Jamstack to your boss or client.

We’ll cover:

What is the Jamstack?

Jamstack 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 way to describe how a modern dynamic web app is built.

The concept is based on an architecture where a website can be delivered statically, such as serving HTML from static hosting, but providing dynamic content and an interactive experience through tools like JavaScript. The term itself represents the JAM in a website: JavaScript, APIs, and Markup.

Some argue we’re past the JAM in Jamstack, but the concepts mostly remain, where we depend on Markup to deliver a website or application and optionally can use JavaScript and APIs to enhance the experience.

Though Jamstack confusingly includes the word “stack”, it’s more of an architecture. It’s a foundation and set of principles that when put together can represent powerful solutions with many benefits.

What makes it different from traditional architectures?

We can look really far back to the beginning of the web and see Jamstack concepts in practice. Before solutions like WordPress were in place, developers wrote HTML by hand and served static sites to their visitors.

But as the web grew, web 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 WordPress on a server, you can be up and running with an entire website complete with a content management system (CMS).

While WordPress in fact is still pretty much the king of the web, developers wanted to deliver static content in a way that would be more performant, with less moving pieces, and with less required maintenance than typical serverful solutions.

This gave way to static hosting solutions like AWS S3, which a developer could use to deliver an entire website, which eventually led to platforms like Netlify and Vercel that made that process easier along with a ton of other features on top.

What makes it so great?

There are a lot of pieces that make Jamstack beneficial to all stakeholders of a web project from the business owner, to the developers, to the people actually visiting the site.

AWS has a set of 5 pillars that they consider to be a Well-Architected application:

• Operational Excellence
• Security
• Reliability
• Performance Efficiency
• Cost Optimization

Out-of-the-box, Jamstack apps hit all of these pillars. By delivering an app from static hosting, you’re:

• Limiting the number of moving pieces required to deliver that app
• Providing an app that will infinitely scale suffering from less downtime
• Exposing fewer attack surfaces for bad actors
• Delivering the website fast as its mostly static files
• Spending less money on (static) hosting

Beyond the visitor-facing benefits, the Jamstack world is rich with fantastic developer experiences. A ton of money is being poured into the ecosystem.

We’re now seeing frameworks like Next.js and Gatsby that literally allow you to spin up a new web app in 1 minute. Then you can deploy that website from a GitHub repository to Netlify or Vercel in 1 additional minute. Or you can use tools like Stackbit that take care of that entire end-to-end process

Web services are also being driven by this growth to provide a better developer experience, where you have content management systems and e-commerce services (like Snipcart) that make it really easy to manage complex systems for your application.

The awesome part is this ecosystem is still relatively young. While it’s already fun and easy to be productive in the Jamstack world, there’s a ton of growth potential and room for improvement that will continue to change how the world develops web applications.

What are some of the challenges?

The Jamstack isn’t immune to criticism and has its own set of challenges.

Much of the criticism comes from advocates of solutions like WordPress or Ruby on Rails wherewith those tools, you can spin up an entire project on its own along with a rich set of features baked in.

With WordPress, you don’t have to think about a front end vs a back end. It delivers the entire solution with user and content management which ultimately serves a rendered website.

In the Jamstack world, many of the pieces of a web project are decoupled. While I may create the front end of my application with Next.js, I would need to figure out my own solution for user management. If I wanted to build an application with Gatsby, I would need to source content from a separate service or solution.

Some argue there’s a lot of benefit to having the decoupled parts of a project that each do their part really well. Others feel there are too many different services to manage, complete with their own separate billing and user management.

There’s also a large challenge with how Jamstack projects are built. If you’re just starting off with a few pages, you may not notice this, but websites that include thousands if not millions of pages are going to have a hard time as their static site generator needs to render each of those pages before getting deployed.

This can be a huge pain! But 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 for the needs of 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 became popularized. Here’s a brief history:

• 2015: Static sites are slowly making a comeback from the ruins of the web’s early years. The first CMS-deniers are making them “cool” again.
• 2016: As you would expect, backlash occurs. Static sites aren’t cool at all—they lack too many features to build anything other than blogs. In the meantime though, a small group of developers is coining the “Jamstack” and slowly promoting its principles in modern dev circles.
• 2017: The year Jamstack really comes to life, for a somewhat niche community. Static sites aren't “static” anymore. This modern web revolution gives you all the features you need to build “hyper-dynamic” sites & apps. Sequoia Capital, Mailchimp & Red Bull are a few of the first big enterprises to build JAMstack projects.
• 2018: Here’s a phrase we start to hear a lot: “Just discovered the Jamstack and, oh my God, it's amazing!” The paradigm makes a mainstream breakthrough with more & more people talking about it. Substantial funding is announced for tools like Gatsby, Netlify, Contentful, etc. The first JAMstack_conf takes place.
• 2019: The year of maturity & accessibility. The Jamstack isn’t a niche community anymore. Most frontend developers hear about it and many start looking into it. With the likes of Stackbit, the Jamstack opens its doors to less technical users. The rise of serverless functions is also huge for bringing more backend functionalities to frontend-centric projects.
• 2020: This past year seems to be the point where Jamstack starts to put on its grown-up pants. To start, Jamstack is no longer solely reliant on the JAM, but rebranded as the Jamstack along with a new design that includes a refreshed logo. Investors see a lot of opportunity in the Jamstack and have put a lot of money in it in addition to the bootstrap companies trying to carve out their space in the community. ZEIT was officially renamed to Vercel and with Next.js has continued to blur the lines as to what the Jamstack really means. The Jamstack has also gained the attention of the big web tech players like WordPress, sparking criticism and a debate between the Matts at Jamstack Conf, but the community has continued to grow strong and open the door tackling new challenges.
• 2021: There’s still no indication that the Jamstack is slowing down. While the rebranding has brought a bit of additional confusion to the branding consistency, more time, energy, and money are being poured into continuing to evolve and mature the solutions we have available today. While 2020 started to see the inception of “Full Stack Jamstack” solutions like RedwoodJS, we may see that space continues to grow as developers increasingly need tooling that can support more complexity in their applications.

Examples of Jamstack projects

Finding Jamstack websites and apps out in the world is easy! Some of the biggest companies and brands in the world are taking advantage of the Jamstack to deliver rich experiences with many operational benefits.

Impossible Foods

The team that worked with Impossible Foods, creator of the Impossible Burger, used Gatsby to create a dynamic experience that allowed Impossible to showcase their product selection.

Using Gatsby, they were able to pull their content together using the content mesh, even providing a store locator, where potential customers can try to find their closest location.

Check it out at impossiblefoods.com

freeCodeCamp

One of the biggest code education platforms and communities around the world is freeCodeCamp.

The freeCodeCamp team also used Gatsby to provide a rich experience that proved to be performant for new learners.

Check it out at freecodecamp.org/learn

The A11y Project

It’s critical that the web community strives to be more inclusive and create accessible applications that everyone can enjoy. The team at The A11y Project helps push that initiative forward with resources on how to develop with accessibility in mind.

The A11y Project’s website is built with the static site generator 11ty, allowing for a highly performant website served from static files.

Check it out at a11yproject.com

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.

But 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 front end of a Jamstack app

Let’s start with the front end 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 that experience is what popularized the architecture.

Tools like React, Vue, Angular, and Svelte are UI-focused frameworks that help developers build applications with modular components. These tools 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 Sapper 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 generator and web frameworks available or developers:

Managing content, data, and the back end 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 very 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. Snipcart provides an easy way to add a shopping cart and entire checkout experience to a website, giving e-commerce 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 they provide a central point to bring in any feature or service you need, paving the way for powerful solutions that focus on tackling your specific challenge.

Some of the cloud services available for developers:

CMS:

Search:

Identity:

Serverless Functions:

Comments:

Commerce:

Forms:

Database:

Deploying a Jamstack app

As a front end 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 either of the mentioned services 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. Any time you create a new branch and set up a new merge request, by default, 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. We can drop them in an AWS S3 bucket, instantly making them available on the web, and we can even automate that process with a GitHub Action.

The end result being static files makes our projects versatile and gives us many different options for getting it 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, if you’re currently using Ruby on Rails to manage your web app, you can turn your project into an API-first project and use a web framework like Next.js to pull in the content and create your dynamic experiences. egghead.io, a premium education platform, did exactly that with the next generation of their platform that you see today.

This also works well with WordPress. 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. This all can get packaged up by using WordPress as a “headless” CMS, serving the project static with your favorite front end.

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.

How can you sell the Jamstack to prospective clients?

It can be somewhat simple to convince a developer that it’s beneficial to build a site with the Jamstack, or at least get them on board with the awesome tools available. But it’s a different story trying to convince a boss or potential client. They might not necessarily care that you can generate a static site and get automatic deploy previews.

What really matters is how the Jamstack impacts them. What’s going to help set them up for success? What will ultimately help drive the bottom line and grow the business?

Jamstack apps are fast

More often than not, Jamstack is going to be really fast.

Starting with the first request in the browser, when you deliver a site from static hosting, you’re avoiding expensive server-side processes that can slow down that first response.

Typically when serving static hosting, that request is made to a content delivery network (CDN). That means instead of requesting a file from a server halfway around the world, your visitor will make that request to a location closer to them, shortening the time they need to wait.

Once the HTML is in the browser, you’re typically providing a fully generated page that’s plain HTML, meaning the site won’t need to do a lot of work to get the first experience rendered in the browser.

After the page loads, if you’re using a framework like Next.js, the framework will automatically provide performance benefits for the rest of the time the visitor spends on the website, like client-side routing and preloading content based on intelligent predictions of what page they’re going to visit next.

All of this wrapped up gives your visitors a fast experience from the first load through their entire time spent on your app. This makes customers happy meaning they’re more likely to stay on your website and convert.

Jamstack apps are reliable and scale really well

One of the biggest pain points in managing serverful solutions is the server itself. If your project requires a server to process and render a page, you’re relying on that to always be available and to process potentially thousands if not millions of requests.

Typically to manage that influx of traffic, you either wait until you first hit a breaking point to even think about it or you set up features like autoscaling. With static hosting, because each request is returning a static file, you’re not relying on the same processing needs of a server-side request. Your website or application can “infinitely scale”, essentially providing zero downtime of the website itself (aside from the provider’s downtime). No matter how many requests hit your project.

You’re also reducing the potential points of failure between the person hitting your website and the server that’s responding to that request. By not having to parse the logic and render the HTML, you’re simply returning a static document right to the browser.

By having a website or application with little downtime that can scale to as many customers as needed, you’re ensuring the business can always be available and potentially bring in more income or leads to the company.

Jamstack apps are usually pretty cheap

Something all business owners love to see is a lower bill. While the cost varies depending on the project setup, there’s an overwhelming number of examples showing that after moving to the Jamstack, the overall cost dropped quite dramatically.

Static hosting is really cheap. Serving the core of your website from static hosting means you’re not paying for computing time and resources used, you’re paying for the amount of data that’s being downloaded for each request. When it comes to web projects, unless you’re serving large files or your site is extremely bloated, the files are likely small and not going to cost a whole lot for each request.

As mentioned, this is certainly project dependent. Depending on how many services you use or what you’re doing on the back end of the application, you still may end up having a decent sized bill, but you’re still likely dealing with focused APIs and services that can more efficiently serve the data needed.

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

• The New Dynamic
• Jamstack.org
• 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

• JAMstacked

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: lots 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 (like Snipcart)! 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 guest posting 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 community and ecosystem are still young. As great as the tooling is today, the teams that are building solutions to the challenges of the web are going to keep pushing the boundaries of what we can do, 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!

---

If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!