5 JAMstack Pillars You Need To Know About in 2020

10 min readJun 13, 2020

JAMstack is not about specific technologies.

When a pre-generated static page calls a URL (API) via JavaScript to get dynamic data — you got yourself an JAMstack site.

JAMstack is a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

It is the combination of underlying tooling that makes JAMstack so exciting.

JAMstack is composed of 3 components: Javascript, APIs, and Markup.

How do these three things “jam” together, you ask? :)

You deploy and serve statically generated MARKUP. This markup is enhanced dynamically on client side with JAVASCRIPT, and fetch dynamic data via APIs.

What does JAMstack really mean?

One of the things about JAMstack architecture is that a page request does not hit a server for HTML.

Instead, it fetches HTML from a CDN, where an HTML file has been pre-built and is ready to be downloaded.

It means that requesting a page from a JAMstack site does not need to wait for HTML to be compiled and returned to the client via a traditional web server.
JAMstack is still about static js./CSS/HTML, but it brings an improved developer experience and robust app development than legacy methods.
Using JAMstack, developers can build static files that are ready to be served by request. Every single file is pre-built and stored on a global CDN instead of serving files that are tightly coupled to web servers with heavy backend frameworks.

JAMstack Pillars You Need To Know About

JAMstack includes lots of players! And they seem to multiply every day now.

But who are the real pioneers who started the movement?

We’ve decided to break this list in 5 categories so you could get a broader view of all the people that populate the JAMstack ecosystem, including:

Front-end frameworks
Headless CMSs
Static site generators
Hosting platforms
JAMstack developer or agency

You start with Content Strategy and Architecture. This is why we recommend a Content-First approach and using a strategic JAMstack developer or agency as early as possible. Your CMS team also can help you with Content Architecture but most of the time it is a specialty of an agency.

You need Headless CMS to create your content first digital experience. Your content team and a client can start working on content while the code is still in the works.

At the same time, You write your code using Development Frameworks.

When your content and code are ready, it is time to put them together using Static Site Generators.

Then, the final touch — Hosting! Th best part about JAMstack approach is that your site can be deployed and served in any static hosting.

All of that is usually strategized, supervised, and implemented by a dev agency.

1 | Development Frameworks

The vast majority of the millions of software developers worldwide know JavaScript, and the majority of those are familiar with or are using React on a regular basis. While other frameworks like Angular are also gaining big traction, React is still the king.

React

If React were a book, it would be a bestseller. Launched in 2013, this JavaScript framework has won thousands of users around the world in less than a decade. Today, the library is maintained by Facebook, along with all the members of the developer community. It’s used by some of the giants in the tech industry such as Apple, PayPal, and Netflix.

React abandoned Angular’s confusing data-binding and adopted a 1-way data-flow.
React uses virtual and batched DOM updates, which makes it fast but also lets you write your components the way you see them. From simple to complex.
React is a view -> controller engine but in no way, it involves any Models.

Angular

Angular is the OG of all the JavaScript frameworks. Created by two Google engineers, it was released in 2012 and presented a new way of creating dynamic pages. Before Angular, there were other ways of creating dynamic pages, but Angular represented a considerable leap in convenience and speed.

Angular extends HTML files’ functionality with directives. To enable directives, developers add the ng- prefix to HTML attributes, and that’s it.
Angular enables developers to create widgets that leverage editable data using a two-way data binding, which means that the developer doesn’t have to write code that constantly syncs the view with the model and the model with the view.
Angular uses virtual scrolling, which displays large lists of elements performantly by only rendering the items that fit on-screen, reducing load times.

2 | Headless CMS you can use with JAMstack project

Headless CMS is paramount for successful future proof JAMstack implementation (ok we are biased, we admit! But we truly believe that and saw it many many times, trust us!).

Agility CMS

Agility CMS is not the first CMS to use JAMstack, but we aren’t new to the JAMstack jam. But Agility CMS was the first Headless CMS back in 2003 (called decoupled back then) and they are heavily investing in time and effort in JAMstack as this technology has been evolving.

Use REST APIs or sync SDKs to interact with your content and deliver it anywhere.
Agility CMS enables developers to code things their way. Agility CMS won’t dictate how your content is presented. Use one of the starter templates to fast-track development, or build your own.
Agility CMS is now Gatsby’s first class partner so you can build a content foundation that will go the distance and deploy your blazing-fast Gatsby site with confidence. Here is how to start on Gatsby and Agility CMS.

Contentful

Contentful is all about content. It enables developers and marketers to integrate with a myriad of tools to improve content delivery.

Contentful serves all its documents in JSON format, making it well-suited for apps in the Jamstack ecosystem
Unlike traditional CMS, Contentful was built in RESTful API architecture from the start
All the created content is accessible via an API

3 | Static Site Generators

