JAM Stack: the future of websites?

#Frontend #Technology

Written by Henrique Vieira

13 Jul 2022

Have you ever heard of the JAM Stack, this "new" development architecture that is gradually taking the web world by storm? According to its principles, we serve static HTML, CSS and JS files directly from the server, without pre-processing the data and without having to go through a back-end that generates all the data. All the interactive part is done via Javascript. Amazing speed, lower hosting costs, eco-friendly... Its qualities make you dream and its negative points are minimal. The future of the web ?

JAM Stack: the future of websites?

So... "the future of the web", yes, but you have to know that the story is older. In its early days, the web already used this principle: in the hard disk of a distant server lived html, css and javascript files, and when we called them, the server sent them directly to our browser, which rendered them. No pre-processing of the data by a back-end. The content was already ready! This guaranteed a very high speed (hardly spoiled by the connection speed at the time).

With the evolution of the web, a lot of functionalities have been moved to the server side, which is no longer satisfied with just serving files but, on the contrary, generates all the content (the markup and its dependencies) in the server via a back-end to finally send it in html, css and javascript format to our browser.

This has its advantages, especially that of not asking too much of the user's hardware. Indeed, a server can be more robust and have more data processing capacity to generate the final content - lighter - which will then be consumed by the visitor's browser.

This has created a very established dynamic today in web client-server relationships. We request a page: the back-end causes the server to process the data, convert it into static files, send it to us and we read it. Then we click on a link for another page: the server processes the data, converts them into static files, sends them to us and we read them. We do a search, the back-end processes it, the server generates it, converts it, sends it to us... and so the story repeats itself throughout the visit.

All this requires a lot of resources - from the server and the connection. The server is constantly being used (processing power) to resolve the back-end, which consumes energy and time. And the connection is constantly being activated in the many calls back and forth. In addition to consuming a lot of resources, we can actually feel the time it takes when we are browsing.

The JAM stack wants to be different. What if we made sure that all the content of a site is already ready before we ask for it and still maintain all the interactive and dynamic capabilities that exist in modern sites? As in the past, we could just call the server to send us the files without having to work on them. This requires (much) less time and resources from the server side. And less resources means less hosting costs and a much smaller carbon footprint.

But then... no back-end for our site? And how will we edit our content? All the information in the JAM stack is done via API calls. Instead of generating all the markup for the page, it is already ready and, thanks to javascript, only calls the specific information (texts, images) that we need for the page. So we can have a custom API that will serve our front-end as we go along.

Even better: frameworks like Next.js, Gatsby or Nuxt allow to render pages with information at build time (when we put the site online). Thus, static files are already populated with information.

With the use of webhooks (a call that comes from our api to inform that a change has been made), we can then regenerate the specific page that will have been edited and that, from then on, will be a static page too.

The result is a completely customizable site that still has incredible speed and requires very little server side activity.

Speed of loading, lower hosting costs, eco-friendly... The positive points are numerous!

If you have any questions or comments about this workflow, please contact us. We will be happy to discuss it with you.

Cours Saint-Michel, 30A - 1040 Etterbeek +32 (0)2 319 44 73

Let's talk

Do you have specific questions or do you want more information? Do not hesitate to contact us to set up a meeting.

Do you already have a clear vision of your project? Answer a few questions to receive an offer!

Facebook Instagram Linkedin

They trust us

For the past years, we had the chance to work closely with a wide range of companies, from SMEs to multinational groups, to deliver high-end digital projects.