Certaines APIs seront appel\u00e9es durant la compilation du site, d\u2019autres lorsque les utilisateurs naviguent entre les pages.<\/li>\n\n\n\n
En 2008 Jekyll a rendu populaire la g\u00e9n\u00e9ration statique de sites, mais c\u2019est en 2015 que le cofondateur de Netlify, Mathias Biilmann<\/strong> introduit l\u2019architecture Jamstack, qui n\u2019a eu de cesse de gagner en popularit\u00e9 depuis.<\/p>\n\n\n\n Beaucoup de sites aujourd\u2019hui utilisent l\u2019architecture Single Page Application (SPA), ce qui est en g\u00e9n\u00e9ral bien pour cr\u00e9er des WebApps, mais assez mauvais pour le r\u00e9f\u00e9rencement (SEO). Jamstack de son c\u00f4t\u00e9 utilise des pages statiques, ce qui est bien meilleur pour le r\u00e9f\u00e9rencement et comme les IHMs sont cr\u00e9\u00e9es au moment de la compilation, avant m\u00eame qu\u2019un utilisateur ait visit\u00e9 la page, les performances sont en g\u00e9n\u00e9ral meilleures et ne sont pas affect\u00e9es par l’augmentation du trafic.<\/p>\n\n\n\n Parce que c’est plus relaxe<\/strong> : la s\u00e9paration des donn\u00e9es (back end) et leurs consommation (front end) permet une organisation plus cibl\u00e9e, plus simple et finalement moins stressante.<\/p>\n\n\n\n Pour gagner en performances<\/strong> : \u00e9tant donn\u00e9 que les pages sont statiques, et pr\u00eates \u00e0 \u00eatre servies aux utilisateurs, il est possible d\u2019avoir d\u2019excellentes performances. En utilisant des CDNs il est possible d\u2019avoir des sites tr\u00e8s rapides, o\u00f9 que se trouvent les utilisateurs.<\/p>\n\n\n\n Pour ne pas avoir \u00e0 se soucier de la s\u00e9curit\u00e9<\/strong> : votre site \u00e9tant compos\u00e9 uniquement de fichiers statiques, il n\u2019y a litt\u00e9ralement rien \u00e0 attaquer. \u00c9videmment il peut rester une vuln\u00e9rabilit\u00e9 sur les APIs si vous en utilisez, mais nous recommandons de ne d\u00e9velopper votre propre back end que quand vous faites quelque chose d\u2019unique, et que vous \u00eates capable d\u2019en assurer la s\u00e9curit\u00e9. En g\u00e9n\u00e9ral, il est plus s\u00fbr d’utiliser des API tierces, reconnues et \u00e9prouv\u00e9es.<\/p>\n\n\n\n Pour le co\u00fbt<\/strong> : l\u2019h\u00e9bergement d\u2019un site statique est gratuit sur les plateformes tel que Vercel ou Netlify. Mais \u00e9tant donn\u00e9 qu\u2019il y a une s\u00e9gr\u00e9gation claire entre les contenus statiques et dynamiques, il est tr\u00e8s facile, et peu co\u00fbteux de changer d\u2019h\u00e9bergeur si besoin. Si le trafic sur le site augmente, il est \u00e9galement facile de d\u00e9cider d\u2019augmenter les capacit\u00e9s d\u2019une partie tr\u00e8s sp\u00e9cifique du site, ce qui sera en g\u00e9n\u00e9ral moins co\u00fbteux que de migrer tout un site avec ses serveurs et ses bases de donn\u00e9es.<\/p>\n\n\n\n Pour l\u2019architecture de notre site internet nous avons d\u00e9cid\u00e9 d\u2019utiliser Jamstack, avec Gatsby comme SSG, Ghost pour nos articles de blog, et Contentful comme CMS (pour le contenu autre que le blog).<\/p>\n\n\n\n J\u2019ai \u00e9prouv\u00e9 beaucoup de plaisir \u00e0 utiliser Gatsby car la librairie est tr\u00e8s bien document\u00e9e, et la majorit\u00e9 des d\u00e9veloppements sont autour de la librairie React qui est \u00e9galement tr\u00e8s bien document\u00e9e. J\u2019ai \u00e9galement eu acc\u00e8s \u00e0 des dizaines d\u2019exemples d\u2019apps pour \u00e0 peu pr\u00e8s tous les types de sites que j’aurais pu vouloir d\u00e9velopper, j\u2019ai facilement trouv\u00e9 des r\u00e9ponses \u00e0 toutes nos questions.<\/p>\n\n\n\n Ce qui m\u2019a le plus s\u00e9duit c\u2019est la facilit\u00e9 de trouver des plugins pour connecter nos CMS, am\u00e9liorer la SEO et avoir un site optimis\u00e9 pour les appareils mobiles.<\/p>\n\n\n\n React<\/strong> en lui-m\u00eame est une excellente librairie pour d\u00e9velopper des sites, nous pensons m\u00eame qu\u2019on tire son plein potentiel en l\u2019utilisant avec un SSG comme Gatsby ou Next.Js.<\/p>\n\n\n\n GraphQL<\/strong> est une alternative aux API REST, Gatsby l\u2019utilise \u00e0 la fois pour manipuler les fichiers locaux, mais aussi pour faire les requ\u00eates d\u2019APIs pour les CMS. Ce langage de requ\u00eates est tr\u00e8s puissant, et les plugins comme \u201cgatsby-plugin-sharp\u201d nous permettent d\u2019obtenir des images optimis\u00e9es pour toutes les tailles d\u2019\u00e9cran juste en \u00e9crivant une requ\u00eate GraphQL.<\/p>\n\n\n\n Nous appr\u00e9cions \u00e9galement la facilit\u00e9 avec laquelle nous avons pu cr\u00e9er une PWA avec Gatsby.<\/p>\n\n\n\n Nous avons choisi Jamstack pour les avantages cit\u00e9s pr\u00e9c\u00e9demment (co\u00fbt, s\u00e9curit\u00e9, performance, simplicit\u00e9), mais nous voulions \u00e9galement une simplicit\u00e9 dans la cr\u00e9ation des styles pour notre site, et c\u2019est exactement ce que propose TailwindCSS.<\/p>\n\n\n\n TailwindCSS est une librairie CSS qui permet d\u2019\u00e9crire le style de son site internet en utilisant uniquement des classes CSS, directement dans le code HTML. Nous utilisons \u00e9galement Tailwind-Typography pour notre blog, ce plugin propose un style agr\u00e9able pour la lecture d\u2019articles.<\/p>\n\n\n\n Nous utilisons Ghost pour \u00e9crire nos articles, sa fonctionnalit\u00e9 headless nous permet d\u2019utiliser un style propre \u00e0 notre site. Mais Ghost-headless vient aussi avec quelques inconv\u00e9nients, dont :<\/p>\n\n\n\n Contentful permet de cr\u00e9er des \u201ccustom types\u201d pour les diff\u00e9rents composants de notre site, et la traduction de ces composants est assez intuitive. Toutefois il n\u2019est pas possible d\u2019avoir un aper\u00e7u du rendu final. De plus il est parfois difficile de savoir quel niveau de granularit\u00e9 est le mieux adapt\u00e9, car avoir trop de composants rend plus difficile la lecture d\u2019une page dans Contentful, alors que ne pas avoir assez de composant voudrait dire un d\u00e9coupage moins fin des composants dans React (Gatsby)<\/p>\n\n\n\n Pour \u00eatre honn\u00eate, nous aurions pu d\u00e9velopper notre site beaucoup plus vite en utilisant WordPress, car ce dernier propose des outils tr\u00e8s pouss\u00e9s pour \u00e0 la fois \u00e9crire des articles et cr\u00e9er des pages. De plus des centaines de th\u00e8mes et autres plugins permettent d\u2019avoir rapidement \u00e0 peut pr\u00eat toutes les fonctionnalit\u00e9s qu\u2019on pourrait attendre d\u2019un site internet ou d\u2019un blog, dont le multilangue, tout \u00e7a sans d\u00e9veloppements suppl\u00e9mentaires.<\/p>\n\n\n\n Ces avantages viennent avec l\u2019inconv\u00e9nient qu\u2019en g\u00e9n\u00e9ral ces sites sont un peu plus lents, et gourmands en ressources, c\u2019est-\u00e0-dire bande passante, requ\u00eates de bases de donn\u00e9es, taille des images et d\u2019une mani\u00e8re g\u00e9n\u00e9rale en \u00e9lectricit\u00e9 consomm\u00e9e par visite. Certes, il existe des outils pour am\u00e9liorer les performances et la mise en cache, mais ils ne font pas partie int\u00e9grante de l’architecture.<\/p>\n\n\n\n Avec une architecture Jamstack on utilise un CMS Headless, donc des APIs pour r\u00e9cup\u00e9rer le contenu du CMS mais sans la mise en forme, ce qui est tr\u00e8s pertinent si le contenu doit \u00eatre affich\u00e9 d\u2019une mani\u00e8re diff\u00e9rente d’un appareil \u00e0 l\u2019autre par exemple. Mais cette approche est contre-productive si le contenu est affich\u00e9 de la m\u00eame mani\u00e8re sur tous les appareils.<\/p>\n\n\n\n Si comme nous, vous voulez vous lancer dans le d\u00e9veloppement d\u2019un site en utilisant l\u2019architecture Jamstack, nous vous conseillons d\u2019adopter ces quelques bonnes pratiques :<\/p>\n\n\n\nPourquoi pas SPA ?<\/h3>\n\n\n\n
Pourquoi utiliser Jamstack ?<\/h2>\n\n\n\n
Notre exp\u00e9rience avec le site socraft.ch<\/h2>\n\n\n\n
Gatsby et GraphQL<\/h3>\n\n\n\n
![\"\"](\"https:\/\/new.socraft.ch\/wp-content\/uploads\/2023\/04\/Capture-decran-2023-04-06-a-14.03.00-1024x857.png\")
Pas que Jamstack, mais aussi la librairie TailwindCSS<\/h3>\n\n\n\n
Nos d\u00e9boires avec Ghost<\/h3>\n\n\n\n
\n
Nos d\u00e9boires avec Contentful<\/h3>\n\n\n\n
N\u2019aurait-on pas mieux fait d\u2019utiliser un CMS classique comme WordPress ?<\/h3>\n\n\n\n
Les bonnes et mauvaises pratiques<\/h2>\n\n\n\n
Bonnes pratiques<\/h3>\n\n\n\n