Jamstack est une manière simple et accessible de revenir à la racine du web afin de construire des services légers

Les points positifs

Limitation des bugs

Étant donné que l’on compile l’ensemble des pages disponibles sur un site, le système les parcourt dans leur totalité et arrête la génération si l’une d’entre elles renvoie des erreurs. Contrairement aux sites classiques créés avec des langages interprétés, il faut manuellement aller sur la page contenant une erreur pour s’en rendre compte. Il existe des outils d’analyse de code, mais ce n’est pas suffisant.

Amélioration des performances

Côté utilisateur·rice, le site est beaucoup plus rapide car les pages sont stockées en cache. Certaines librairies / frameworks, comme Next.js, compressent les images et les convertissent dans des formats plus légers. A la clé, le poids des pages téléchargées par les utilisateurs·rices du site est nettement réduit.

Toutefois, la réduction de l’impact est transférée sur la partie compilation. Un site imposant, avec beaucoup d’articles, nécessite un certain temps pour être parcouru et utilise beaucoup de ressources sur le serveur. Contrairement à un site interprété où la mise à jour sera légère, avec une modification de fichier ciblé.

Ce désavantage est mieux géré par certains systèmes qui créent un MD5 (une signature de fichier) lors de la génération et la comparent à la précédente version. De cette manière l’outil sait quelle page doit être générée, et quelle page ne subit pas de changement.

Donc faire le choix d’appliquer Jamstack (ou non) dépend du site. S’il n’y a pas besoin de le rafraîchir trop fréquemment, c’est une solution parfaitement adaptée. Par contre, si le site est mis à jour constamment (ajout de nouvelles fonctionnalités, pages, types de contenus…), peut-être que Jamstack n’est pas la bonne solution.

Jamstack, le meilleur ami de Google, Bing…

Jamstack permet d’obtenir un contenu pré-généré et lisible par les robots de référencement Web sans activer Javascript. Les systèmes de Google conçus pour classer les sites Web n’ont pas de temps à perdre, et ils doivent comprendre les contenus très rapidement. Jamstack est parfait pour cela ! Contrairement à du contenu affiché grâce à des fonctions Javascript, le navigateur doit construire la page Web. Typiquement, un site Web ReactJS non statique ne sera pas bien référencé.

Prenons par exemple une page avec ReactJS accessible à cette adresse : https://new.csb.app/

Un clic droit permet de consulter le code source, avec le résultat suivant :

<title>React App</title>
<link rel="manifest" href="/manifest.json">
</head>

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run npm start or yarn start.
To create a production bundle, use npm run build or yarn build.
-->

Résultat : les robots d’analyse de site Web ne voient aucun contenu sur cette page Web. ReactJS doit être interprété par le navigateur ; celui-ci va placer le contenu « Hello CodeSandbox » dans la balise :

<div id="root"></div>

Voici le résultat après l’interprétation du navigateur :

<div id="root">
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
</div>

Le code source utilisé comme démonstration sur le site de ReactJS est disponible à cette adresse : https://codepen.io/pen?&editors=0010&layout=left

De son côté Jamstack permet d’obtenir directement du contenu HTML, compris par le robot plus facilement.

Désavantages de Jamstack

Les mises à jour peuvent poser problème si un processus automatisé n’a pas été établi de bout en bout. Typiquement si vous réalisez votre mise à jour manuellement, vous effectuerez des tâches chronophages régulièrement.

Prenons le cas d’un ajout d’un nouvel article sur un blog. Une fois sa rédaction achevée, il faut le mettre en production. Ce qui signifie « re-compiler » le site, puis l’uploader sur le serveur. Ce processus n’est pas instantané, au contraire d’un article sous Wordpress pour lequel la mise à jour est quasiment immédiate.

Il existe cependant des solutions pour réduire la charge de ce processus. Traditionnellement, un site Jamstack est versionné sur un serveur Git (GitHub, Bitbucket…). Après un push (envoi d’une ou plusieurs modifications) sur un serveur de version, un pipeline (processus) lance la commande de compilation du site. A la fin du processus, les fichiers sont transférés sur le serveur. Il est aussi possible de réaliser l’opération manuellement.

A retenir

Jamstack est une solution majoritairement utilisée par la communauté des développeurs·ses afin de répondre aux enjeux mondiaux actuels de transition écologique. Tout simplement car ces sites sont plus légers et plus économes en ressources (électricité, eau…).

Ils permettent aussi aux utilisateurs·rices finaux·ales d’éviter de changer de smartphone ou d’ordinateur. Le raccourci est facile : « Mon téléphone est lent, il met du temps pour afficher des sites Web ». Et si le problème était plutôt que les sites sont lourds, et qu’il devient indispensable de les alléger ? Créer un site eco-conçu et léger participe à réduire l’impact du numérique : un appareil non renouvelé, c’est toujours autant de ressources naturelles économisées. Même si, évidemment, Jamstack ne fait pas tout puisque d’autres variables entrent en jeu : serveur, localisation, gestion des images, design du site…

La suite ?

Pour se lancer dans l’aventure Jamstack avec un petit projet, Hugo (hugo.io) est une solution appropriée pour démarrer. Pour un site plus complet et avancé (formulaire, composants Javascript…), Next.js fait parfaitement le travail.

Vous pouvez passer sur un autre hack en découvrant le générateur Hugo recommandé par la communauté Jamstack :

Jamstack pour des sites web rapides et sécurisés

Avantages et inconvenients de Jamstack