Jamstack : définition, avantages et bonnes pratiques pour moderniser les architectures web

Youssef El Behi, craftsman expert web et mobile chez Bewizyu

Après une expérience en tant que lead développeur, chef de projet et chef d’entreprise, j’accompagne aujourd’hui les clients de l’agence dans toutes les étapes de la vie de leurs produits digitaux. Chez Bewizyu, nous co-construisons avec nos clients et pour leurs utilisateurs des solutions digitales innovantes et sur mesure, à travers nos trois expertises : create, make, learn.

Qu’est-ce que la Jamstack ?

Commençons par décortiquer et définir le terme. Stack correspond à une pile d’outils technologiques utilisés ensemble pour former un écosystème cohérent et communicant, afin de construire une application. À titre d’exemple, je peux citer quelques stacks populaires comme le MEAN et le MERN.

JAM est un acronyme, qui signifie :

• J comme JavaScript, le langage de programmation dynamique et performant utilisé partout et ayant des centaines de frameworks,
• A comme APIs, à savoir le back-end, le moteur qui dynamise le tout,
• M comme Markup, le HTML, ce qui va se voir dans le navigateur.

Une application Jamstack utilise ces différents outils, en suivant un ensemble de caractéristiques et de pratiques, telles que :

• Le découplage, c’est-à-dire la séparation entre le front et le back. Typiquement, le front est construit en utilisant un générateur de site statique. Le back-end est intégré avec le front en utilisant des APIs appelés durant la phase du build. On retrouve donc ici l’équivalent du J et du A.
• Le pre-rendering, correspondant aux pages JavaScript d’un site Jamstack, présentées avec des fichiers Markup construits et générés au préalable, à l’inverse d’une application web classique, où les pages sont construites dans leurs formats Markup à la demande, à chaque fois que l’utilisateur affiche la page. On retrouve dans cette notion le M de la Jamstack.

Quel est l’objectif de la Jamstack ?

L’évolution du développement web ne s’est pas faite sans heurt. Au début, tout était simple. Les premiers sites web construits n’étaient qu’un dossier avec des fichiers HTML accessibles par le navigateur. Seul le HTML contrôlait ce qui devait être servi à l’internaute.

Le premier changement est apparu dans la manière de gérer le contenu. L’utilisateur pouvait accéder à un contenu personnalisé et dynamique, qui se construisait à la demande via un serveur consultant une base de données. Un problème majeur s’est alors posé, car pour aller chercher ce contenu dynamique et le servir à l’utilisateur, il a fallu plus de ressources, ce qui a conduit à un appauvrissement des performances, bien en-dessous de celles des simples pages HTML statiques. Le dilemme consiste à conserver les performances inégalables du markup classique (non seulement du point de vue utilisateur, mais aussi des crawlers), tout en gardant la possibilité de fournir un contenu dynamique et une expérience interactive.

C’est là que la Jamstack est arrivée à la rescousse, avec une architecture et des outils conçus pour concilier ces exigences. En résumé, la Jamstack permet de délivrer un site web statique, tout en fournissant un contenu dynamique, pour proposer une expérience utilisateur interactive et moderne.

Quels sont les avantages de la Jamstack ?

Les avantages de la Jamstack sont nombreux. On retrouve notamment :

• Des performances idéales avec un chargement de pages rapide, ce qui impacte positivement l’expérience utilisateur, le SEO et la conversion,
• Une sécurité accrue et une maintenance facilitée grâce au découplage et à la possibilité d’utiliser un hébergement simple ou un CDN,
• La portabilité des sites Jamstack pré-générés permettant à un large ensemble d’hébergeurs de les servir sans complexité de configuration,
• Une meilleure expérience développeur.

Pour quels types de sites la Jamstack est-elle adaptée ?

La Jamstack est adaptée de plusieurs manières à tous types d’applications. Cependant, il y a des cas où la Jamstack apporte de vraies solutions et d’autres cas où son utilisation apporte plus de complexité que de solutions. La performance, le SEO et l’expérience utilisateur sont les points les plus importants à prendre en compte quand on veut exploiter pleinement le potentiel de la Jamstack.

Cas n°1 : développer un site web e-commerce

Mes principales problématiques sont les suivantes :

• Comment faire apparaître mon site en haut des classements des moteurs de recherche, pour attirer de nouveaux clients ?
• Comment gérer un grand flux de clients et de connexions simultanées, tout en gardant de bonnes performances ?
• Comment fournir à mes clients une très bonne expérience utilisateur pour augmenter mon taux de conversion ?
• Comment rendre mon site flexible aux changements, d’un point de vue du contenu et des fonctionnalités ?

Bonne nouvelle : la Jamstack est taillée pour adresser précisément ces différentes préoccupations. Tout d’abord, grâce au pre-rendering dans ses 2 modes SSR (Server-Side Rendering) et SSG (Static Site Generation), qui peuvent pré-générer un markup prêt à l’emploi et bien géré par les crawlers. Ensuite, l’utilisation des technologies et des frameworks JavaScript modernes permettra à votre site e-commerce d’allier performance, SEO et UX sans faire de concession.

Pour la gestion de contenu, on peut faire appel à un outil révolutionnaire : le headless CMS (CMS sans tête en français). Ce qu’on définit par « head » dans ce cas, c’est la couche de présentation (ce qui est vu par l’utilisateur). Un « headless CMS » dissocie le head du body, à savoir le contenu et sa gestion. Grâce à cette séparation, on gagne un ensemble d’avantages : plus de flexibilité, la possibilité d’ouvrir son back-end à plusieurs plateformes via l’API (mobile, web, desktop, etc.), plus de sécurité et une meilleure expérience développeur.