What’s really interesting is that JAMStack developers are using Static Site Generators build ON TOP of the base frameworks to do amazing things. Now we can use front-end development frameworks to build website that normally we’d build with PHP, Java or ASP.Net.

Gatsby

Gatsby was designed from the ground up to improve the user experience across the web. That means performance, SEO, and accessibility are top of mind. They have implemented many out-of-the-box techniques to give you a leg up on providing the best experience for your users.

Gatsby boasts excellent documentation and a number of starters to help you get a site up and running quickly.
Gatsby uses GraphQL to build its data layer. That means that Gatsby can collect your data from wherever it may be: Markdown, JSON, your favorite CMS, and third party APIs.
Gatsby is more than a boilerplate site generator. It’s built with performance and speed in mind, which is something you can feel in the final product.

Next.js

Inspired by PHP, Next.js benefits from JavaScript modules, enabling developers to export the components of an app and allowing them to perform individual tests for each element as well as thousands of other components and modules from npm.

These are some of the main reasons Next is one of the JAMstack pioneers:

Next.js enables developers to create a solution, where, instead of loading all of the JavaScript, the application will only load the bundle needed.
Prefetching, one of Next.js’ features, picks off where code splitting leaves off, allowing optimized bundles of code to be lazily-loaded behind the scenes.
Next.js enables hot-module replacement, which means that instead of reloading an entire application when code is changed, it only recreates modules that have been altered.

Check out our full list of Static Sites Generators you need to know about

4 | Hosting Platforms to Use With Your JAMstack Project

Even though we’ve got static HTML files, we still have to host them somewhere.

You can either go with the major cloud providers such as Azure and AWS, or you can take a look at some of the new-school options that do a ton of the work for you.

Azure and AWS are the 2 biggest players in Cloud today. If you have a requirement for compliance or security or your current infrastructure is already there, you are fine to move forward with JAMStack hosting there.

Netlify

Netlify’s tool-agnostic platform helps you go dynamic on your own terms. Choose from built-in add ons, integrate a favorite tool, or roll your own, enabling developers to run websites on a purpose-built, multi-cloud infrastructure that’s designed for speed, automated to scale, and intrinsically secure.

Unlike the large legacy apps, Jamstack projects neatly separate the front-end pages and UI from the backend apps and databases.
Using Netlify, the entire front end is pre-built into highly optimized static pages and assets.
Using Netlify, developers deliver new web projects faster and iterate quickly with no monolithic codebase or infrastructure to manage.

Vercel (Formerly Zeit)

Vercel’s technology has been under development for several years now. Vercel is built on top of AWS Lambdas, which makes it serverless. Vercel is also a really exciting platform that’s evolving quickly. It provides CDN out of the box and has a new Preview capability, as well as the ability to have any one of your routes by served statically or server-rendered. That’s really cool if you can’t decide whether you want to go 100% static yet.

These are some of the main reasons Vercel is one of the JAMstack pioneers:

Vercel separates a Next.js project into multiple AWS Lambdas based on the pages of the project, decreasing the amount of code to be loaded for each request.
Vercel enables faster development because of its smart CDN that caches static resources and serves all the requests from a closer data center to the user.

Using JAMstack, Vercel maintains its own global edge network, which means that every Vercer app and website is within 10ms of any user anywhere in the world.

JAMstack Developers — Agencies That Can Help With your JAMstack Project

If you don’t have a team in house or the project is quite big, you might need an implementation partner.

Bejamas

Bejamas is a web development shop focused on helping agencies and companies with serverless web, headless CMSs, static site generators, and JAMstack tools.

These are some of the main reasons Bejamas is one of the JAMstack pioneers:

The Bejamas team is very knowledgeable in JAMstack and focuses their offer on building websites and apps using that architecture.
Using JAMstack, the Bejamas team has achieved significant gains in terms of site speed and ease to use for their clients. Check out some case studies are here.
Bejamas had incredible infographic put together to illustrate the JAMstack Ecosystem in great deatail

The New Dynamic

The New Dynamic is a full-service web design, development, and consulting agency based in New York wholly focused on Jamstack technologies. The name comes from their community site that Bud Parr developed in 2014 to showcase Jamstack tools and services that was originally named “Static is the New Dynamic” (https://www.thenewdynamic.org/).

The New Dynamic created a popular community on Slack (http://slack.tnd.dev/) by the same name and have held over 25 Jamstack events (https://www.jamstack.nyc/) in New York City as well as given talks or workshops at every annual Jamstack Conference in San Francisco.
They regularly contribute to open source tools and readily make available our process and knowledge to the community. We are considered experts with Hugo, the world’s fastest framework for building websites.
The New Dynamic has an incredible collection of tools on their website you might enjoy

Keep Reading

If you want to learn more about using JAMstack , make sure you read these articles: