Hey everyone, in this blog we’ll be learning about

• What is Jamstack?
• Benefits of Jamstack.
• Approach towards a Jamstack project.
• Jamstack site generators.

So let's get started ✨.

What is Jamstack?

Jamstack is a system to build fast, lightweight web apps with minimal efforts.

Jamstack is powered by

• JavaScript
• APIs
• Markdown

It is a method to deliver static websites to the user with ease of development. Instead of serving dynamic content using a huge backend, dynamic parts of the websites are powered by APIs. This makes the website snappy and fast as the JavaScript shipped to the user is reduced.

The website's static part is stored in a CDN so the website will be loaded swiftly. Using this technique we can divide our project into small islands in which we can add JavaScript to some of the island thus resulting in lighter websites. This technique is called island architecture.

How does Jamstack handle backend functionality?

Backend is a piece of code that runs on a server without exposing itself to the user. So to handle the backend functionality, Jamstack uses APIs through which we can fetch and send data to the server, which will further send us the computed data.

We can make our custom APIs for niche tasks using any backend framework like ExpressJS and use them in our web apps.

Why should we use Jamstack?

• Swiftness

  • The website can be blazingly fast as the majority of the content will be statically served with minimal JavaScript shipped to the user.

• Scalablity

  • Since the backend/API is developed independently, scaling the website wouldn't be a tedious task, and due to the fast speed, heavy traffic can be managed smoothly.

• Developer Experience

  • People always give importance to the user experience (UX), but very few folks pay attention to the developer experience (DX). Using Jamstack web apps can be easily developed with a straight-forward approach.

Approach towards a Jamstack project.

There is a very straight-forward approach to be followed while developing a project using Jamstack.

• Divide the project into islands.
• Use HTML/CSS for static parts/islands.
• Hydrate the dynamic islands with JavaScript.
• Use APIs to build dynamic components.

Jamstack Generators

There are a ton of generators for Jamstack. Here are some static site generators for Jamstack sites.

• Astro
• Eleventy
• Hugo
• Gatsby

Thank you for reading the blog, hope it was helpful.
Until next time 🙌🏻.