Jamstack 101

Comment êtes-vous arrivé ici ?

Vous vous êtes probablement retrouvé sur cet article pour l'une de ces raisons :

• Comprendre ce qu'est Jamstack.
• Découvrir quels sont les avantages d'une approche Jamstack par rapport à une approche traditionnelle pour votre entreprise.
• Comprendre des concepts plus avancés tels que SSG et ISG (indice : ce ne sont pas des termes médicaux).

Cet article vise à expliquer ce qu'est Jamstack et ce qu'il peut apporter à votre entreprise sans avoir besoin d'un diplôme en informatique. Ne vous inquiétez pas, c'est en fait assez simple !

Architecture d'un site Web

Tout d'abord, il est important de comprendre que Jamstack est ce que nous, les technophiles, appelons une architecture. De la même manière qu'un architecte planifiera la construction de votre maison, un développeur Web planifiera la façon dont votre site Web sera construit. Chaque site Web est bien sûr différent, mais les principes d'architecture sous-jacents sont des pratiques bien établies que les développeurs Web suivent.

Afin de comprendre l'architecture Jamstack et sa pertinence actuelle, voyons ce qu'est un site Web en termes simples.

Client et serveur

Lors de la visite d'un site internet, deux applications communiquent ensemble: le client et le serveur. Le client est votre navigateur (par exemple, Google Chrome) et le serveur est une application généralement accessible via Internet qui envoie simplement des fichiers au navigateur. Ces fichiers sont ensuite interprétés par le navigateur pour afficher le site Web et montrer ces animations sympas. En termes simples, c'est ainsi que fonctionnent tous les sites Web!

Histoire du Web

L'architecture Jamstack, aussi folle que cela puisse paraître, a en fait beaucoup de points communs avec les premiers sites Web construits. Pour comprendre comment Jamstack exploite ces anciennes approches de manière moderne et dynamique, examinons rapidement l'historique de l'architecture d’un site Web.

Le Web 1.0

Les premiers sites Web étaient souvent très simples et peu interactifs. Chaque page d'un site Web était en fait un fichier stocké sur un serveur, de sorte que la quantité de fichiers à récupérer pour charger une page était vraiment faible. Cependant, l'un des principaux points faibles de cette approche était qu'il y avait beaucoup de duplication de code et qu'elle était difficile à maintenir. Si vous vouliez ajouter un lien dans le menu principal, vous deviez mettre à jour chaque fichier de chaque page. Bien sûr, ce n'était pas une façon vraiment cool et efficace de passer son temps.

Le Web 2.0 (ou rendu côté serveur)

À mesure que le Web devenait de plus en plus populaire, de plus en plus d'entreprises et de cas d'utilisation plus complexes sont apparus. Le cas d'utilisation le plus courant est probablement que les gens d'affaires voulaient être autonomes lors de la mise à jour des sites Web et ne pas compter sur les développeurs pour la plupart des mises à jour. C'est là qu'un CMS (Content Management System) est entré en jeu. Le CMS le plus connu est probablement Wordpress.

