A quick introduction to JAMstack, a modern way of building websites and apps, that massively boosts site-speed performance, security, and is even cheaper in production than the traditional alternatives.
JAMstack stands for JavaScript, APIs and Markup.
More specifically, JAMstack is a web development architecture based on client-side JavaScript, reusable APIs, and Markup content. One of the premises of JAMstack is abstract away the backend and move more focus to the frontend.
The term JAMstack was coined and popularized by the founders of Netlify, Mathias Biilmann, Christian Bach.
How JAMstack works
JAMstack bridges the gap between static and dynamic websites by providing the best of both worlds.
- JAMstack sites focus on serving static HTML pages (generated on build/deploy time) to the user rather than dynamically (server-side) on-the-fly rendered HTML. This massively reduces HTTP requests on page load.
- JAMstack sites can dynamically fetch data when needed by running API calls after the static HTML page is loaded.
With JAMstack, serving static, pre-generated content is the default, while dynamic content fetching is optional.
Overall, JAMstack sites have a more efficient and flexible way of serving data especially compared to popular CMS-based platforms like WordPress that dynamically load data from a backend.
What are the main benefits of JAMstack?
- It’s blazing fast. Generally JAMstack applications serve pre-generated HTML which means that when a page URL is requested by a user, there’s no database to look up and nothing to generate on-demand, which massively reduces response time and page loading for the end-user.
- It’s more secure. The backend of a JAMstack site is only exposed via APIs, which makes the surface of attack is much narrower than e.g. on a typical WordPress or Drupal site.
- It’s cheaper. Serving static content via a CDN is way less expensive than serving content dynamically via a backend server.
- Convenience. With JAMstack you have a lower barrier of entrance for building full-stack apps, since most, if not all of the backend hassle is abstracted away.
What type of websites is JAMstack used for?
Pretty much every website you can imagine falls under the JAMstack umbrella, due to its flexible nature. You can build anything from a simple blog to e-commerce stores (e.g. with Shopify or Snipcart).
You can also use JAMstack to build more complex apps that have a hybrid nature of combining dynamic and static content (like Twitter, Instagram etc.).
The flexibility and fine-grained control you have with JAMstack makes it hard to mention any type of project that you can’t use it for.
JAMstack resources
New JAMstack tools and services are coming out all the time. The following are the JAMstack technologies that I’ve used or am familiar enough with to recommend.
For hosting
Web Frameworks
JAMstack Functions
- Jamstackfns.com created by Lee Robinson is an awesome collection of serverless functions for JAMstack sites and apps.
