What is Jamstack? [Part 1]

Jamstack is no longer just a buzzword among developers. Jamstack has grown into an ecosystem of tools that assist developers in creating high-performance websites, progressive web apps, and other projects, offering undeniable benefits.

 

Famous companies are also diving into the Jamstack realm. For example, following Microsoft's announcement of Azure Static Web Apps earlier this year, Cloudflare recently announced a similar service called Cloudflare Pages. Additionally, commercially popular brands such as PayPal, Nike, Braun, Shopify, and FreeCodeCamp are also paying attention to Jamstack.

 

In such situations, many developers tend to focus on the debate of whether Jamstack is superior to WordPress, which has been utilized so far, often forgetting the benefits from the perspective of end users and business users.

 

For us at Bejamas, Jamstack has brought significant benefits in building websites and web applications for our clients. However, the technology stack we can use depends on previous projects, so we cannot always freely choose Jamstack.

 

This article explains the basic concepts of Jamstack, the differences from traditional stacks, and why Jamstack is an excellent solution for web developers and clients.

1. What is Jamstack?

JAMstack is an acronym created by Mathias Biilmann, the CEO of Netlify, which stands for JavaScript, API, and Markup. However, Jamstack means much more than what its initials suggest.

 

Jamstack refers to an architecture for web development. It allows for dynamic content updates using a database-driven CMS while enjoying the benefits of static websites that provide excellent performance and security.

 

The Jamstack approach allows for the deployment of pre-built static files on a CDN as well as the creation of fully dynamic sites. Dynamic content is processed by client-side JavaScript and is typically executed via serverless functions.

 

To accurately understand Jamstack, let's compare the reigning champion of web development, the LAMP stack process, with the challenger, Jamstack.

 

1-1 Static Development Process vs. Dynamic Development Process

The LAMP stack web development architecture is derived from four open-source components used by developers to build websites in the early 2000s: "Linux", "Apache HTTP Server", "MySQL Database", and "PHP Language".

 

In a LAMP stack, when a user requests a page, the server queries the database before the page is displayed in the browser, combining the results with the page's markup and plugin data. As a result, it generates and displays an HTML document in the browser.

 

 

On the other hand, websites using Jamstack can display optimized HTML files. There is no need to query the database every time a page is requested, as with LAMP. This is because files are served directly from the CDN to the browser, and optimization occurs each time the page is delivered.

 

In other words, using Jamstack dramatically increases development efficiency and significantly reduces unnecessary maintenance.

 

1-2 Is Jamstack Static?

It is static, but it also has dynamic aspects. Websites built with Jamstack certainly generate static files, but those files are not without dynamic elements. Functionalities such as forms, comments, and payment gateways are typically handled by third-party APIs (Application Programming Interfaces).

 

In the case of Jamstack, the term "static" does not mean "fixed" but rather "server-free" because there is no need to go through a server to handle dynamic parts. There are many business advantages as well, which will be explained in detail below.

 

1-3 History of Jamstack

Did you notice that I was writing JAMstack and Jamstack?

 

The term JAMstack is a coined word created in 2016 by developers who wanted to name a different approach to building static websites. It refers to an approach that includes many benefits provided by modern CDNs, such as the decoupling of the backend and frontend, and the separation of the build stage and hosting stage.

 

Initially, the J A M in Jamstack stood for JavaScript, API, and Markup. Client-side JavaScript interjects dynamic programming during the request/response cycle. Reusable APIs are accessed via HTTPS using JavaScript, abstracting all server-side processes and database actions. The role of the API is to utilize additional functionalities. The templated markup needs to be pre-built at deployment using build tools for site generators or web applications.

 

As mentioned at the beginning, the term Jamstack has evolved to refer not only to J A M but also to the larger ideas and best practices behind it.

 

1-4 Efficient Ways to Learn Jamstack

To fully leverage the benefits of Jamstack architecture, we recommend learning according to the steps outlined below.

 

