Introduction to JAMstack: A New Way to Build Websites (2020)

Breath a new life into your static website!

Website, a term that quickly brings a picture of web pages, databases, servers, and a host in your mind, which has been a norm for years. Despite being the most common approach followed by numerous companies, the improvement in the security and performance of the website has been the caveats for the developers, the traits for which the Static Websites are known for.

Here are some interesting stats, indicating the significance of the performance of the website/ app in its success-

• The BBC  lost 10% of users for every increasing second in their website loading.
• Google found that a whopping 53% of visits to mobile websites are stopped if a page takes more than 3 seconds to load.

Considering the fact, companies are once again opting for static websites, which along with security, also gives high performance and speed. Hence, Static websites are no more an outdated thing, it is coming back in trend but this time with a twist i.e. JAMstack. 

What is JAMstack?

According to Mathias Biilmann, JAMstack is a modern web development architecture that is based on 3 pillars – client-side – JavaScript, reusable APIs, and prebuilt Markup adding more meaning and quality to a static website.

JAMstack is a novel way of building a website that is here to stay for long. Tom Preston Werner, the co-founder and former CEO of GitHub, indicates the expected rise in its demand in the coming years through his tweet.

Within 5 years, you’ll build your next large scale, fully-featured web app with JAMstack and deploy on Netlify.- Tom Preston Werner.

The focus of JAMstack is majorly on the presentation layer, and unlike the traditional approach of building the website, the data is placed on GitHub, whose pre-built HTML version is sent on CDN for further process. Let’s dive deeper into details of the stack, and unveil the secret behind its amazing performance.

Javascript

Javascript can be used on both client and server-side. Javascript is the brain behind a website/ web application and is considered as the hallmark of the approach. In the case of JAMstack, the Javascript lives on the client-side, handling the request and response through the CDN.

There are numerous frameworks like Vue, React, Vanilla that make the development process easier and organized, providing you with the tools, libraries, and component APIs.

APIs

APIs provide a dynamic touch to the website. It allows you to utilize the backend functionalities without requiring to interact with the database, hence setting up a server. The API has expanded the territory of JAMstack, taking your static websites to another level, making it a hyperdynamic website packed with the advantage of static websites.

Markup

Markup is the HTML code that provides structure to your website like any other approach. The difference in the functionality is that in the traditional approach, you ship the code to the server and it creates the HTML code dynamically, however, in the JAMstack, you pre-execute the code, create the HTML file, and then ship the files statically to the CDN instead of the server.

To do this, the static site generators like Next.js, Gatsby, Hugo, and Docsify,  proves to be quite helpful, empowering you to pull in the API sources and convert them into HTML files before execution.

How JAMstack Workflow Differs From the Traditional Workflow? Check out at JAMstack - The Architecture of the Modern Web.