July 16, 2022 • 7 min read

Jamstack. What, why, how?

Websites and apps created with this new architecture characterize performance, security, and scalability.

Last updated: August 24, 2024

Jamstack is an alternative approach for creating websites and applications. It differs from traditional monolithic architecture.

At the same time, it's not a bunch of random letters. People in the computer science field like acronyms. Jamstack is not an exception. The following letters mean:

• JavaScript - a scripting language interpreted by browsers. It is responsible for the dynamic parts of a website. You don't need to use vanilla JavaScript. Pick one of many frameworks if you like. The joke says that every six months, there is a new one.
• APIs - interfaces that define interactions between software. Back-end operations - in this architecture - are abstracted to the APIs. You can reach them via HTTPS protocol.
• Markup - document in some format. Pages - in this approach - are served as HTML files. You can generate them with Markdown, MDX, or Static Site Generator.

Nevertheless, Jamstack is not a specific technology. This stack is not controlled (or defined) by any corporation. It is more like a movement and a community. Jamstack is a set of good practices and a working system. The system is convenient for developers and produces websites friendly for the users.

Why (not) use this approach?

Jamstack is the answer to many well-known problems associated with web development.

Better performance

Website performance matters. Web crawlers index websites considering performance as a significant factor. Users may leave if your website is loading slowly. I'm a patient guy (hey, I'm sitting here typing for another hour), but my patience is on the edge when I wait for a damn website to load. But I'm not alone. There was a study about tolerable waiting time. Most users are willing to wait for just about 2 seconds. And not all of them have fast internet connections.

Jamstack approach precompiles pages. A user, after a request, gets a finished page. You don't need to send many requests to different servers. CDN sends your website with all the assets. Distributed nature of a CDN allows sending them from the nearest edge. It shortens the route the files need to travel, and it saves time.

Scalability

The use of a CDN makes scalability easier. You don't need to worry about spikes in the number of visitors. If your website gets popular, a CDN will handle additional traffic. Many servers (edges) will send your files, not just one.

Cost reduction

As I mentioned, Jamstack projects mainly consist of static files and assets. Hosting for such files is cheap or even free. Netlify is a platform that has a free plan (no, it's not an ad).

Besides hosting fees, Jamstack lowers the costs of a team. Simpler architecture requires a lower number of people to maintain it. DevOps operations are simpler. Such a project doesn't require many specialists with narrow expertise.

Improved security

Simple architecture has one more benefit - improved security. Less number of elements means fewer weak links. You don't have to worry about server or database breaches. Hackers have a smaller attack surface to penetrate.

Developer's convenience

Simplifying some tasks have a positive effect on a developer's working comfort. On their mental health, probably too. You don't have to focus on complex configurations - you can focus on writing code. And a happy developer is a productive one. It may make the project better.

There is no silver bullet

In software engineering, there is no silver bullet. There is no magic solution that solves every problem. Jamstack is not an exception and has cons.

The necessity of building an app

Procompilation can be great, but it has flaws. Every change on the website needs to be preceded by the build phase. The changes are not instantaneous. It can be a problem for huge websites that change often. In their case build phase may take too long. And that costs time and money. Because of that, I would not advise making a new Facebook based on this approach.

Use of dynamic data

The dream of becoming the next Zuckerberg with this approach can be problematic for another reason - dynamic data. You can't generate users' (or other real-time) data earlier. Some applications cannot avoid them.

At the same time, it's not like you cannot create anything dynamic. Developers create Jamstack sites that are regularly updated. I've created this blog with Jamstack, although posts are published regularly (let's say). You can develop e-commerce with it. The problem may occur on a large scale - with numerous subpages and frequent updates.

Dependence on external services

Microservices are substantial for this approach. Most of the third-party APIs and other services are solid. Nevertheless, if one of these services fails, your app will lose some functionality. It's not so different when one of your servers fails. But you have more control over your server.

How to implement this approach in the next project?

To create a Jamstack project, you need to make decisions in several aspects.

Content creation

Contents in a Jamstack project are usually simple text files. They are in the same file structure as plugins, templates, and assets. Using Markdown or MDX, you can generate HTML pages that use custom components and templates (this blog post uses such a template). But, creating content this way requires specific syntax. For non-technical users, there are convenient alternatives.

Headless CMS is a service that offers a rich user interface available via browser. Using it, you can easily create and edit content. Headless means that only the data layer is editable. It's decoupled from the rendering layer (head), which you can choose. There may even be multiple rendering layers. Such a service exposes API for downloading data in the build phase. A few examples are:

• Sanity
• Contentful
• Strapi
• GraphCMS
• Ghost
• Headless WordPress

Git-based CMS allows maintaining content directly in the files controlled by Git. It may be interesting, especially for developers. There is no database in this case (no rhyme intended). A CMS like this also offers a rich user interface. It is a relatively new solution, so there are fewer alternatives:

• Netlify CMS
• Crafter CMS
• Forestry

Static Site Generator

Having content, we need HTML pages to present it. You could code them by hand, which is reasonable for tiny websites. But, for most cases, it's worth using a Static Site Generator. It does what the name implies - it generates static pages using provided content. Almost. The name may insinuate the result is non-interactive. But it's not the case! Generated files are static, but the finished website may have dynamic features. It's usually the domain of external APIs. There are many generators in different programming languages:

• Next.js
• Hugo
• Gatsby
• Jekyll
• Nuxt
• Eleventy
• and the list goes on.

External APIs

Many services offer various functionalities - from comments, through forms and searching to payment processing and e-commerce. You can even create your APIs, abstracting some logic into custom functions.

Deployment

When your app has all the required features, you need to deploy it somewhere. Today, on the market, there are some solid feature-rich hosting platforms. Beyond hosting, they offer options such as form processing, data analytics, and easy-to-configure CD. Check platforms like:

• Vercel
• Github Pages
• Firebase
• Azure Static Web Apps
• Digital Ocean

Can I board the Jamstack hype train?

Before making a website with this architecture, consider its pros and cons. This approach is not ideal for every application. If you've decided and want such a fast website or have questions - write to me.