Comment fonctionne la Jamstack ?

La Jamstack est sûrement l’une des technologies les plus en vogue dans le monde du développement web.

Cependant, ce n’est pas “une” technologie à proprement parler. C’est plutôt une mosaïque (”stack” en anglais, que l’on pourrait traduire littéralement par empilement) de tout ce qui se fait de mieux en développement frontend, backend et devops. En effet, “JAM” est en fait un acronyme pour Javascript, API, Markup (désolé pour les gourmands qui s’attendaient à un article sur la confiture 🙄)

L’objectif de la Jamstack est de créer des sites web à la fois ultra performants et totalement “SEO friendly”, dont le contenu peut être mis à jour sans développeur.

Cela semble trop beau pour être vrai ?

Pourtant, ce n’est pas de la magie. Pour y voir plus clair, nous vous proposons de décortiquer l’architecture de la Jamstack, mais d’abord, il nous faut revenir sur les deux principes fondateurs sur lesquels elle repose.

Les 2 principes de fonctionnement de la Jamstack

Le secret de la performance et de la flexibilité qu’offre la Jamstack s’explique par deux concepts au cœur de son fonctionnement.

Le pre-rendering ou génération statique

Traditionnellement, quand un client se connecte à un site, le serveur va aller chercher des fichiers, éventuellement des données stockées en base de données, combiner tout ça et envoyer le résultat à l’utilisateur.

Il va répéter l’opération pour chaque utilisateur, c’est ce qu’on appelle la génération côté serveur (ou server-side rendering).

C’est bien mais si vous avez un milliard d’utilisateurs, le serveur a du mal à suivre et le site devient lent.

Avec la Jamstack, le serveur va “construire” le site en avance, lors de ce qu’on appelle la phase de “Build”.

Ainsi, quand un client se connecte, les fichiers sont déjà prêt, et le serveur n’a rien à faire à part les envoyer au client. C’est le principe de génération statique (ou pre-rendering).

Le découplement Frontend/Backend

Un site Jamstack se concentre principalement sur la partie visible à l’utilisateur (Front).

La partie serveur est généralement déléguée à des services tiers. Par exemple, si vous avez besoin de sauvegarder un article de blog en base de données, vous allez déléguer cette tâche à un gestionnaire de contenu (du type Wordpress).

Le frontend peut bien évidemment accéder à ce contenu via des requêtes à une API, mais les deux parties sont bien indépendantes l’une de l’autre.

Bien que ce fonctionnement ne soit pas nouveau dans le web, la Jamstack le place au cœur de son fonctionnement.

C’est donc le pre-rendering et le découplement du frontend avec le backend qui permettent de produire des sites statiques (idéal pour le SEO et la performance), avec du contenu dynamique (qui peut être modifié sans coder).

Anatomie d’une architecture Jamstack

Comme expliqué en introduction, le cœur de l’architecture Jamstack est composé de 3 technologies, à savoir :

• Javascript, le langage de programmation utilisé pour créer la partie visible du site (le Frontend) et le rendre interactif.
• API, le code situé sur le serveur qui permet de délivrer du contenu lorsqu’un utilisateur le demande.
• Markup, le langage qui sert à décrire une page web, typiquement du HTML. Les fichiers générés par un site Jamstack sont écrits dans ce langage et sont donc extrêmement légers.

Javascript

L’un des problèmes des sites dynamiques était le manque d’interactivité. En effet, il était impossible de voir les interactions des autres visiteurs en temps réel, il fallait recharger la page entière pour constater les changements.

Le Javascript permet de palier à cette carence.

Grâce à des frameworks modernes (React, Vue, Svelte…), il est possible de présenter des interfaces interactives et offrir une expérience “temps réel” aux utilisateurs.

API

Si vous êtes familiers de Wordpress, vous savez que le contenu d’un site est stocké dans une base de données. Avec la Jamstack, on peut également utiliser des systèmes de gestion de contenu (CMS) pour créer, modifier ou supprimer son contenu (articles de blog, utilisateurs, etc…) en base de données.

La différence est qu’avec la Jamstack, on utilise des CMS “headless”, c’est à dire qui vont s’occuper uniquement de la partie gestion des données, sans générer la partie visible du site (frontend).

Pour communiquer avec le CMS, le frontend fait donc des requêtes à une API, ce qui lui permet de rester totalement indépendant du code serveur (backend).

Il est également possible de communiquer avec des APIs tierces, pour simplifier des actions complexes comme le paiement avec Stripe, ou la recherche avec Algolia.

Markup

Comme nous l’avons vu avec le principe de pre-rendering, un site Jamstack est “construit” à l’avance. Le résultat est un ensemble de simples fichiers HTML (un langage de balisage, ou markup language) très légers.

