Copy to clipboard
Twitter Facebook

Jamstack is an architecture that was created to build modern websites and mobile applications. It is supposed to be very scalable, fast, and SEO friendly. JAM stands for JavaScript, APIs, and HTML Markup. Which is the greatest about it, Jamstack doesn’t even require a database. Thanks to static site generators it’s pre-rendered, frontend is decoupled from the backend, and because of the possibility to skip the webserver, Jamstack apps guarantee excellent performance from the client-side.

Well. Great. Have you understood enough about Jamstack until now? Because that’s mostly what you can find about it online at this moment. Web developers are pretty satisfied with these kinds of explanations, but how about you?

Don’t you prefer some more details about this web development architecture, so you can truly understand why should you put your money into creating a Jamstack website? You shouldn’t have needed to possess any developer experience to understand the basics of the technology you want to make use of, right?

So let’s get started and jump into this modern web development solution in a more appropriate way. In a way which will make you sure why it’s really worth to spend some dollars for it.

Jamstack infographic, JavaScript, APIs, Markup

Let’s ask again: what is this team of JavaScript APIs and Markup?

Jamstack indeed stands for JavaScript, APIs, and Markup. However, it doesn’t even mean that developers need to use JavaScript itself every time. It is called out here because it’s the language of the browser. Many Jamstack sites are built with Python, Ruby, or even Go.

Very loosely said, it is a way of creating the application. It’s not exactly a tool like you can think of when you hear this term for the first time, but a specific method of development.

As you know, every single website has some content. There is nothing to present to the customers if the box is empty. Pictures can be a good example of it. But the content is not enough, of course. If you want your customers to see any site on their desktops, there needs to be a presentation layer as well.

To make it all happen, we need the software layer. That’s the magic that retrieves your content from the database, wears on it pretty HTML “clothes” and returns it all to the browser. It means that every single page is regenerated each time the servers receives a request for the URL. In simple words: every time when your customer wants to see something on your website, the client needs to “ask” the server for the information and wait to get them. It’s like you needed to ask your wife (or husband) where the sugar is when you want your coffee. Not really efficient, isn’t it?

It’s because until now, all these elements were attached to each other. Frontend (what your visitors see in their browsers) was glued to the backend (the database and software layer).

What Jamstack does is… freedom. No longer asking for the sugar each time you want to drink your cappuccino. Frontend and backend are decoupled from now on. Frontend is pre-rendered globally thanks to the static site generator (like Gatsby, Jekyll, or Hugo).

It means that your site can be served to the customers right from their closest CDN (content delivery network). It reduces the chances of hackers attacks (they can’t reach the database), makes the rendering process faster (as CDN is right next to the client), and it’s just cheaper (because there is no need for a constant request from the client-side to the webserver). You can choose some Jamstack-friendly Content Delivery Network like Netlify, Cloudflare, and Akamai. This is actually your markup. If this word brings to your mind another - makeup - that’s an excellent way to think about it actually. What the client sees is the light, colorful makeup of your store. Its heart, however, is deeper, and it is much more dynamic than a face. Like a backend.

Thanks to this, Jamstack sites are more human-friendly and SEO friendly. Google bots don’t have troubles, so they are indexed fast, and because of high performance they have more chances to go higher in SERP (search engine results page).

Doesn’t it sound great?

Traditional communication with sever VS jamstack

Can I build my e-Commerce with Jamstack?

When we talk about business sites, that may be the end, but there is also e-commerce, right? If you want people to purchase anything online, the website can’t be static. It would be impossible for customers to use it. It needs to give them the possibility to pay for an item. You also want them to know if everything is really available or out of the stock already. There are also many other applications you want to include on your website. Is it even possible with Jamstack?

The answer is: yes, of course! Have you ever heard the term headless CMS (content management system)? This is where Jamstack can show its benefits again. Normally, when you think about an online store, you think about WooCommerce, Magento, Shopify, or PrestaShop. But let’s be honest, all these themes are pretty boring. When you’ve been in this business for a while, you know that to be truly individual, you need to work on your own great layout.

Going headless is definitely a better developer experience than writing in Liquid for example. It is also better for your store because, as I said before, by decoupling the frontend from the backend, your website gains speed, security, and great performance. In this case, your API can be the Jamstack-friendly CMS. If you’re not sure which one to choose, have a look at our favorite top 15.

APIs also allow you to use other microservices, like Stripe. They will cover everything from remembering the baskets, delivering a great checkout experience, and proposing an easy and user-friendly payment system.

Graphic showing : as much as possible is pre-rended

Who is Mathias Biilmann?

If you’ve been searching for more information about Jamstack itself, for sure you already know this name. That is why I think it’s worth saying at least a few words about Mathias (who is also a CEO and Co-founder of Netlify).

Some people think that he is an inventor of Jamstack but as this tech stack isn’t actually a specific technology, and it doesn’t have any unbreakable rules, it would be a mistake.

Before it received any name, many web developers out there were already building sites in this way. They remembered how it was in the “old-times” without all these CSS and dynamic solutions. They remembered how fast were sites build with HTML. That is why some of them tried merging the old style with the new style.

Mathias Biilmann was the guy who created the term we use these days.

What is a static site generator?

A static site generator is basically a set of tools to allow developers to create a static site. This site contains multiple HTML pages that are deployed to the HTTP server. These sites are actually folders and files, so they don’t require a database or server-side rendering. That is why requesting a page is so fast. Because there is no need for searching further. The server has all the files already, so it just matches them and sends them back to the client. One of the most popular SSGs right now is Gatsby JS.

Like Jekyll or Hugo, Gatsby is an open-source static site generator (SSG). It has its start in 2015 and was created to build sites with React in a simple way. However, it started getting so popular after 2018 when it became even better and more useful. It is based on the frontend development framework React. Not only that, but it also makes use of GraphQL technology and Webpack.

What makes it the number 1 choice of many developers creating PWA (progressive web applications) and Jamstack sites is that it’s very well-supported. Developers are keeping contributing new plugins, and it’s effortless to find some help when the problem occurs.

Gatsby JS is a great solution when it comes to dynamic web development. I know, it may sound weird as it’s the static site generator, but it’s true. As we wrote in our article about Gatsby JS and Jamstack, thanks to Gatsby we’re still prefetching and loading static elements as much as possible, with cuts down on loading issues, saving any computational power for those dynamic elements we need.

Finally, Gatsby works perfectly fine with almost every available CMS (content management system) which works as a database when we build an e-commerce site.

Statig Site Generator gets Markup and shows Static State

Let’s summarize what we know about Jamstack.

Jamstack:

  • stands for JavaScript (which doesn’t mean that developers need to use JavaScript in every project), API (which gives the dynamic we want), and Markup (which delivers the pretty face of the website),
  • sites are globally distributed,
  • is very developer-friendly,
  • uses API to deliver all the microservices you need,
  • is designed and prebuilt before serving,
  • is safe, fast, and excellent for SEO,
  • doesn’t mean that your website needs to be static itself: you can build with it a great, dynamic e-commerce site while keeping the high performance and cuttings costs (no webserver).

How should I get started?

First, you can think about all this money you’ll earn thanks to cutting costs and delivering the best experience to your customers.

Later, you can get your free estimate and start the revolution today!

an