Le principal changement par rapport au Web 1.0 ici est que les pages d'un site Web ne sont plus simplement des fichiers hébergés sur le serveur et livrés au client. Si nous prenons un site Web Wordpress tel qu’un blog comme exemple, chaque article de blog est stocké séparément et le serveur construit une nouvelle page à chaque fois qu'il est demandé (d'où le terme SSR ou Server-Side Rendering). Par exemple, si vous chargez la page d'accueil du blog, le site Web renverra les 10 derniers articles de blog avec le reste de la page d'accueil. Si nous ajoutons un article de blog dans Wordpress, cela crée bien sûr la page d'article de blog, mais va potentiellement modifier d'autres pages comme la page d'accueil (car un nouvel article de blog devra être affiché).

Comme nous pouvons le comprendre, ce n'est pas toujours efficace, car des pages identiques peuvent devoir être générées plusieurs fois pour différentes personnes. Cela nécessite également beaucoup de travail pour l'application serveur, qui doit générer des pages pour chaque visiteur du site Web. C'est l'une des raisons pour lesquelles ces sites Web, s'ils ne sont pas correctement optimisés, ont tendance à être lents.

Pour illustrer à quoi cela ressemble avec un exemple concret, prenons un restaurant. Disons que vous commencez par un petit restaurant de restauration rapide, qui agit comme le serveur. Chacun de vos clients (restaurant) sont les clients (Web) dans cet exemple. Les fichiers servis pour le site Web seront des burgers (et il n'y a qu'un seul burger au menu). Si vous commandez un burger nature, cela sera probablement rapide, car le restaurant n'aura qu'à cuire le pain et la viande, puis monter le burger et vous le donner. Et si on ajoutait des oignons, du ketchup et du bacon ? Cela ne prendra pas beaucoup plus de temps pour faire un burger, mais ce sera plus long. Et si nous avions maintenant une présentation plus chic de notre burger ? Le temps de préparation sera évidemment plus long. Maintenant, disons que 100 personnes commandent des burgers en même temps, vous allez probablement attendre votre commande beaucoup plus longtemps, à moins que le restaurant n'ait plus de personnel travaillant dans les coulisses, plus de poêles, etc.

Ce que nous essayons d'illustrer ici, c'est qu'à mesure que votre site Web évolue et devient plus complexe, il deviendra plus lent. Par exemple, nous pourrions installer un plugin sympa sur notre page d'accueil qui afficherait les publications Instagram, mais cela aurait un impact énorme sur votre site Web car il doit maintenant demander à Instagram les dernières publications avant de montrer le site au client. Ceci n'est qu'un exemple simple, mais des sites Web comme Wordpress utilisent souvent de nombreux plugins, et chacun d’entre eux ajoute du temps de traitement et allonge le temps de chargement de la page. En ce qui concerne l'exemple des 100 burgers, une application serveur a une capacité limitée et plus nous demandons de pages en même temps, plus ce sera lent, à moins que nous ne construisions le site Web avec cela en tête et que nous ajoutions de la capacité serveur, ce qui est très coûteux pour une entreprise.

L'architecture Jamstack

L'architecture Jamstack combine les pratiques du Web 1.0 et du Web 2.0 pour maximiser les avantages et minimiser les inconvénients de ces approches. Pour commencer simplement, reprenons notre exemple du burger et soyons un peu plus imaginatifs. Disons que je commande un burger ordinaire. Avec une approche Jamstack, je l'obtiendrais tout de suite, car semblable au Web 1.0, ce n'est qu'un fichier sur un serveur. Mais que se passe-t-il si nous voulons un burger plus sophistiqué avec tous les mêmes bons ingrédients qu'avant ? Même chose: vous obtiendrez votre burger instantanément, car il ne s'agit que d'un fichier sur un serveur. Et si 1000 personnes commandent en même temps ? Même chose, vous obtiendrez votre Burger presqu'instantanément car c'est le même fichier qui est servi à tout le monde.

Alors, comment ça marche? Tout d'abord, pensez à un site Web Jamstack comme à un site Web 1.0, en utilisant uniquement des technologies modernes. Les pratiques modernes sont utilisées pour générer des fichiers qui peuvent ensuite être servis par le serveur, tout comme un serveur Web 1.0. Étant donné que le serveur n'est responsable que du transfert des fichiers lorsqu'une demande est faite, cela se traduit par des temps de chargement très rapides et instantanés. Mais comment cela fonctionne-t-il si vous créez une nouvelle page de blog pour un blog ? Un site Web Jamstack se reconstruit généralement lorsque certaines données doivent être modifiées. Une reconstruction signifie que certaines ou toutes les pages doivent être reconstruites afin que le nouveau contenu soit mis à la disposition des utilisateurs. Dans notre exemple, le site Web complet pourrait être reconstruit, ou certains frameworks plus modernes reconstruiront intelligemment uniquement les pages qui dépendaient des données mises à jour.

Contrairement à un site Web Web 2.0, qui effectuerait le travail de génération de pages à chaque demande, un site Web Jamstack effectue ce travail lourd une fois uniquement lorsque les données changent, puis sert simplement les fichiers générés comme un site Web 1.0.

ISR ou régénération statique incrémentielle

Concernant les sites Web qui changent souvent et qui auraient besoin d'être reconstruits assez souvent, les plus modernes prennent également en charge ce que l'on appelle la régénération statique incrémentielle. Même si cela semble compliqué, ce concept simple signifie en fait qu'au lieu d'attendre un changement de données pour effectuer une reconstruction de site Web ou de page, cette reconstruction peut à la place se produire à un intervalle de temps spécifique si elles sont demandées. La page est donc toujours générée sous forme de fichier statique qui est servi presque instantanément, mais elle sera mise à jour automatiquement après un délai défini. Cette approche est très utile pour les sites Web qui dépendent de données qui changent souvent et où la reconstruction à chaque changement de données serait très coûteuse pour le serveur.

SSR ou rendu côté serveur

Bien sûr, l'architecture Jamstack ne résout pas tous les problèmes et le rendu côté serveur est encore parfois utile. C'est pourquoi certaines solutions Jamstack permettent également aux développeurs de faire du SSR le cas échéant. Par exemple, lorsque vous vous connectez sur un site e-commerce pour voir vos commandes passées, ces données vous sont propres et ne sont accessibles que si vous êtes connecté. Il serait assez coûteux de générer cette page pour tous les utilisateurs, donc généralement ces pages sont servies à l'aide de SSR.

Qu'en est-il pour moi et mon entreprise ?

Jusqu'à présent, nous avons beaucoup parlé de l'impact de Jamstack, offrant des performances instantanées. Bien sûr, ce n'est pas le seul avantage d'avoir un site Web Jamstack.

Meilleur classement sur Google (SEO)

Une meilleure performance signifie également un meilleur classement sur les moteurs de recherche comme Google. La performance est désormais prise en compte lors du classement de la pertinence d'un site Web, de sorte que les sites Web lents et qui ne répondent pas seront moins bien classés.

Amélioration de la conversion des utilisateurs et des revenus

Quelle que soit la façon dont vous calculez la conversion des utilisateurs sur votre site Web, les sites Web performants maintiennent généralement les utilisateurs sur votre site Web plus longtemps et réduisent la frustration causée par des temps de chargement plus longs. Les vitesses Internet ont augmenté au cours des dernières années, mais beaucoup de gens utilisent maintenant des téléphones portables qui peuvent ne pas disposer d'une connexion fiable et rapide. Selon les régions du monde que vous ciblez, même les ordinateurs de bureau peuvent avoir du mal à accéder à une connexion Internet rapide.

Voici quelques statistiques qui montrent comment un site web performant peut augmenter les revenus d'un site e-commerce :

Source: Milliseconds make Millions, Deloitte

Soyez près de votre utilisateur

Lorsque nous parlons de sites Web Jamstack, nous entendons souvent les termes « hébergés on the Edge », mais qu'est-ce que cela signifie ? En bref, cela signifie que votre site Web sera servi aussi près que possible de vos utilisateurs. Par exemple, si je demande à voir un site Web de Montréal (Canada), un serveur près de chez moi me donnera le site Web, tandis qu'un autre utilisateur à Paris (France) obtiendra une réponse d'un serveur situé plus près de lui. Cela se traduit par des temps de chargement rapides, même pour les utilisateurs éloignés de l'endroit où votre entreprise opère.

Les hébergeurs tels que Vercel, Netlify et Cloudflare proposent cela à moindre coût puisque les sites Web Jamstack sont principalement composés de fichiers statiques. Ces fournisseurs doivent alors simplement dupliquer ces fichiers sur différents serveurs à travers le monde. Certains fournisseurs servent même des sites Web à partir de plus de 250 emplacements différents !

Coûts opérationnels beaucoup moins chers

Étant donné qu'un site Web a besoin de plus de ressources pour répondre à plus d'utilisateurs et que les sites Web 2.0 effectuent une bonne quantité de travail pour chacun des utilisateurs, des serveurs puissants et nombreux peuvent être nécessaires pour obtenir de bonnes performances. Cependant, cela a un coût élevé.

Jamstack, à l'autre extrémité, ne reconstruit ses données que lorsqu'il en a besoin, ou peut utiliser ISR pour se rafraîchir à un intervalle fixe. Cela peut facilement évoluer jusqu'à des millions d'utilisateurs sans trop d'impact sur le serveur, car le serveur ne sert que des fichiers qui ne nécessitent aucun calcul. Plus important encore, étant donné que les sites Web Jamstack sont généralement « optimisés en termes de performances par défaut », les solutions d'hébergement adaptées telles que Vercel, Netlify et Cloudflare sont bien moins chères que les fournisseurs traditionnels. Tout cela tout en offrant une performance constante et quasi instantanée.

Plus de sécurité

Les sites Web Jamstack ont tendance à être plus sécurisés, car ils exposent généralement des informations moins sensibles aux attaquants potentiels. Les sites Web Jamstack interagissent généralement avec les systèmes du serveur et cela n'est pas visible pour les attaquants. Certains sites Web interagissent avec d'autres systèmes du côté client/utilisateur, ce qui en révèle un peu plus sur l'architecture aux attaquants.

Les sites Web Jamstack sont également moins sujets aux attaques DoS (denial-of-service), qui consistent à submerger un serveur avec tellement de requêtes que le site Web devient inaccessible. Étant donné que les serveurs ne font pas beaucoup de travail pour servir des sites Web statiques et que la plupart des fournisseurs ont une protection DoS intégrée sans frais supplémentaires, les DoS sont beaucoup moins courants sur les sites Web Jamstack.

Une option plus verte

De nos jours, l'environnement est une préoccupation importante qui a un impact sur de nombreuses industries différentes, y compris l'informatique. Un site Web Jamstack est généralement une option beaucoup plus écologique par rapport à un site Web standard pour plusieurs raisons :

• Le site Web n'effectue qu'un traitement minimal à chaque demande et ne fait qu'un traitement plus lours que lorsque les données changent, réduisant ainsi la quantité d'électricité consommée par le serveur
• Le site étant plus performant, les utilisateurs passent moins de temps à attendre qu'une page se charge, donc moins d'électricité y est gaspillée également
• Les fournisseurs d'hébergement de sites Web Jamstack utilisent pour la plupart de l'énergie verte pour faire fonctionner leurs serveurs
• De nombreux outils utilisés pour développer des sites Web Jamstack sont livrés avec des optimisations supplémentaires prêtes à l'emploi pour réduire la taille de votre site Web (regroupement et minification du code, optimisation des ressources multimédias). Cela se traduit par des temps de chargement plus rapides, mais aussi par une utilisation optimale des données et de l'ensemble de l'infrastructure Internet.

En bref

En bref, Jamstack est un moyen de créer des sites Web qui apporte :

• ⚡ Des performances instantanées
• 🔍 Meilleur classement sur les moteurs de recherche (SEO)
• 💰 Meilleures conversions d'utilisateurs et revenus
• 💰 Coûts opérationnels moins élevés
• 🌍 Moins de latence pour les utilisateurs du monde entier
• 🔒 Plus de sécurité
• 🌱 Respect de l'environnement