Trouver un article
Thèmes populaires
Expert web et mobile de l’agence digitale Bewizyu, Youssef El Behi décrypte pour nous la Jamstack, qui permet de développer un site web statique avec du contenu dynamique, tout en proposant une expérience utilisateur interactive et moderne.
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.
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 :
Une application Jamstack utilise ces différents outils, en suivant un ensemble de caractéristiques et de pratiques, telles que :
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.
Les avantages de la Jamstack sont nombreux. On retrouve notamment :
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.
Mes principales problématiques sont les suivantes :
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.
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.
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.
Comme évoqué précédemment, l’un des avantages majeurs de la Jamstack est l’amélioration de l’expérience développeur :
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.
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 :
À 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.
Pour tirer le meilleur parti de la Jamstack, quelques astuces sont à connaître, comme par exemple :
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.
Bonjour, je suis fan.
Mais je suis aussi sceptique. J’ai ma petite agence web et je remarque que depuis quelques années en proposant un builder à mes clients (genre Divi sur WordPress), qu’ils sont généralement hyper conquis. Proposer des outils de mise en page à mes clients, chargés de com’ ou responsable marketing, les rends autonomes, réactifs et davantage investis sur l’outil qu’est leur site web.
J’étudie la Jamstack depuis quelques temps maintenant, mais je n’ai pas trouvé d’approche me permettant de concilier ces principes avec les besoins de mes clients. Ça marche très bien sur du projet spécifique, mais sur du site plus lambda, mes clients ne veulent pas d’une interface d’admin avec des champs et des selects pour choisir le nombre de colonne ou la couleur de fond d’une section.
J’ai regardé du côté d’outils ayant cette approche (builder.io ou tina.io) mais tout ça me parait assez jeune et j’hésite à y aller, la courbe d’apprentissage peut être raide.
Je suis curieux d’avoir quelques retours sur ce point 🙂
Bonjour Cladjidane,
J’ai aussi trouvé l’article très intéressant. J’étais du même avis que vous et je creuser le sujet. Il existe Figma, c’est le builder du moment.
Il faut convertir en suite Figma avec un outil (il en existe plusieurs) vers Gatsby, NextJS, React… On peut se passer complètement WordPress car Figma propose de nombreuses ressources et s’est simple à utiliser pour n’importe qui. Cela permet de définir un prototype avec le client pour ensuite l’adapter et exporter vers la plateforme souhaitée.
Si vous souhaitez garder WordPress comme CMS Headless il faut adapter le thème Gatsby fraîchement converti pour WordPress. Il existe pour WordPress deux plugins, un pour Gatsby et un pour GraphQL.
Pour gérer la partie contenu il existe d’autres CMS comme Contentful ou Strapi. C’est seulement pour mettre à jour les contenus textes, photos, vidéos… C’est ce que veulent les clients un endroit pour corriger une faute d’orthographe ou changer une photo. Mais en général ils ne touchent pas au design et rarement à la mise en page. Et à la limite ils peuvent passer par Figma gratuitement (limiter à 3 projets). donc pourquoi avoir un CMS ? Pour gagner du temps car sinon il faut refaire l’export de Figma vers Gatsby ou autres.
Votre adresse email ne sera pas publiée.
En cliquant sur “S’inscrire”, vous acceptez les CGU ainsi que notre politique de confidentialité décrivant la finalité des traitements de vos données personnelles.
Une formation flexible sur la data science et l’intelligence artificielle
Une formation pratique et intensive pour maîtriser les réseaux informatiques
Pour acquérir les compétences nécessaires aux métiers de la data
En cliquant sur “S’inscrire”, vous acceptez les CGU ainsi que notre politique de confidentialité décrivant la finalité des traitements de vos données personnelles.
J