{"componentChunkName":"component---src-templates-post-index-js","path":"/blog/what-is-jamstack/","result":{"data":{"site":{"siteMetadata":{"logo":"https://content.afosto.io/5719193282412544/brand/AFO-Logo-compleet-kleur-RGBat4x.png","siteUrl":"https://afosto.com","siteName":"Afosto.com","twitter":"https://twitter.com/afosto","facebook":"https://twitter.com/afosto","company":{"foundingDate":"2014","founders":["Tjeuke horsten","Peter Bakker"],"phoneNumber":"050 711 95 19","email":"support@afosto.com"},"address":{"streetAddress":"Kieler Bocht 15C","locality":"Groningen","region":"GR","postalCode":"9723 JA","country":"NL"}}},"strapi":{"blog":{"title":"What is Jamstack?","slug":"what-is-jamstack","id":"48","locale":"en","localizations":[{"locale":"nl-NL","slug":"wat-is-jamstack"}],"seo_title":"What is Jamstack? | Is it the FUTURE of Development?","seo_description":"Jamstack is a software architecture pattern based on client-side JavaScript, reusable APIs, and prebuilt Markup (JAM). But will it be the future of development?","reading_time":"00:06:00.000","published_at":"2022-07-05T09:09:19.988Z","author":"Ton Koop","updated_at":"2022-09-06T08:26:44.929Z","body":"Jamstack has become extremely popular among the developers' community in recent times. If you have heard people talk about it and are wondering what it means or what the buzz is all about. Read on to find out.\n\nWe will help you understand what Jamstack is and how you can take advantage of its benefits.\n\n## Jamstack Definition\n\n![](https://lh6.googleusercontent.com/hNSl0r5cl3Zo9LFp6hPi533wt3mJdROIpGacgJtpJtBue51yHkKAJVIS2Eqfd8gP2frRqVqzs7NcVuhm3i3OgEuCsKEA_ik8RlSOCgb1qv-VPmXwfkwDAHfu2xB-7S8aHQ9FnnLM-FqLnDOmwcvMEOef-0ox)\n\nJamstack is a software architecture pattern based on client-side JavaScript, reusable APIs, and prebuilt Markup (JAM). It is an approach designed for building websites and applications that differ from the traditional CMS. But why is it important?\n\nIn the traditional web development architecture, everything - the content, design, and database, is managed together. And as a result, every component of the website is interdependent.\n\nThe backend interface is where the web site's content is created and managed, while the database is where the code is stored on the server.\n\nAnd whenever the website is visited, the page is put together by the server and shown to the user.\n\nAlthough there is nothing fundamentally wrong with this approach (as it is helpful most times), it has limitations on functionality and performance, which is what Jamstack was built to solve.\n\nJamstack offers better performance, security, and scalability of websites than the traditional approach. It is built on many existing tools and workflows and offers better productivity.\n\nIn addition, Jamstack websites do not rely on the server to build the content of every request made by the client. Instead, it uses cached content.\n\nA static website generator is used to prebuild the site markup in the form of highly optimized static pages and assets. Then, it is sent to a Content Delivery Network (CDN), where its content is served. And as such, the server only has to work when new changes are made to the content or files.\n\n## Jamstack Architecture\n\n\n![](https://lh5.googleusercontent.com/ZR8eF-DtYDo7oifqFsy9KKLmfUsO3sILOK3Yo09TQIJUjTGJzwPoOj1VJ0O9AJSoMIMz8p4AveRtlBreAa__zzokxSEc8A0fezxsobwAMWGOX4WjsG9t9j-clsEBdapX7FEiuZE3GhaZrKqssA2XESavIg4K)\n\nJamstack is not a specific framework or technology but an approach to building web applications.\n\nWith Jamstack websites, the code (JavaScript), the site infrastructure (APIs), and the content (Markup) are separated.\n\nWhen Jamstack was built, it was designed to make web development as serverless as possible. That is, to shift as many tasks as possible from the server-end to the client-side and dramatically reduce the number of server requests.\n\nEventually, this resulted in better performance and reduced waiting time associated with server requests.\n\nAs we have mentioned, there are three components on which Jamstack is based. Let's discuss each one briefly.\n\n### Javascript\n\nIf you are a web developer, you will be familiar with Javascript and what it does.\n\nJavascript is a programming language used to make web pages interactive. Without Javascript, we won't be able to add interactions to our websites like clicking a button, submitting a form, etc.\n\nIn Jamstack, unlike the traditional web development architecture, Javascript is decoupled from the content, and as a result, it has total freedom for its performance.\n\nFurthermore, Jamstack apps can use Javascript to communicate with backend services, enhancing better user experiences.\n\n### APIs\n\nApplication programming interfaces (APIs) are used to communicate between 2 software components.\n\nInitially, APIs were designed to be consumed by server-end applications, but with the advancement in Javascript, web APIs were developed.\n\nWith web APIS, all the activities were moved to the client-end. In addition, developers can now build more complex apps than they could before because there are domain experts who offer their products and services via web APIs.\n\nWith this advancement, developers can now outsource services like payments, authentication, management, and data services without taking on the burden of doing it alone.\n\n### Markup\n\nMarkup is the first part of your website that is served to the client. It could be handwritten or compiled HTML code. With Jamstack websites, the HTML is not rendered from a server but is served statically.\n\nStatic site generators like Gatsby, [Next.js](https://afosto.com/blog/what-is-next-js/), Hugo, Jekyll, etc., generate static HTML files during the build process. This process lowers the expenses, complexity, and risk of dynamic servers.\n\n![](https://lh5.googleusercontent.com/1D7G-Zp5t5Dj9CgiQw7Bk-bg1n2yYeNNi4g3Mmvr0SmyCjncIrketSn4Xatt6P-9Se0R77ZlufzQ6zCpR2Y79_3ufVST5JkD2hU8KjOibqU4DboZsATK2cRmy4ZP10l0ouBI33jY-DvBt2dVmqlNJO3nxus5)\n\nWith Jamstack, pre-rendered content is provided to a Content Delivery Network (CDN) and made dynamic using APIs and serverless functions.\n\nThe technologies involved in building Jamstack applications include CDNs, headless CMSs, static site generators, and JavaScript frameworks.\n\n## Jamstack the Name\n\nMatt Biilmann and Chris Bach came up with the name \"Jamstack\" (initially JAMstack) since they wanted to give a name to a different approach to building static websites.\n\nThe name was coined while working on projects and developing modern web development workflows and features at Netlify.\n\nTo make it easier to discuss the architectural approach incorporating several pre-existing web tools, they came up with the word Jamstack.\n\n## What are the Benefits of Jamstack?\n\nJamstack websites have several benefits over the traditionally built ones. Here are a few:\n\nSecurity: Since the client and server ends are separated, any security issues in the frontend code won't result in a breach in the backend. Plus, since your website is server-less, you do not have to worry about database or server vulnerabilities.\n\nScalability: With Jamstack, scaling is easy and affordable. Your web content is served off of CDN, and you do not have to rely on servers or databases. So, there are no issues even when there is massive traffic to your website.\n\nImproved Performance: Websites built with Jamstack load super fast for visitors because they are not dependent on servers or databases. Most procedures typically required while generating a web page are bypassed because the web content is cached on a CDN.\n\nMaintainability: Jamstack websites do not require you to maintain a server since your files are not stored there. Your static website is maintained for you without any hassle.\n\nImproved developer experience: Developers can freely choose their preferred tech stack without being limited to a specific technology.\n\n## Jamstack for e-commerce Solutions\n\nMore than ever, online retailers are faced with a lot of challenges.\n\nWith the increasing number of online shops, retailers have to compete to stay relevant and meet their customers' never-ending demands.\n\nAnd as a result, they are faced with concerns on how to provide a better customer experience, increase their traffic, incorporate new features, and many more. Fortunately, these issues can be resolved with Jamstack e-commerce.\n\nBelow are a few solutions provided by Jamstack for online retailers:\n\nFlexibility: Since the client and server sides are separated in a Jamstack e-commerce app, there is the freedom to sell your goods on multiple e-commerce platforms simultaneously.\n\nUnique Shopping Experience: Jamstack allows you to create personalized shopping experiences for your buyers so that you can be unique. For example, Shopify provides Javascript SDKs that can be used to create a user-friendly experience.\n\nImproved Developer Experience: Developers do not have to be full-stack experts before building Jamstack e-commerce applications. They can use APIs from e-commerce solutions like Shopify while they focus on designing the websites. Thus, there is reduced cost and time of development.\n\n## Jamstack Tools to Get Started\n\nBelow are the tools you can use to build your Jamstack applications:\n\nStatic Site Generators (SSGs): These tools are used to generate static HTML pages. Examples of popular SSGs are - [Gatsby](https://www.gatsbyjs.com/), [Hugo](https://hugotech.co/), [Jekyll](https://jekyllrb.com/), [Next.js](https://nextjs.org/), and [Eleventy](https://www.11ty.dev/).\n\nHosting Services: These services allow you to publish your application on the internet - [Firebase](https://firebase.google.com/), [Netlify](https://www.netlify.com/), [AWS Amplify](https://aws.amazon.com/amplify/), [GitHub Pages](https://pages.github.com/), [Heroku](https://www.heroku.com/).\n\nHeadless CMS: Headless CMS tools are content management systems that allow you to manage your content in a place and deploy it across your desired frontend interface. Examples are [Strapi](https://strapi.io/), [Contentful](https://www.contentful.com/), [GraphCMS](https://graphcms.com/), [Netlify CMS](https://www.netlifycms.org/), and [CloudCanoon](https://cloudcannon.com/).\n\nNo Code Forms: Create interactive forms without writing a piece of code with [Google Forms](https://docs.google.com/forms/), [Formstack](https://www.formstack.com/), [JotForm](https://www.jotform.com/), and [Typeform](https://www.typeform.com/forms/).\n\nUser Authentication: You can use the following websites to authenticate users on your Jamstack websites: [Auth0](https://auth0.com/), [Firebase](https://firebase.google.com/), [Netlify Identity](https://www.netlify.com/blog/2021/12/30/manage-and-authenticate-users-with-netlify-identity/), and [Cloudflare Access](https://www.cloudflare.com/products/zero-trust/access/).\n\nE-commerce: You can use the following tools to set up an e-commerce store: [Shopify](https://www.shopify.com.ng/), [Snipcart](https://snipcart.com/), [and Commerce Layer](https://commercelayer.io/).\n\n## Jamstack Sites / Examples\n\nThe following are examples of websites built according to the Jamstack architectural pattern.\n\n-   [Azalp](https://www.azalp.nl): Built with Next.js.\n\n-   [DiamondsByMe](https://diamondsbyme.com): Built with Next.js.\n\n-   [freeCodeCamp](https://www.freecodecamp.org/): Built with Gatsby.\n\n-   [HoodieHut](https://www.hoodiehut.co.uk/): Built with Gatsby.\n\n-   [Sprucehill](https://sprucehill.ca/): Built with Gatsby","primary_image":{"url":"https://qcqcdn.com/afosto/Saas_explained_in_5min_blog_6_b55feba9ad/Saas_explained_in_5min_blog_6_b55feba9ad.jpg"},"blocks":[{"title":"What is Jamstack?","contents":[{"body":"Jamstack is a software architecture pattern based on client-side JavaScript, reusable APIs, and prebuilt Markup (JAM). It is an approach designed for building websites and applications that differ from the traditional CMS."}]},{"title":"Is Jamstack the future?","contents":[{"body":"Jamstack is a modern way of developing web applications. Considering all the advantages of Jamstack, Jamstack can be called the web development trend of the future."}]},{"title":"Is Gatsby Jamstack?","contents":[{"body":"Gatsby is an open-source static site generator. This is one of the components required to work according to the Jamstack principle. So we can say that Gatsby falls within the Jamstack philosopy. "}]}]}}},"pageContext":{"slug":"/blog/what-is-jamstack/","id":48,"locale":"en"}},"staticQueryHashes":["4130126704","494587200"]}