Article

Jamstack ou la promesse de sites web plus performants et mieux sécurisés

Connaissez-vous la Jamstack ? Une technique de développement web qui allie la rapidité d’affichage des pages statiques à l’interactivité des sites dynamiques en vue de maximiser l’expérience utilisateur.

La Jamstack est une pile technologique pour construire des sites web : JAM comme Javascript, API et Markup. Le principe est de préconstruire le site sous forme de pages HTML statiques et utiliser Javascript pour la gestion des fonctions dynamiques, en s’appuyant sur des API pour accéder au contenu et aux services pour apporter des fonctionnalités. Si l’on prend l’exemple d’un site d’e-commerce, les pages du catalogue seront générées à l’avance, mais le composant panier sera un composant dynamique écrit en Javascript et s’appuyant sur des API.

On voit tout l’intérêt de l’approche pour améliorer les temps de réponse, mais aussi pour renforcer la sécurité, puisqu’on n’expose plus directement de briques techniques présentant des failles de sécurité potentielles (serveurs d’application, bases de données, …). Une fois générées, les pages statiques sont déployées de préférence sur des infrastructures CDN, comme Netlify, ce qui assure la scalabilité des applications et contribue à l’amélioration des performances.

L’approche présente également l’avantage de parfaitement s’intégrer dans les pratiques actuelles de développement dans le cloud, serverless et headless. Elles permettent de s’affranchir de la gestion du contenant (les infrastructures techniques, l’architecture des sites, les CMS) pour se concentrer uniquement sur le contenu et les fonctionnalités.

Imaginons un parcours de souscription à une offre dans la banque ou l’assurance. On pourrait s’appuyer sur le CMS headless Contentful (définition du contenu des pages et des valeurs possibles pour les étapes du tunnel de souscription), sur les fonctions cloud Firebase (calcul du devis), sur la plateforme Stripe (paiement en ligne) et sur Algolia (intégration d’un moteur de recherche). L’application serait construite sur la plateforme Gitlab CI et hébergée sur une infrastructure CDN comme Netlify. La solution serait entièrement dans le cloud. 

Exemple d'une architecture construite avec Jamstack et l'outil Gatsby présenté dans la suite de l'article

S’émanciper des CMS en utilisant l’approche Jamstack

Les CMS, souvent construits sur la stack LAMP, soulèvent des problématiques de performance et de scalabilité avec des contraintes sur la mise en forme du site. Le choix de solutions pour des fonctionnalités hors contenu est aussi limité. À l’opposé, l’approche Jamstack offre une grande liberté dans la mise en forme et dans le choix des solutions techniques, supprimant ainsi la dépendance à un CMS. C’est d’ailleurs cette liberté qui motive de nombreux passages à la Jamstack.

Enfin, s’il faut le rappeler, développer en mode serverless dans le cloud conduit à produire un code plus optimisé et à réduire le nombre de serveurs on premise. Ce qui correspond à l’aspiration commune à consommer les ressources avec frugalité - aspiration elle-même confortée par les nouvelles tendances en matière de SEO.

Quel outil utiliser pour générer ses pages ?

Pour créer ses pages, le développeur fait appel à un générateur de pages statiques. Il en existe plusieurs : Next.js, Hugo, Jekyll, ... Parmi les générateurs les plus répandus et qui présente plusieurs aspects intéressants, on peut évoquer l’outil Gatsby. Outre le fait qu’il s’appuie sur la librairie React, il propose des optimisations utiles, telles que le redimensionnement automatique des images et le pré-chargement des pages liées. Gatsby est également au cœur d’un écosystème qui propose un nombre raisonnable de plugins permettant de se connecter aux CMS les plus courants (Wordpress, Drupal, Contentful, etc.) et d’intégrer facilement de nombreuses fonctionnalités classiques d’un site web. Autre point fort : son magasin de données, dans lequel il rapatrie l’ensemble des données provenant des différentes sources de contenus et que l’on interroge avec GraphQL. C’est ce que l’équipe Gatsby appelle le « content-mesh ». Ce système permet de s’affranchir de la variété de modes d’interrogation des gestionnaires de contenus.

La Jamstack est adaptée aux sites qui évoluent peu

Tous les sites ne sont pas éligibles à un fonctionnement en mode Jamstack. Une plateforme dont les contenus sont très fréquemment mis à jour (un site média, par exemple) ou propres à chaque utilisateur (Facebook, par exemple) ne bénéficierait pas de l’approche. De même, en attendant une amélioration des temps de construction initiale des pages, la Jamstack ne convient pas forcément aux sites très volumineux.

Les plateformes, les services en ligne, les parcours de souscription, les simulateurs, les dashboards font, au contraire, partie de la typologie de sites privilégiés. Aussi, si votre site figure dans une de ces catégories et, surtout, s’il est soumis à la pression des taux de conversion, alors n’hésitez pas : lancez-vous ! De nouvelles opportunités s’ouvriront à vous, en termes de choix d’API notamment, et nous saurons vous accompagner et vous guider.