Over the last few years the popularity of Jamstack architecture has grown and evolved by incredible amounts; no longer is Jamstack something you’d use to win at a game of buzzword bingo. Instead, it has grown and matured into a real and very powerful ecosystem and community that is a valid approach to solving real problems and applications. For example, producing highly stable and performant blogs and landing pages.
So, in this post, we’re going to dig into what Jamstack is, take a look at the state of this approach in 2024, and explore how you can go about getting started with it.
What is Jamstack?
Jamstack was first coined as a phrase back in 2015 by the CEO of Netlify, Mathias Biilmann. Originally it was styled as “JAMstack” to hint at the technology stack it used: JavaScript, API, and Markup. While the capitalization of the term has evolved, Jamstack was originally dreamt of as a new way of building websites, one that included decoupling the backend systems from the frontend ones. For example, a common setup is to use a frontend library like React to build the site and pair it with a headless CMS that lets you bring in content from an API; in that setup, all of the backend needed to store and serve the content, etc. is managed by the CMS, separately.
However, today, Jamstack refers to much more than just a list of technologies; it is an entire web development architecture and way of thinking when making a project. It allows you to create feature-rich and fully dynamic websites via the power of client-side JavaScript and APIs while also leveraging the power of statically generated assets and deployments to CDNs.
Core principles of Jamstack
As an architecture beyond the technology stack, Jamstack centers around two core principles: pre-rendering and decoupling. In this section let’s dive into both of them a bit deeper and see what they really mean and what they offer the Jamstack ecosystem.
Pre-rendering
The first key principle of Jamstack websites is having the front-end pre-generated into highly optimized static HTML and CSS, prior to any user requests reaching the server. This pre-generation happens during a build process, which you’ll often hear referred to as “build time.” The output of this pre-generation is then distributed across global CDN networks allowing fast and responsive load times for users regardless of their location. Then when users request a web page all the CDN needs to do is serve static files.
Because Jamstack websites get pre-generated into static HTML and CSS files, the response time for requests is much faster and hosting requirements are greatly reduced.
Hosting requirements are reduced because once the files are generated the server won’t have to do any further rendering. This means it’s quick and painless to deploy pre-generated static websites. This is further enhanced by the close integrations that have been developed between hosting providers like Vercel and Netlify and JavaScript frameworks that make it easier to build Jamstack websites, like Next.js and Gatsby.
Decoupling
The second key principle of the Jamstack architecture is decoupling. This means taking a traditional monolithic application and splitting it out so the backend services are separate from the frontend code and they instead interact via APIs. For example, you could integrate payment providers using Stripe’s API and use a headless CMS to allow easy updating of content on the marketing side of a website. While it may sound like a headache at first to manage different aspects of a project, it does actually allow for some important benefits.
First of all, it allows for any individual piece of the project to be switched out independently from the rest. To take the example above, you could switch out Stripe’s API for Paddle’s to change payment providers, without needing to change anything about your content management. This is important because it means you can evolve your project quickly and easily using newer or better-suited technologies. With the rate at which web development evolves today, that’s a great benefit.
Secondly, the clean separation of content, code, and systems on a project also allows for easier management of it. Unlike in a more traditional application architecture, different areas of a team managing different parts of an application don’t need to share one code repository for updates and changes, which allows for quicker updates with fewer potential conflicts and issues.
Stay on Top of New Tools, Frameworks, and More
Research shows that we learn better by doing. Dive into a monthly tutorial with the Optimized Dev Newsletter that helps you decide which new web dev tools are worth adding to your stack.
Benefits of using Jamstack
There are many reasons to use the Jamstack ecosystem but here are some of the biggest benefits you can expect from a Jamstack-powered project.
Security
Because of the decoupling of the frontend and backend systems and only serving pre-generated files and assets, the possible attack vectors a malicious person could use are reduced. This means your website is more secure and is less likely to be successfully breached by an attacker. Another benefit of decoupling and integrations with APIs for external products and services is that you outsource the security of those integrations to the teams and companies that maintain them. This means there’s less for you to secure and worry about on a day-to-day basis.
Scalability
As mentioned before, Jamstack websites use pre-generation, which lends itself perfectly to the use of Content Delivery Networks (CDNs) without the need for additional complex logic and/or workflows. This means static pre-generated sites can be quickly, easily, and automatically distributed across the world allowing your website to scale effortlessly and handle the loads placed upon it.
This is all due to how CDNs work and how they’re structured; by using a CDN, you have multiple servers scattered across the world handling the requests coming from the closest users to each server. This means you can handle a much higher level of traffic compared to having just one central server handle all requests from users for your website like in a more traditional application.
Performance
Similarly to the last point, because Jamstack websites are pre-generated, all the pages are generated and ready to be sent to users as soon as they request them; nothing needs to be assembled on the server before the user gets a response. This means when a user sends a request for a page on your website, a CDN close to their location can respond quickly with the last generated page. This is important because the longer a page takes to load, the more likely a user will press the back button, causing you to lose a potential customer.
Maintainability
Because the Jamstack architecture makes hosting a lot simpler thanks to JavaScript frameworks with close integrations with hosting platforms like Vercel and Netlify, maintenance tasks are also drastically reduced in both time and complexity. After a Jamstack build is complete and the pre-generated files are deployed; your website or application won’t require you to run any servers or maintain them. All this means you no longer need a team of people dedicated to maintaining servers and infrastructure just in case something happens.
Developer experience
Something the Jamstack ecosystem has become renowned for is its wide variety of powerful tools that can be used to generate and build websites. These tools and technologies don’t rely on proprietary technologies but instead, often use open source ones with thriving communities of their own filled with developers passionate about improving the product and service. As a side product of this passion, the documentation and onboarding process for a lot of these tools is slick and a great experience for developers.
Portability
Finally, because Jamstack websites are pre-generated, they can be hosted from a high number of services and products. Basically, if it can host a static website, it can likely host a Jamstack website. This means the days of being stuck with a limited number of providers because they do something specific that your project needs are gone and you’re free to move your product between hosting services as and when you desire without complex migrations.
Should you use Jamstack in 2024?
The Jamstack architecture has become one of those things in the tech world where just because you can, doesn’t necessarily mean you should. While it is technically possible for the vast majority of website types to be built using Jamstack, some types of websites work better with the architecture than others. Jamstack, in its most pure sense, is used a lot for static types of sites like marketing or information websites and blogs.
A major trend, however, is to use the power of JavaScript frameworks like Next.js to keep the power of Jamstack’s composable architecture (in which JavaScript combined with APIs keeps many benefits listed above), while using pre-rendering only for selected portions of a website where dynamic or fresh data is less important.
The pre-rendering shift
While Jamstack places a high emphasis on pre-rendering, it isn’t always possible or desirable to do that. This is because if you want to pre-render pages at build time, it requires the data to be available at build time, which isn’t always possible. Alternatively, when a page needs to have very fresh data (like stock levels on an e-commerce site), pre-rendering could lead to visitors seeing stale or inaccurate information.
In 2024, there are some solutions to this problem, such as Next.js’ incremental static regeneration or Gatsby’s deferred static generation, but it’s worth noting that at times pre-rendering isn’t the best solution and these solutions come with their own gotchas to bear in mind. Overall, there’s been a shift (especially on more complex websites) to use server-side rendering (SSR), in which web pages are freshly rendered with each new user request, instead of pre-rendering.
This trend to move away from pre-rendering and towards SSR is for good reason since SSR still offers you most of the benefits of pre-generation, but you also have the latest available data to render your pages with. There are downsides to SSR, as well, so it’s important to consider how you can leverage rendering methods effectively.
Solving for the downsides of SSR
Some frameworks like Next.js try to solve some of SSR's downsides by aggressively caching data fetching. Next.js gives a static-like experience with SSR using techniques like fetch() caching.
Should you use Jamstack for an existing project?
Finally, what about existing websites: should you convert them? Should you drop everything and migrate them this instant? Honestly, it’s hard to give a clear answer because as with a lot of things in tech, it depends. It depends on whether the benefits of Jamstack bring you, your business, and most importantly your project enough value to make the cost of migration worth it. For example, if your entire team is used to another architecture like WordPress or if pre-rendering doesn’t work for your project, then the cost and time investment required to transition to Jamstack may not be worth the benefits you’d gain. But, your discovery of Jamstack may lead you toward the benefits of composing APIs and JavaScript frameworks, even if the pre-rendering element isn’t for you.
Getting started with Jamstack
When it comes to getting started with using the Jamstack ecosystem in a project, the first thing you need to decide is if Jamstack is right for you and your project based on the points we’ve covered in this guide. Alternatively, if you just want to try Jamstack, then skip this step and dive into a project.
After you’ve decided the Jamstack ecosystem is right for you, the next step is to pick a framework that allows pre-rendering like Next.js, Gatsby, or Nuxt. Once you’ve decided on a framework to use for your project, it’s time to start building your new Jamstack website (or migrating your existing website if it’s not a new project). Then you’ll need to identify what types of APIs you could leverage in your site. Do you have an e-commerce site? Check out APIs like Stripe and Snipcart. Does your site have a lot of content-heavy pages? Explore a headless solution, like Prismic.
Of course, how you go about building or migrating your website will depend on the specific technology you’ve chosen to use as every technology has a different way of doing things. For example, a Next.js project won’t be the same setup and workflow as a Nuxt project would be.
If you’re just getting started with building Jamstack websites and applications it makes sense to start with a fairly simple website such as a marketing website and/or blog to get your head around the concepts and workflows. This tutorial is a nice way to try out pre-rendering and decoupling with a headless product like Prismic.
Choose your JavaScript framework
Closing Thoughts
Ultimately, Jamstack architecture is a staple of modern web development, and it’ll likely be here for a long time. But, whether or not it’s right for you and your projects depends on a variety of factors such as: if it’s a new project or an existing one, the cost of migration, or if the benefits are of interest to you. If the right boxes are ticked for you and your project then it’s worth investigating further and checking out the architecture. If however, the benefits don’t really align with your business and/or project and the cost/impact of migration would be too high then it might be right to pass on it this time.