Comme ils sont légers, il peuvent être distribués via un CDN, un réseau de “mini” serveurs, répartis dans le monde. Cette proximité géographique permet de présenter le contenu beaucoup plus rapidement, puisque la requête de l’utilisateur n’a pas besoin de parcourir la planète.

Qui plus est, au lieu de générer le code à chaque fois qu’un utilisateur le demande, on utilise un système de cache. C’est à dire qu’on sauvegarde la dernière version du fichier, et on la présente à l’utilisateur, sans avoir à régénérer le code. Bien entendu, il est possible de mettre à jour le cache, pour éviter que les utilisateurs ne voient une version obsolète de la page.

Concrètement, comment ça marche ?

À ce stade, vous commencez peut-être à saisir le concept d’une architecture Jamstack. Pour vous aider à y voir plus clair, prenons un exemple d’usage en conditions réelles.

Michael, dirigeant de la société Confitr, experte en confection de recettes de confitures, souhaite développer sa stratégie de marketing en ligne. Pour cela, il veut refaire son site internet, actuellement sur Wordpress, dont le design est dépassé et les performances laissent à désirer.

De plus, Jim de l’équipe marketing aimerait pouvoir écrire des articles de blog pour améliorer le référencement du site sur Google.

L’entreprise décide alors de faire appel à Melicelio, une agence spécialisée dans le développement de sites Jamstack (😉).

Les développeurs de Melicelio codent alors le nouveau site en NextJs, avec une interface flambant neuve. Ils y intègrent Strapi, un système de gestion de contenu (CMS) headless pour gérer les articles de blog. Puis, ils déploient le code sur Vercel, qui s’occupe de l’hébergement et de la distribution via CDN (un réseau de petits serveurs distribués à travers le monde).

Un premier build est lancé en utilisant la fonctionnalité de générateur de site statique de NextJs. Après quelques minutes, le site est en ligne, mais la section blog est encore vide.

C’est au tour de Jim du marketing de prendre le relai. Il se connecte sur le site en tant qu’administrateur et grâce à Strapi, il peut rédiger des articles de blog, sans avoir à se soucier de détails techniques. Il rédige un superbe article sur les meilleures techniques de cuisson de confiture, et clique sur “Publier”.

En publiant l’article, Jim a envoyé une instruction au serveur, pour lui signifier que le contenu du site avait changé. Le serveur va donc construire le site de nouveau (phase de build), afin de générer des pages HTML.

Une fois le build terminé, la nouvelle version du site est redéployé sur le CDN, et les utilisateurs peuvent voir l’article fraîchement écrit.

Puis, Pamela, grande amatrice de confiture, visite le site de Confitr. Comme les pages sont déjà déjà pré-construites, et servi depuis un CDN proche de chez elle, l’accueil s’affiche en quelques millisecondes.

Sandra visite ensuite la section “Blog”, et consulte l’article rédigé avec soins par Jim.

Enfin, convaincue par l’expertise de Confitr, elle décide de passer commande chez eux. Pour cela, sans s’en rendre compte, elle déclenche un appel à l’API de Stripe, ce qui lui permet de procéder au paiement sans difficultés.

En conclusion, une stack qui tient ses promesses

De premier abord, la Jamstack peut sembler complexe, même si on est un expert en création de sites internet. Mais si on prend le temps de décomposer son architecture, on se rend compte que chaque partie est un concept déjà connu dans l’écosystème du web.

Car c’est bien ça l’objectif de la Jamstack : prendre ce tout qui se fait de mieux dans le web, pour offrir une expérience de développement optimale.

C’est grâce à cela que l’on peut produire des sites avec une rapidité sans égale et totalement optimisés pour les moteurs de recherche.

De plus, grâce aux CMS headless, vous pouvez gérer votre contenu aussi simplement que sur un site Wordpress classique.

Fort heureusement, vous n’avez pas besoin de comprendre le fonctionnement de la Jamstack dans ses moindres détails pour profiter de ses avantages. Un bon développeur saura créer un tel site sans soucis.

Néanmoins, si vous n’avez pas les moyens d’embaucher un développeur web professionnel, il existe des options qui vous permettent de créer votre site Jamstack vous-même, sans coder !

Vous pouvez par exemple utiliser Plasmic, qui vous permet de créer un site Jamstack grâce à une interface graphique, comme Webflow ou Elementor.

Si vous souhaitez savoir comment votre site web pourrait bénéficier des avantages de la Jamstack, n’hésitez pas à planifier un appel de découverte gratuit avec l’un de nos experts.