Beginner's Guide to Jamstack

--- title: Beginner's Guide to Jamstack tags: Guides --- 1. Beginner's Guide to Jamstack  ![](https://i.imgur.com/Okp0nl6.png) ## 1. Beginner's Guide to Jamstack Jamstack is a term that has taken the web development world by storm. Since it's only been around for a few years, there's a lot of confusion as to what exactly is the Jamstack, where does it come from, and why is it relevant? After a few hours of research, I noticed that many resources are incomplete, vague, complicated, or confusing - leaving you with more questions than answers. As a result, we created this guide to provide a structured and simple explanation on what Jamstack actually is, how it works, and if it's worth looking into as a solution for your business. Welcome to the Beginner's Guide to Jamstack! If you have any specific questions that need answering, please refer to the table of contents on this page to jump between topics. If you have any more questions, please check out our [link, FAQ] FAQ page where you can contact us. ### What is Jamstack? Despite having "stack" in its name - Jamstack isn't actually a set group of technologies. Jamstack is more of a way of life. More specifically, Jamstack is a philosophy or paradigm adopted when building websites and web applications. Consider terms like design thinking, lean development, or agile scrum. These are all mindsets adopted to solve the task at hand, whether it be innovation or project management. Similarly, Jamstack transcends being a method, and is a "way of thinking" when building websites and web apps. This way of thinking centers around decentralization and an efficient use of resources. An argument can be made whether Jamstack is part of the growing Web 3.0 movement. I'd like to think so. The core idea is that Jamstack sites are built using several decoupled components (user interface, content, microservices, etc) which work in sync to create a functional website or web app while using less resources than a traditional, monolithic website hosted on a server. The following sections contain further explanations as to what Jamstack is and all the benefits and features that come with it. [Table of Contents] ## 2. Why use Jamstack? Jamstack as a philosophy has several advantages when it comes to building websites and web apps. Here are the 5 biggest advantages of Jamstack: ### 1. Performance - Jamstack websites load fast. 8 seconds. If you can't capture your website visitor's attention in less than 8 seconds, you lose them. If that's not already enough pressure, 40% of visitors will leave a webpage if it takes longer than 3 seconds to load. It's no secret that page loading speeds have an impact on user experience, SEO, and conversions. Faster load times are the most obvious benefit of using Jamstack. When a Jamstack website is deployed, pages are built in advance (pre-rendered) and stored on content-delivery-networks (CDNs). When users load the website, the browser pulls the page from the closest CDN. With all website pages are already available on a CDN close to the user, very high performance is possible without introducing expensive or complex infrastructure. ### 2. Security - Less vulnerable to attacks Jamstack simplifies the hosting infrastructure, which results in fewer servers and systems to defend against attacks. Website pages and assets are served as pre-generated files, which allows read-only hosting, further reducing attack possibilities. The use of microservices and integrations means more teams are dedicated to securing their specific systems and providing higher levels of service. ### 3. Scale - No more server overload! In a traditional website structure, more website visitors require more processing power from the server. If there are too many website visitors at the same time, the website loads slower for each visitor (or worse, goes down completely!). And we know how slow loading times affect user experience. Popular architectures deal with heavy traffic loads by adding logic to cache popular webpages and resources. If heavy traffic loads are a regular problem, companies spend money for additional servers and bandwidth to handle these requests. Jamstack websites simply cache and serve content directly from a content delivery network (CDN). The Jamstack circumvents the problem of heavy traffic by storing everything that can be cached in a CDN, resulting in less redundancy an incredible load capacity.  ### 4. Maintainability - Jamstack websites are easy to maintain With hosting complexity reduced, maintenance is easier. You don't need a team of experts to constantly monitor website uptime. When a website is deployed, the pages are built and stored in CDNs. This reduces the need for central servers and all the patching, updating and maintainance that comes with them. Even better, in case of a temporary server failure, the pre-generated version of the website stored on the CDN can continue to render content until the central server is back online. ### 5. Portability - Jamstack sites are not tied to specific services Jamstack sites are pre-generated. That means that you can host them from a wide variety of hosting services and have greater ability to move them to your preferred host. Any simple static hosting solution should be able to serve a Jamstack site. You're also not tied to specific ecosystems. If you aren't satisfied with your existing content management platforms (CMSs) and microservices, it's fairly easy to replace them and integrate alternatives. Bye-bye infrastructure lock-in. **Read more about the benefits of Jamstack:** Jamstack Use Cases Jamstack for Business Jamstack for Marketers Jamstack for Developers ## 3. What is Jamstack? Jamstack is a mindset of building, deploying, and serving websites in a decentralized way, independent from a central origin server. In other words, a website built using the Jamstack doesn't always need an active server to handle browser requests. If you look at traditional websites built on your own server, or even WordPress for example, a server hosts all of the files and assets needed to build the website. Everytime a user loads your website, the browser sends a request to the server to fetch content to display it to the user. Multiply this process by thousands or millions of visitors per day and your servers are at risk of slowing down or worse, crashing! Upgrading the servers to handle more requests can get expensive really fast. When a Jamstack website is built & deployed, most of the page is pre-built and stored on a content delivery network. When a browser sends a request, the CDN will deliver the pre-built webpage to the user. Any additional dynamic content is pulled via APIs and microservices to provide a complete experience. **Read more about the Jamstack:** Why use Jamstack? How does Jamstack work? What does Jamstack mean? ## 4. What does Jamstack mean? The **"Jam"** in **Jam**stack stands for **J**avaScript, **A**PIs, and **M**arkup. **Javascript:** Javascript is a front-end programming language that allows websites to show dynamic content to website visitors. Front-end programming languages are used to build user interfaces, and influence how a user interacts with a website or web app. Javascript just so happens to be the most popular one, with over 97% of websites using JavaScript. Popular Javascript libraries include React, Vue, Angular, or Svelte. There has been some confusion as to whether you NEED to use JavaScript to have a Jamstack website. Despite its name, you can use any front-end programming language to have a Jamstack site. What's more important is that your website is built and stored in a decoupled way. More on that in [How does Jamstack work]() **APIs:** APIs, or Application Programming Interfaces, are pieces of code that allow software to communicate and share data with each other. **Markup:** Markup refers to the pre-rendered HTML files that form the basic structure of a webpage. Since these are pre-rendered, they load much faster than if they were stored on a server and had to be rendered upon every browser request. A **"stack" (or tech stack)** refers to a collection of technologies & software used to achieve a specific task. For example, terms like Marketing stack or sales stack refer to the collection of technologies and software used to achieve marketing or sales goals. In the case of Jamstack, the **"stack"** consists of Javascript (or other front-end programming language), APIs, and Markup which are the technologies used to build functional websites. ## 5. How does Jamstack Work? When building a Jamstack website, the development process is decoupled. This means that each component required to build a website can be built, managed, and optimized independently from each other - providing a faster and better [link: JS for developers] developer experience. A Jamstack site is typically built with the following componenets: **1. Static Front-end Design** The static front-end design is the first step towards building a Jamstack site. This is basically the HTML, CSS, and JavaScript used to build the visual look and feel of your site. **2. Static Site Generator** A static site generator (or SSG) is a piece of software that is used to build the static files for your website. An SSG compiles data and content to the front-end design and creates all the HTML files and relevant assets. These files are considered prebuilt and pushed to a content delivery network (CDN) after deployment. When a user loads a webpage, the pages is served in the browser window almost instantly. For contrast, in a traditional website, when a user visits a webpage, the server receives a request to load the page. The webpage is then built and served to the user, a process which is significantly slower (and often frustrating). There are many [Static Site Generators](https://staticgen.com/) available in a mulitude of programming languages. At JamgoTech, we use HUGO - a SSG which requires GoLang to implement - primarily for its speed and versatility. **3. Headless Content Management System (CMS)** The text, video, and image content that goes into a website is pulled from a headless content management system (or [Headless CMS](JS for Marketers, #CMS) compatible with your static site generator. Headless CMS can be connected in two ways - Git-based (pushing content to Github) or API-based (content is called from an API). The use of a Headless CMS provides several advantages for Marketers (JS for Marketers, #CMS). **4. Microservices & APIs** There are plenty microservices and APIs available to provide dynamic functionalities to your Jamstack site. Examples of dynamic functionalities include search, payments, user authentication, etc. And of course, the CMS Because of this vast array of tools and services available and ready to integrate, there are a wide range of [use cases](JS use cases) for Jamstack **5. Deployment Platform** Consider this the equivalent of having a hosting platform in a traditional website. The only difference is that files and assets aren't stored in a deployment platform. Instead, they are pushed to a content delivery network The deployment platform pulls the code from the SSG and inputs the content from the Headless CMS when building the pages. **6. Content Delivery Network (CDN)** A CDN is a collection of proxy servers spread around the world. These servers all contain the pre-built files and assets needed to render a Jamstack website. When a user loads a website, the browser pulls pages from the CDN geographically closest to them, providing a much faster browsing experience without relying on a central server. ## 6. Jamstack Use Cases Jamstack is mainly used when building websites and web apps (sometimes called PWAs). These websites and web apps provide several advantages for [link: js for business] business, [link:js for developers] developers, and marketing [link: Jamstack for Marketers] Large websites are switching to Jamstack to provide their users with faster load times and better website performances, while saving costs. In many cases, companies migrate to the Jamstack websites once WordPress can no longer serve their needs. These companies have seen tremendous results in performance and cost savings. The biggest change after Jamstack adoption has been the page loading speed. For example **[Smashing Magazine](https://www.netlify.com/blog/2017/03/16/smashing-magazine-just-got-10x-faster/) increased page speed by 10x.** Beyond improvements in speed, websites with lots of pages like LiveChat and Celonis found content-related benefits to the Jamstack. [LiveChat]() experienced more freedom among product, marketing, and develop teams to focus on what they do best rather than get distracted by building and updating marketing pages together. [Celonis]() was able to streamline the services they use to create, manage, and organize content, saving $60K in the process. E-commerce sites are already making the most the advantages of Jamstack. Book publisher [Pan Macmillan](https://www.netlify.com/blog/2021/04/13/pan-macmillan-sees-25-percent-conversion-increase-after-migrating-to-netlify/) has seen a 25% increase in conversions after migrating to the Jamstack. Other brands such as [Nike]() and [Victoria Beckham]() have adopted the Jamstack philosophy to power their ecommerce stores, seeing massive improvements in page speed and conversions. ### When to use Jamstack? Jamstack has several advantages for business, marketers, and developers. We recommend using Jamstack for websites with a lot of pages that have similar layouts or content structures. Examples include large ecommerce websites, blogs, directories, marketplaces, listing websites, and so on. We also recommend Jamstack for simple websites where the structure of information doesn't change often. This could be websites with information about your business. ### When not to use Jamstack At the current state of Jamstack, we believe it's not yet well adapted to highly dynamic and personalized websites. We also don't recommend having a Jamstack website if you need to frequently update the layout yourself as this would require specific coding experience. Here at JamgoTech, we specialize in building the following using the Jamstack: Websites: - Corporate websites - Ecommerce - Online Marketplaces [Click here to learn more](Services) [Our portfolio](portfolio) contains examples of how we use Jamstack to amplify business value. ## 7. Jamstack Popularity Jamstack is becoming more and more popular due to its [many advantages](link:why use js) and [adoption among big brands](link: jamstack use cases). In 2019, 0.50% of web pages were built using Jamstack. In 2020, 0.94% of web pages now use Jamstack (+85% increase!). Many of the world's largest brands are switching over to Jamstack for their [(link: js use cases)]websites and web apps. These brands include: [Icons of brands that use JS] Nike, Celonis, LiveChat, Mailchimp, Figma As many more large brands are adopting the architecture, we have strong reason to believe that more brands will move their online presence to the Jamstack. Here: [Web Almanac](https://almanac.httparchive.org/en/2020/jamstack) ## 8. Jamstack History The term "JAMstack" was first coined by Matt Biilmann in 2015. Matt is the co-founder and CEO of Netlify, [link: how does JS work #deployment] the largest web deployment platform. ### Pre-Jamstack Dynamic websites (websites that were loaded with personalized content) were starting to get slow. Although dynamic websites are great for personalization, many believed that slow loading websites negatively affected the user experience. As a result, static sites (simple sites that are commonly associated with the early days of the internet) were making a comeback - leading to increased popularity of [link: how does JS work #SSGs]] static site generators to compile static pages. Fun fact: Jekyll, the first static site generator was released in 2008. Since its release, many tools and services have been built to provide dynamic capabilities to sites compiled by static site generators. New tools and services are continuously being released. ### The Jamstack movement as we know it started in 2016. Despite static sites now having all the dynamic capabilities of their traditionally-built dynamic counterparts, many people had a hard time looking past the "static" part of the name. When people think of static sites, they often think of a website with a few pages that reads like a brochure. (Think of the websites built between 1997-2005). This made communication about the new architecture difficult for the team at Netlify. They came up with the name "JAMstack" - a term to reposition static sites with dynamic content without using the word "static." These static sites were now called JAMstack sites; a rebranding that sparks new life into the movement. ### Jamstack gains momentum in 2017 Web development in this period placed increasing emphasis on website performance, scalability, and developer experience. JAMstack starts getting adopted by a wider group of developers. The first Jamstack enterprise projects were also announced. In mid-2017, the first ever Jamstack conference was held in Freiburg, Germany. The [Jamstack Conference](https://jamstackconf.com/) is now held annually in San Fransisco (or online, as of 2020) ### The Jamstack community grows The community of Jamstack developers, enthusiasts, and adopters is growing. New tools and services are being released and popularized, promoting Jamstack even further. Jamstack has gone mainstream, which has since led to confusion as to what exactly Jamstack actually means. Despite the [link: What does JS mean?] name's origins, Jamstack sites do not rely on the use of specific coding languages. Due to the confusion, the term "JAMstack" was simplified to "Jamstack" - a small but significant change in what the movement represents - a simpler and decentralized philosophy towards buiding the web. ### 2022 - JamgoTech becomes the first Dutch Jamstack agency All jokes aside, here at JamgoTech, we are actively looking for opportunities to contribute toward and expand the Jamstack movement. With a focus on innovation and user experience, we build fast & intuitive websites and web apps using the Jamstack architecture. [Link: portfolio] Click here to see some of our work. We are also looking at ways to make Jamstack more accessible for businesses and marketing teams. Currently we're doing this through Believable CMS - a simple CMS to easily add and manage content on your website. ## 9. Jamstack for Business Having a Jamstack website can skyrocket value for a business. Jamstack sites are faster, safer, and better to maintain than traditionally built websites. How do these advantages translate into business results though? **It has a positive effect on conversions** The biggest advantage of Jamstack sites is that they load super quickly. This makes it very easy for users to navigate through sites to find the information they are looking for and achieve their goals. This is especially important if you drive traffic from paid advertising channels like Facebook, Instagram, LinkedIn, and/or Google Ads. If your website or landing page loads too slowly, many users may leave without buying anything. If your website is built with a clear user flow and easy user experience, the impact on conversions is even more powerful. **It's cheaper to build and maintain** Although Jamstack seems like a new shiny concept, the cost of building a Jamstack website is very comparable to building a traditional website. And with all that extra performance, you're essentially getting more results per dollar spent. How is it possible? Jamstack sites reduce the biggest costs of traditional websites - infrastructure and labor. Traditional websites require a lot of infrastructure, mainly reliable and secure servers and all the systems needed to maintain them. As your website receives more visitors, servers need to be upgraded to keep up with all the requests. Otherwise your website is at risk of slowing down or crashing. Jamstack sites don't have this problem. First of all, most of the content on Jamstack sites are pre-built and stored on a content delivery network (CDN) once a site is updated. As a result, this significantly reduces the hosting costs. With less headaches around hosting and server maintenance, less people are required to make sure everything is working properly. Lastly, Jamstack sites are mainly built using Javascript, which is a very popular scripting language. This makes it a lot cheaper and easier to find developers who can build Jamstack sites. **Jamstack sites provide a greater freedom of integrations** There are a lot of different microservices and APIs available to use with Jamstack websites. This provides a range of options to choose from. In case you are unhappy with certain components like your content management system (CMS), you can replace them with alternatives. Furthermore, Jamstack websites have specific benefits for [link: JS for Marketers] Marketers and [link: JS for Developers] Developers. ## 10. Jamstack for Marketers Many articles about Jamstack on the internet outline the advantages of Jamstack for business or [JS for developers] for developers. Few dive deep into the advantages of Jamstack for Marketers. If you're a marketer like me, here are several advantages of a Jamstack site for your marketing efforts. **1. Search Engine Optimization (SEO)** The dominant advantage of Jamstack sites are they load fast. Like, really fast. And Google likes this. While keywords and content relevance are important, Google also has several technical considerations which affect page rankings. Websites that load faster have better chances of ranking higher since they provide users with a smoother user experience. If your website is already easy to use and relevant, a faster website can give you an boost on SERPs. **2. Improve effectiveness of paid advertising** Pages that load faster have higher conversion rates and lower bounce/dropout rates. This amplifies the effectiveness of paid advertising campaigns like Facebook Ads, Instagram Ads, LinkedIn Ads, Google Ads, etc. Higher conversion rates reduce your cost per acquisition (CPA), and boost your relevance/quality scores, returns on ad spend and investment (ROAS, ROI) https://www.cloudflare.com/learning/performance/more/website-performance-conversion-rates/ **3. CMS flexibility** Many website building platforms (WordPress, Drupal, Joomla, etc) come with their own content management systems to create, manage, and publish content. If your website is built using one of these platforms, you're locked into using the platform's CMS. This can be quite frustrating if the platform CMS requires a lot of technical customization or has a loaded interface. **In a survey, about WordPress** As I publish this on our custom built [link: Believable] Believable CMS, I agree with them. With Jamstack sites, you can integrate your headless CMS of choice. A headless CMS is a content management system that operates independently from the frontend presentation layer. Some headless CMSs are better for specific purposes, and you can choose the one which best suits your needs. You can even integrate multiple CMSs to manage different types of content (example: webshops or blogs). The use of headless CMSs open a lot of flexibility for efficiently creating, managing, and distributing content. **4. Omnichannel content** Related to the previous point, some CMS solutions offer the possibility of serving content to multiple channels, making it easier than ever to adopt an omnichannel marketing approach. ## 12. Jamstack for Developers > [name=DJ] > This should be checked for quality and truthfulness. For developers, building a Jamstack site provides a better development experience than a traditional website. Jamstack sites aren't built with new, fancy technologies. Jamstack takes [link: how does JS work] technologies developers are already familiar with and reframes the way these technologies interact with each other. ### 1. Jamstack sites decentralize and decouple the development process Front end developers can focus on the user interface without being bounded by traditional monolithic architecture. The different moving parts of a website - frontend, backend, microservices integration, etc - are modular and can be built and modified independently. As a result, developers can produce results faster. They can also make changes without worrying about breaking the website. ### 2. There's a lower barrier of entry Jamstack websites are built using technologies that most developers are already familiar with. From a structural standpoint, the reduction of complex monolithic architecture means developers have fewer web infrastructure platforms to learn and maintain. ### 3. Jamstack developers have less maintence to worry about It's quite genius really. Despite having fewer website infrastructure platforms to maintain, Jamstack sites are more scalable and secure than traditional websites. Developers don't have to worry about database and server maintenance as well as server uptime. The use of CDNs and APIs to store and pull content provide incredible scalability while simultaneously being more secure (since there are less attack vectors) These advantages make it very easy for developers to build and maintain websites --- ## 12. Disadvantages of Jamstack While Jamstack provides a steller developer experience and several other benefits for **business** and **marketers**, it does come with one particular drawback: Structural updates may require developers ** The main disadvantage for the moment is that Jamstack websites provide limited customizability for marketers. Marketers can update text and publish new content on the blog through the CMS. The difficulty arises when marketers need to change the structural layout or design of a page as this requires more technical development experience. Since Jamstack sites are developer friendly, a good developer can quickly make changes as needed. The lack of flexibility for marketers is a problem the community is actively working to solve, ourselves included. We ancticipate that accessibility for Jamstack Overall, the general cost and risk of running a Jamstack website is still far less than building and maintaining a traditional website due to its [link: Why use Jamstack] many advantages.