La Jamstack est donc un bon choix pour un site e-commerce ou pour un site soumis aux mêmes exigences de performance, de SEO (rank, visibilité, partage social) et d’UX avec des landing pages, blogs et outils SaaS.

Cas n°2 : développer un portail client ou un back office interne

Dans ce cas, l’expérience utilisateur est la top priorité et le SEO importe peu. Ici, la Jamstack serait surdimensionné et impliquerait le recours à des fonctionnalités et des pratiques inutiles.

Cas n°3 : développer un réseau social

Un réseau social dispose d’un contenu hautement dynamique ayant un très grand volume de pages à générer. Ici, l’utilisation de la génération statique est contre-productive et va ralentir les mises à jour. Mais la Jamstack reste envisageable dans ce type de projet, à condition d’être utilisée avec précaution et savoir-faire. En effet, l’adoption de stratégies de génération adaptée, comme la SSG (Static Site Generation) ou même l’ISR (Incremental Static Rendering), peut résoudre des problèmes d’efficacité SEO.

En quoi la mise en place d’une architecture Jamstack est bénéfique pour les équipes tech dans une entreprise ?

Comme évoqué précédemment, l’un des avantages majeurs de la Jamstack est l’amélioration de l’expérience développeur :

• Au niveau du front-end, avec l’utilisation de frameworks web Javascript déjà populaires comme React : sans obstacle ni limitation, l’équipe de développement peut tout à fait conserver sa stack technique et l’adapter à la Jamstack, tout en y gagnant en ressources, en flexibilité et en expertise.
• Au niveau du back-end, avec l’accès à des outils comme le headless CMS ou la réutilisation des APIs qui permettent d’accélérer les développements : cette architecture débloque tout le potentiel de l’industrialisation, ce que ne permet pas l’usage des CMS classiques.

L’architecture Jamstack représente ici un vrai potentiel de gain de temps pour les équipes tech et entraîne par conséquent une diminution des coûts de développement.

En quoi la Jamstack permet de s’émanciper de l’usage des CMS ?

La Jamstack ne remplace pas systématiquement le CMS. Cependant, dans les cas où elle le peut, de nombreux avantages sont à la clé pour le projet :

• La Jamstack peut offrir la majorité de ce qu’un CMS classique peut proposer, et quand son utilisation est possible et cohérente, elle est beaucoup plus efficace qu’un CMS,
• La possibilité d’inclure d’autres plateformes (application mobile, desktop, IoT, autres micro-services, etc.) grâce au découplage — le front et le back n’étant plus dans une architecture monolithique totalement liée, ils sont désormais communicants via l’API,
• Une meilleure expérience développeur,
• Une sécurité incomparable,
• L’industrialisation grâce à la possibilité et la facilité du contrôle de versions jusqu’au déploiement continu — n’ayant plus la contrainte des mises à jour régulières des plugins, on n’est plus obligé d’effectuer des actions manuelles de duplication et de livraison à chaque mise à jour personnalisée, ce qui permet d’avoir le contrôle total sur l’ensemble du projet et de tout automatiser dans une approche CI/CD.

À noter que beaucoup de CMS classiques (comme WordPress) offrent déjà la possibilité des APIs. Cette fonctionnalité inclut par définition ces CMS dans leur nouvelle version headless dans la Jamstack.

Quelles sont les bonnes pratiques pour mettre en œuvre la Jamstack ?

Pour tirer le meilleur parti de la Jamstack, quelques astuces sont à connaître, comme par exemple :

• Utiliser un CDN (Content Delivery Network).
• Mettre en place un système d’invalidation du cache pour chaque déploiement : si elle est optimale, cette invalidation doit être instantanée.
• Mettre en place le déploiement atomique : sachant qu’un site Jamstack peut très vite augmenter de taille à cause des fichiers markup générés, un nouveau changement peut demander le redéploiement de centaines de fichiers. S’il se fait un par un, un état d’inconsistance peut se créer tant que le processus n’est pas terminé. Ceci doit être évité par des pratiques qui vont permettre de ne pas mettre en production (accessible en ligne) des changements tant que tous les fichiers n’ont pas été déployés. Ce système atomique est offert aujourd’hui par les plateformes modernes. Un prérequis à cela est de tout gérer dans un système de contrôle de version comme GIT et d’adopter l’automatisation du build et du déploiement.
• Avoir recours à des services en Saas : il n’est pas nécessaire de tout développer pour le back-end. Beaucoup de services sont disponibles et peuvent être utilisés via leurs API (gestion de contenu, authentification, système de mailing, système de gestion de formulaires, etc.).

Des conseils pour bien démarrer son projet Jamstack ?

Pour le J, j’appelle React.js, qui est un framework JavaScript.

Pour le A, j’utilise Strapi, le headless CMS open source le plus populaire et 100 % JavaScript.

Pour le M, je passe par Next.js, qui est aujourd’hui le générateur de site le plus populaire et l’un des plus aboutis, car il supporte non seulement le SSG (Static Site Generation), mais également le SSR (Server-Side Rendering) et surtout l’ISR (Incremental Static Rendering).

Pour le hosting du front, Firebase, Versel et Netlify sont de bonnes options.

Et pour couronner le tout, une bonne CI/CD gérée par Gitlab CI.

Si en pratique la Jamstack ne révolutionne pas le développement web, elle permet de s’armer du meilleur de chacun des composants pour en faire un tout performant et optimal, qui sait répondre aux enjeux actuels du développement web.