Cette année, je me suis amusé avec mon site pro. Outre le côté design, je me suis aussi fait la main (de façon très basique) avec ReactJS.

Octobre 2019, j'ouvre PageSpeed Insights de Google et je regarde ce que ça donne du côté de wecoprod.com.  En un mot, c'est catastrophique : un score de 37/100 en mobile et de 86/100 en desktop. Il faut dire que ma page unique, c'est :

  • 1,66Mo de données chargées
  • 1,4s de chargement (5,5s sur GTMetrics…)

En fait, le site était chargé avec ReactJS et ce dernier construisait la page à chaque chargement. #IDIOT

Puis, dernièrement, je me suis intéressé à la stack JAMStack.

En parcourant les différents articles qui en parlent, j'ai découvert Next.js qui me semblait une bonne alternative à React si je voulais mettre en place un site très très simple, que je pouvais rendre statique pour le placer sur mon serveur de production.

Il fallait que je mette ça en place sur wecoprod.com. Je ne pouvais pas garder des scores aussi nuls, vendant de la prestation Web.

Etape 1 : passer de React à Next.js

Alors, c'est assez simple de ce côté-là puisque Next.js est un framework React. Il fallait juste installer le package, remanier quelques fichiers et voilà, mon site est pris en main par Next.js.

En local, il permet la mise à jour en live dans le navigateur. Et une fois le projet terminé, on le build en fichier statique (Server Side Rendering). Simple et efficace.

Puis, il faut le mettre en ligne.

Quand on regarde la documentation autour de JAMStack, la logique est d'envoyer le site sur un CDN. Puisque c'est un (ou des) fichier(s) statique(s), il peut être envoyé sur un réseau de serveur à travers le monde sans problème.

Etape 2 : envoyer le site sur un CDN

Next.js est développé par Zeit. Ce dernier développe également Now, une solution d'hébergement pour sites statiques. Autant utiliser un écosystème optimisé et gratuit.

Alors, plusieurs façons d'envoyer le site sur un CDN Zeit : soit via leur outil en ligne de commande, soit via un Hook sur un depot Github ou Gitlab. Mon site étant déjà versionné sur Gitlab, j'ai utilisé cette dernière solution.

Le workflow est simple : on push, un hook déclenche un build du projet (création des pages du site en statique) chez Zeit et les fichiers sont mise en ligne.

Et c'est tout !

Le bilan, c'est un score PageSpeed de 97% sur mobile et 100% sur desktop. Avec un chargement en 0,6s et moins de 300Ko de données chargées.

Documentation :