78 lines
4.9 KiB
Plaintext
78 lines
4.9 KiB
Plaintext
---
|
||
title: The day I Jam’d
|
||
subtitle: Des paris, des outils et du fun.
|
||
lang: fr
|
||
slug: "the-day-I-jamd"
|
||
excerpt: Ooh, yeah! All right! We’re jammin’
|
||
tags: ["Dev", "Jamstack"]
|
||
type: articles
|
||
createdAt: "2020-10-08T07:47:36.000Z"
|
||
updatedAt: "2022-12-27T15:40:06.000Z"
|
||
---
|
||
|
||
import AstroImage from "../../../components/AstroImage.astro";
|
||
export const wordpress = "https://assets.nardu.in/wordpress_8ee6f54b98.jpeg";
|
||
export const strapi11ty = "https://assets.nardu.in/static_2c0d9f1eb8.jpeg";
|
||
|
||
## La solution de non facilité
|
||
|
||
Lorsque j’utilisais encore Wordpress pour mon site web personnel, j’ai voulu essayer le serveur web <a href="https://openlitespeed.org" lang="en" hreflang="en" rel="noopener noreferer">OpenLiteSpeed (en anglais)</a>. En tant que designer, j’ai toujours aimé avoir une interface graphique et j’avais entendu dire qu’OLS jouissait de bonnes performances en général et de cache en particulier.
|
||
|
||
## Battez-vous!
|
||
|
||
Quelques années plus tard, je découvrais l’univers Jamstack et son incroyable potentiel. N’étant pas du tout impulsif, j’ai choisi de refaire entièrement mon site web avec des outils comme <a href="https://www.11ty.dev/" lang="en" hreflang="en" rel="noopener noreferer">11ty (en anglais)</a> et <a href="https://strapi.io/" hreflang="en">Strapi (en anglais)</a>.
|
||
|
||
Je me souviens que Strapi était encore en alpha/beta et que certains collègues me disaient que c’était un pari risqué, surtout que je découvrais à peine le monde de node.js.
|
||
|
||
> Open source et français ? Je dis banco !
|
||
|
||
J’ai donc commencé à recréer mon site web à l’identique avec 11ty et Strapi. Même hébergement chez Digital Ocean, même serveur web, même contenu. J’avais fait pas mal d’optimisations de performances sur mon installation wordpress, j’étais donc impatient de comparer les résultats avec la nouvelle version statique.
|
||
|
||
J’en suis resté pantois ! Quasiment sans optimisation du côté statique, j’ai obtenu les résultats ci-dessous.
|
||
|
||
### wordpress
|
||
|
||
<AstroImage
|
||
src={wordpress}
|
||
width="728"
|
||
height="412"
|
||
alt="Score de performance de 53/100 sur Wordpress."
|
||
/>
|
||
|
||
Malgré beaucoup d’efforts, je n’ai pas pu faire mieux. Je ne suis pas un expert en cache, je n’utilise pas de CDN et je me suis appuyé sur des plugins pour réaliser beaucoup de choses (php n’étant pas ma spécialité 😬).
|
||
|
||
### 11ty + strapi
|
||
|
||
<AstroImage
|
||
src={strapi11ty}
|
||
width="728"
|
||
height="412"
|
||
alt="Score de performance de 97/100 en Jamstack."
|
||
/>
|
||
|
||
Presque **zéro** configuration spéciale (j’étais trop impatient de tester) et j’ai atteint un score impressionnant. Je sais que les scores lighthouse ne font pas tout mais **53 contre 97**… Ça me va !
|
||
|
||
## Embrassez-vous 🥰
|
||
|
||
Ces deux approches ont leurs avantages et leurs inconvénients. En tant que freelance, mes clients préfèrent ou demandent souvent Wordpress en raison de sa réputation. Je présente toujours une alternative Jamstack lorsque c’est possible, mais cela reste effrayant la plupart du temps par rapport à Wordpress. Je pense cependant qu’il sera plus facile d’utiliser la Jamstack avec le temps.
|
||
|
||
## Encore et encore…
|
||
|
||
Nous voici maintenant une quarantaine et quelques mois plus tard et ce site fonctionne avec… [Nuxt.js](https://fr.nuxtjs.org/). Je sais, je suis désolé, je n’ai pas pu résister à la dernière fonctionnalité [<span lang="en">nuxt content</span>](https://content.nuxtjs.org/fr) de Nuxt.
|
||
|
||
Du coup j’ai tout refait… et laissez-moi vous dire : **wow**, quelle expérience !
|
||
J’adore développer avec Nuxt. L’utilisation de <span lang="en">nuxt content</span> m’a permis de me concentrer sur le design et, évidemment, sur le contenu.
|
||
Plus de client Apollo ni de requête graphQL, seulement du <span lang="en">markdown</span> et quelques promesses.
|
||
|
||
Attention, j’aime beaucoup travailler avec Strapi et son interface graphQL mais pour les besoins de ce site, <span lang="en">nuxt content</span> fait le <span lang="en">job</span> (extrêmement bien).
|
||
|
||
J’utilise toujours Strapi pour téléverser, stocker et gérer les images, vidéos, gifs, etc. C’est peut-être trop pour ce que j’en fait mais j’aime savoir que je peux toujours y revenir si j’ai envie ! De plus, j’ai passé pas mal de temps à le mettre en place avec <span lang="en">OpenLiteSpeed</span> et je suis encore trop attaché à cette réussite pour la laisser tomber.
|
||
|
||
## Et en fait à la fin
|
||
|
||
Wordpress, Jamstack, fait main… Est-ce vraiment important ? Pour moi, l’expérience de développement a été bien plus agréable en travaillant avec 11ty, nuxt.js et strapi qu’avec Wordpress.
|
||
|
||
Du point de vue de la performance et de l’accessibilité, il semble également que ce soit le choix le plus judicieux. Ce n’est peut-être pas le cas à chaque fois ! ¯\\\_(ツ)\_/¯
|
||
|
||
J’ai hâte d’apprendre <a href="https://astro.build/" rel="noopener noreferer" hreflang="en" >astro</a> et de tout recommencer à zéro !
|