{"id":9365,"date":"2021-11-11T13:29:31","date_gmt":"2021-11-11T11:29:31","guid":{"rendered":"https:\/\/www.antartika.it\/news\/jamstack-ovvero-perche-il-mio-sito-e-piu-svelte-del-tuo\/"},"modified":"2021-11-11T16:05:00","modified_gmt":"2021-11-11T14:05:00","slug":"jamstack-why-my-website-is-faster-than-yours","status":"publish","type":"post","link":"https:\/\/www.antartika.it\/en\/web-development\/jamstack-why-my-website-is-faster-than-yours\/","title":{"rendered":"Jamstack: Why My Website Is Faster Than Yours"},"content":{"rendered":"\n

TLTR<\/strong><\/p>\n\n\n\n

There are various approaches to the architecture of a website or web application. One of the emerging solutions is called Jamstack, which has very specific characteristics (function decoupling, content pre-rendering, modularity, GIT-based, and versioning) that lead to significant advantages in terms of performance, security, scalability, and cost-effectiveness.
The Jamstack approach’s main drawback is the need for more effort (time and costs) compared to pre-packaged solutions, making it suitable only for those seeking quality and performance.<\/p>\n\n\n\n

\n

Introduction<\/h2>\n\n\n\n

In a recent article<\/a>, we discussed how our website achieved the highest possible score on web.dev\/measure<\/a>, Google’s official tool for measuring website performance. For the mentioned site, falegnameriamuraro.it<\/a>, we implemented an innovative web architecture called Jamstack,<\/strong> using a JavaScript framework named Svelte *<\/strong>.
In this article, we aim to describe the technological choices we’ve made to illustrate, and hopefully make understandable, the differences, advantages, and disadvantages compared to more well-known and conventional solutions.<\/p>\n\n\n\n

* For this project, the stack is complemented with Tailwind CSS for styling, Netlify CMS as a headless CMS, and Vercel for deployment.<\/em><\/p>\n<\/div><\/div>\n\n\n\n

\n

The Jamstack Architecture<\/h2>\n\n\n\n

At the foundation of everything lies a new method, a new paradigm for creating websites and web applications, which has been named Jamstack<\/strong> (originally JAM<\/strong>stack). Mathias Biilmann, CEO and founder of Netlify, a company that provides cloud computing services focused on these technologies, coined the term. Here’s his definition of Jamstack:<\/p>\n\n\n\n

\n

“A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup”.<\/p>\nMathias Biilman<\/cite><\/blockquote>\n\n\n\n

Jamstack is not a language, framework, or tool.<\/strong> It’s an approach to web architecture, grounded in these three pillars:<\/p>\n\n\n\n

    \n
  • JavaScript<\/li>\n\n\n\n
  • APIs<\/li>\n\n\n\n
  • Markup<\/li>\n<\/ul>\n\n\n\n

    Javascript<\/p>\n\n\n\n

    All dynamic functionalities are managed through JavaScript, the programming language of the web, in its various forms and manifestations, libraries, and possible frameworks.<\/p>\n\n\n\n

    API<\/p>\n\n\n\n

    All server-side functionalities are abstracted and encapsulated within reusable APIs. These are standardized procedures that allow a software application to integrate and communicate easily, securely, and efficiently with other applications.<\/p>\n\n\n\n

    Markup<\/p>\n\n\n\n

    The Jamstack architecture relies on HyperText Markup <\/strong>Language content, the web standard, served as simple static files that are distributed across the network in the fastest and most efficient manner possible, through a Content Delivery Network (CDN).<\/p>\n\n\n