Jamstack : le web statique / dynamique

Vous n'avez jamais rêvé de vous débarasser de Wordpress ?

Présentation d'un système scalable, ultra-rapide, plaisant à coder et complètement en phase avec l'éco-conception logicielle.

Jamstack, c'est quoi ?
Jam est la contraction de Javascript, API et Markup. Markup car l'essentiel du site est présenté en bon vieux HTML à papa. Niveau SEO c'est le top : c'est rapide à afficher et facilement crawlable par les bots des moteurs de recherche.

Mais qui dit site Jamstack ne veut pas dire forcément qu'il n'y a pas d’interaction possible de la part du visiteur. C'est le Javascript qui s'occupe de la partie dynamique avec des calls API.

Besoin d'un système de paiement ? Il suffit d'ajouter un plugin Snipcart sur son site. Besoin d'une interface d'administration pour gérer son contenu ? On peu brancher un headless CMS (CMS qui ne gèrent que le backend, très souvent en ligne) comme Forestry ou DatoCMS. Besoin de gérer des photos ? Cloudinary propose une solution permettant d'héberger et traiter ses photos en ligne.
Et si vous ne trouvez pas de service adapté à votre besoin, il est toujours possible de se coder sa petite fonction Lambda sur AWS qui ne sera facturée que quand elle sera utilisée.

Faut-il passer au Jamstack ?
Cette approche présente des avantages intéressants :

La sécurité : votre site est statique ... difficile de faire plus sûr !

La rapidité : le site est accessible via des CDN et disponible au plus près du visiteur

Le coût d'hébergement : Un site Jamstack est souvent gratuit. Il devient payant en fonction de l'utilisation des différents services qui y sont utilisés. Finalement vous ne paierez que si vous avez du succès

C'est mieux pour l'écologie : Dans un projet Jamstack pas de bases de données qui tournent en permanence, peu de ressources CPU utilisées ou de bande passante nécessaire pour servir des pages HTML en statique. Cela répond aussi aux bonnes pratique de l'écoconception logicielle (je vous recommande de jeter un oeil au livre "Ecoconception web / 115 bonnes pratiques").

Les points plus négatifs sont pour moi :

Des interfaces de gestion de contenus moins riches que celles d'un Wordpress bien customisé

La difficulté de vendre un système dont le coûts varieront en fonction des besoins. Les clients préfèrent parfois savoir exactement ce qu'ils vont payer pour l'hébergement à l'avance.

Fonctionnement d'un site Jamstack
Une des idées derrière la philosophie Jamstack est de ne pas gérer de serveur (en tout cas pas soi même). Il nous faut donc un site compilé en statique. Le code HTML est créé en utilisant un générateur de site statique. Il y en a beaucoup et pour tous les gouts : certains utilisent du Ruby (Jekyll), d'autre du Go (Hugo) du Node.js (Eleventy), du Vue.js (Gridsome) ...

Mais sans serveur, où sont stockés mes fichiers ? Sur Github / Gitlab / Bitbucket. En effet, le code source permettant de générer le site est placé sur un dépot distant et un service extérieur tel que Netlify, Firebase ou Zeit va récupérer le code et les données pour compiler tout ça et produire le site en HTML. Il va aussi envoyer le site internet sur les différents CDN.

Et les données ? Là aussi elles sont dans le nuage. Il y a deux façons de faire :

On peu utiliser un service en ligne qui va permettre de créer et d'éditer des fichiers au format Markdown qui contiendront le contenu de mon site. Ces fichiers seront stockés dans votre dépôt Git avec avec votre site statique. Il y a plusieurs types de CMS en ligne qui génèrent du markdown : Forestry, Netlify CMS, Prose ... L'avantage de ce système c'est que vous possédez vos données sur votre repository et vous pouvez en changer comme vous le souhaitez

On peu aussi passer par un système d'APIs. Vos données seront dans le Cloud sur un service comme Storyblock ou Contentful qui se chargera de distribuer vos données au travers d'une API. l'avantage c'est que vous pouvez envoyer votre contenu vers autre chose que votre site Jamstack (vers une appli mobile par exemple). L'inconvénient c'est que bien souvent vous ne possédez plus votre contenu car il se trouve chez une entreprise extérieur. Il existe cependant des système libre comme Strappi (développé en Node.js) ou Directus (en PHP). Mais il faut les héberger soit même sur un serveur, leur joindre une base de données ... On s'éloigne un peu de la philosophie Jamstack à mon avis.

Mon approche de la Jamstack avec Nuxt & Firestore
Cette page que vous lisez utilise le concept de Jamstack que j'ai adapté à ma sauce. En effet, j'avais envie d'avoir mon propre système de publication qui ne repose pas forcément sur les traditionnels fichiers markdown ou les fournisseurs d'API.

J'ai préféré utiliser une autre combinaison où je me sens un peu plus maître à bord :

Pour stocker et distribuer mes données j'utilise un base de données en ligne sur Firestore. Elle est utilisée uniquement lors de la rédaction des articles et la génération du site statique.

Pour le coté frontend, une application Nuxt version statique me génère tout mon site à partir des données qui se trouvent dans mon application Firestore (qui propose des APIs pour accéder à son contenu). Le site est alors compilé par les service Now de chez Zeit et ensuite disponible à l'adresse : https://fgrx.now.sh/

Pour éditer mes articles, j'ai créé une autre application Nuxt version SPA (Single Page Application) qui va me permettre d'administrer ma base de données Firestore. Dans cette app, j'édite mes posts comme dans un CMS classique et j'ai la possibilité de lancer la génération du site statique une fois mon travail terminé. Cette nouvelle application est aussi compilée par zeit et disponible sur : https://fgrx-admin.now.sh

Le résultat me satisfait parfaitement, mais nécessite de coder sa propre console d'administration. C'est un investissement en temps non négligeable mais qui colle à tous mes besoins.