・Page delivery from CDN
・All code is managed with GIT
・Automatic builds and atomic deployments
・Cache can be invalidated immediately
・Using modern build tools

 

We will ensure that we can address all the contents mentioned above.

 

Adoption of Jamstack 1-5

Supported by the advantages of the Jamstack architecture, its unparalleled development methods, and tools, Jamstack has gained attention in recent years, with a remarkable increase in the number of sites adopting it.

 

Let's take a look at the latest 2020 Web Almanac Jamstack year-over-year comparison adoption data.

 

 

You can see that Jamstack is definitely growing.

 

1-6 The Jamstack Ecosystem

The widespread adoption of the Jamstack approach has had a multifaceted impact. This includes the expansion of browser capabilities (such as Chrome and Firefox), the growth of the API economy, the increase in SSG (Static Site Generators), the rise of headless CMS solutions, and the utilization of advanced CDNs (Content Delivery Networks) for content delivery.

 

Additionally, these growths have led to a rapid expansion of the Jamstack ecosystem. For example, there are currently over 300 static site generators being used in Jamstack projects. New services are being created daily that provide API integrations to handle additional features such as search forms and videos.

2. Why is it necessary to use Jamstack?

It is important to choose the optimal solution for each use case and to consider cost reduction in business decision-making. Today, while it is essential to establish a website, it is also necessary to compare the advantages of different methods for setting up the website and make a decision accordingly.

 

When talking to engineers about Jamstack, I believe they will quickly understand its convenience. However, in many cases, there are more opportunities to talk to business owners who are interested in the benefits that Jamstack brings to business compared to traditional web development represented by WordPress.

 

So, what are the benefits of Jamstack?

 

2-1 Performance

By being able to directly deploy pre-built static files from the CDN, it is possible to achieve loading times that are incomparably faster than server-side or high-load client-side rendering solutions. Furthermore, since static files are deployed, it can instantly respond to unexpected surges in traffic.

 

Website performance significantly impacts user experience, subsequent website traffic, and SEO efforts. User experience has always been challenging to track, measure, and optimize, but the introduction of Core Web Vitals metrics has made this possible.

 

These performance metrics were set up to be measurable through the UX that users actually experience, so we assume they will serve as valid metrics for how almost every web page feels. (From Simon Hearnes' blog post How to Improve Core Web Vitals).

 

The key point is that optimized websites are favored over slow websites. While there are certainly benefits in terms of better UX and improved visibility, the most important aspect is that they rank higher in Google searches, leading to increased traffic and higher revenue.

 

2-2 Security

Database and server security is handled by third-party services. In Jamstack architecture, the front end and back end are separated, relying on APIs to execute server-side processes.

 

Jamstack offers security advantages that other methods do not. Because services are clearly separated, it makes it harder to identify individual vulnerabilities.

 

2-3 Scaling and Hosting

Scaling can be tricky, but since files are served from a CDN, you won't feel it. CDNs are almost infinitely scalable, so you can get that by default with the Jamstack approach. Additionally, it is possible to reduce costs regarding hosting. CDN hosting for static files is much cheaper than traditional hosting.

 

2-4 Maintenance

Jamstack aims to push the front end to the edge rather than directly managing the infrastructure. By omitting the maintenance of databases, plugins, and hosting servers, it leads to a reduction in operational and development costs.

 

2-5 Developer Experience

From a developer's perspective, is there something that is not pleasing? Netlify and Vercel already have the Github→CI/CD→CDN flow in place. Automatic previews, easy rollbacks (no backup needed, instant publication of the previous version), a local development environment that allows execution and debugging of cloud features locally, management of redirects, HTTP headers, and rewrites through a single configuration file.

 

In addition to all of the above, flexibility, meaning there are no constraints between the front end and back end, allows for more focused development by adding functionality using third-party API solutions. Instead of finding solutions within the constraints of the back end, you will be able to tackle the project first using business logic.