JAMstack is revolutionising the way we think about workflow by providing a simpler developer experience, better performance, lower cost and greater scalability.
This simple guide will help you understand why it exists and how to get started.
Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a Static Site Generator.
static websites have not only be been growing in popularity, but also in functionality. Gone are the days when static websites are just some HTML and some bunch of CSS with no interactivity whatsoever. Today, we have static websites that does things like process payments, handle realtime activities etc. To keep calling websites like these “static websites” will be undermining the functionality of such websites. Hence, the term JAMstack.
- What is the JAMstack
- Why the JAMstack
- How to build with the JAMstack
The term was coined by Mathias Biilmann, co-founder of Netlify.
With the JAMstack, we no longer talk about specific technologies; operating systems, web servers, backend programming languages, or databases. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.
Having seen what the JAMstack is, you might ask why go the JAMstack route? Below are some reasons you should consider the JAMstack:
- Faster performance: This is the most obvious benefit of a JAMstack website as it is just pre-built HTML and assets, all which can be served over a CDN.
- Higher security: JAMstack websites are incredibly secure, since you don’t have to worry of servers been hacked or database vulnerabilities.
- Less cost: Cost of running a JAMstack website is cheaper, since it uses less resources as things like servers and databases are not necessarily needed.
- Better developer experience: With the JAMstack, there is no tight coupling between backend and frontend, as we can select from an expanding options of CMS and content infrastructures, which removes the need to maintain a separate stack for content and our website. We can even make use of third-party services like Algolia and Netlify Forms.
In addition to the above, there are numerous services to integrate dynamic functionality into JAMstack websites emerging up every day. Such services includes:
- Manage signups, logins, password recovery, and more with Netlify Identity.
- Full text search with Algolia and Lunr.js.
- Form handling with Formspree or Netlify Forms.
We have already seen what the JAMstack stands for. So to build a project using the JAMstack, the project must meet the following criteria:
- Markup: Templated markup should be pre-built at deploy time, usually using a site generator like GatsbyJS, Nuxt.js, Hugo etc. for content sites, or a build tool like Webpack, ParcelJS etc. for web apps.
With those in mind, your project is not built with the JAMstack if:
- Built with a server-side CMS like WordPress, Drupal etc.
- A monolithic server-run web app that relies on a backend language like PHP, Node, or any other backend language.
- A single page app (SPA) that uses isomorphic rendering to build views on the server at runtime.
When building a project with the JAMstack, you should consider the following best practices:
- The entire site should be served on CDN.
- Employ atomic deploys.
- Instant caching invalidation.
- Everything should live on Git.
- Markup builds should be automated.