Passez à un site internet moderne, ultra rapide et performant avec Gatsby JS ou Next.js.

Les 8 bonnes raisons de passer à la JAMstack avec Gatsby et WordPress

20 août 2020

7 bonnes raisons de passer à la JAMstack avec Gatsby

Aujourd'hui autour de 35% des sites web de la planète ont été réalisés (ou même propulsés) avec WordPress. C'est tout simplement énorme et cela peut se comprendre pour plein de raisons: WordPress est gratuit, temps de développement faible, très simple à utiliser pour administrer ses contenus, ses utilisateurs, etc...

Moi-même pour la plupart des sites sur mesure que je développe pour mes clients, j'utilise WordPress, ACF Pro (Advanced Custom Fields) et les blocs de Gutenberg.

Cependant, WordPress a tout de même ses inconvénients : sites pas très rapides, cible privilégiée des hackers, nécessité de mettre à jour systématiquement et régulièrement WordPress et les plugins...

Une alternative à l'utilisation classique de WordPress, c'est de l'utiliser en tant que "Headless CMS". Pour faire simple, on utilise WordPress classiquement pour créer les contenus, les pages, les menus, les articles, les utilisateurs, les post-type etc... Mais on n'utilise pas WordPress pour le rendu des pages. A la place, on utilise une API et le plugin wp-graphql pour permettre de récupérer les données de WordPress avec React et GraphQL. Des framework tels que Gatsby JS permettent de faire ça tout en générant des sites statiques (contenu statique HTML, JS, CSS) via un CDN pour une performance énorme. On appelle cette méthode de développement la JAMStack (JAM pour Javascript Api Markup).

Les contenus peuvent être administrés également via d'autres CMS headless comme Strapi, Contentful (hébergement potentiellement gratuit) ou même Drupal ou Magento.

Voici donc 8 bonnes raisons de vous mettre à la méthode JAMstack avec Gatsby pour vous et / ou pour vos clients.

1- Des sites web hyper rapides

Quand le développeur fait une modification ou que l'administrateur met à jour ses contenus, le site va être reconstruit intégralement. Quand l'utilisateur navigue sur le site il n'y a aucune requête vers le serveur aucun appel à une base de donnée, tous les contenus sont directement disponibles, là, tout de suite. La navigation n'est pas rapide elle est instantanée.

Du coup, des performances SEO accrues, un nombre de visiteurs qui augmente, et une expérience utilisateur optimale qui augmente le taux de conversion de vos pages !

Et comme Gatsby génère un site statique via un CDN, aucun problème de capacité de votre serveur en cas de forte affluence. Fini le serveur qui plante !

2- Aucune maintenance à prévoir. Coût maintenance = 0 !

Ça aussi c'est énorme ! Le fait de générer des fichiers statiques HTML, CSS, JS et de dissocier le back-end WordPress du front-end Gatsby empêche tous les problèmes de sécurité liés aux failles potentielles de WordPress ou de vos plugins. Plus besoin de s'embêter faire des mises à jour. Plus besoin de payer la maintenance ! Sachant qu'un freelance va facturer 20 à 60€ par mois pour la maintenance selon le site (50 à 120€ pour une agence) je vous laisse calculer le bénéfice !

3- Un temps de développement réduit

A prendre avec des pincettes, cela dépendra quand même du type de site et du type de fonctionnalités désirés mais en tous cas pour des sites un peu compliqués, qu'on développerait peut-être avec Laravel ou Symfony pour le back-end, et React.js ou Vue.js pour le front-end, ici une bonne utilisation intelligente de WordPress / ACF et Gatsby permet de réduire considérablement le temps de dev.

J'ai par exemple repris cette petite application des plats du jour de restaurants Strasbourgeois. Initialement codée en 3 voir même plutôt 4 semaines avec PHP, MySql et Javascript, j'ai du passer une peu plus de 2 semaines avec WordPress / ACF et Gatsby tout en améliorant les fonctionnalités (filtres en React) et la rapidité.

Il faudra voir au cas par cas pour vos projets mais gardez cette option à l'esprit.

Pour un site vitrine sur mesure (sans utiliser de thème ni trop de plugins non nécessaires) avec WordPress et ACF, le temps de développement sera sensiblement le même entre la méthode WordPress classique et la méthode Gatsby + WordPress.

4- Des contenus toujours aussi faciles à administrer

Le fait d'utiliser WordPress en mode JAMstack ne change rien pour l'administrateur. Les contenus, pages, articles, post-types, catégories, images etc... sont gérés comme avant dans WordPress.

Les autres CMS comme Strapi on Contentful ont une interface semblable et très intuitive.

5- Hébergement totalement GRATUIT avec Contenful et Netlify

Je parlais de Contenful juste au dessus. Ce CMS là est complètement dingue parce qu'il est directement hébergé sur le Cloud. Et surtout, il est GRATUIT ! (enfin pour une utilisation basique mais celle-ci est totalement suffisante). On crée un compte gratuitement pour l'administrateur, le développeur configure les contenus à administrer, et l'administrateur n'a plus qu'à créer ses contenus en ligne.

Pour la partie front-end, pour un site classique (qui ne demande pas un tas de ressources et qui n'est pas mis à jour 2000 fois par jour) on peut trouver des hébergements GRATUITS par exemple sur Netlify (qui permet aussi au développeur de déployer ses modifications directement avec Github ou Bitbucket et ça aussi c'est dingue). On sera limité au nombre de mises à jours mensuelles du site mais encore une fois, la version gratuite est à priori largement suffisante pour la plupart des sites.

Donc on résume :

  • hébergement du back-end avec Contentful : GRATUIT

  • hébergement du front-end avec Netlify : GRATUIT

On est d'accord, avec ce système, l'hébergement du site web est TOTALEMENT GRATUIT ! Et ça pour des clients avec petit budget c'est quand même génial.

NB: ceci est vrai au jour où j'écris cet article mais c'est susceptible d'évoluer.

6- Des applications mobiles à moindre coût

Avec Gatsby, on peut transformer un site web en application mobile très simplement grâce à plein de plugins Gatsby et de fonctionnalités (gestion des notifications push, gestion du mode hors-ligne, authentifications etc...) Même pas besoin de connaître React Native et encore moins de faire appel à un développeur mobile.

7- Idéal pour la refonte d'un site WordPress existant

Pour un client qui veut faire une refonte de son site WordPress tout en conservant ses contenus existants, rien de plus simple.

On ne conservera que la partie back-end du WordPress qu'on pourra éventuellement améliorer / étoffer. On hébergera la partie front-end du site gratuitement sur Netlify en faisant les redirections qui vont bien.

Avec Gatsby on récupérera les contenus du WordPress via GraphQL et on rendra les pages web avec le nouveau design. Pas nécessairement besoin de toucher au WordPress existant et donc une refonte à moindre coût et le client ne sera pas perturbé par un changement d'interface. Si besoin on pourra tout de même ajouter des nouveaux champs avec ACF ou des nouveaux types de contenus.

8- Cela rendra votre développeur heureux !

Ah oui, qu'est ce que c'est agréable de travailler avec React et Gatsby comparé aux vieux templates WordPress en PHP. Quoique aujourd’hui avec Lumberjack, Timber et Twig par exemple on peut faire du WordPress en mode MVC (orienté objet). En tous cas, tous les développeurs qui ont découvert la JAMstack sont avides de travailler avec. Et qui dit développeur heureux, dit développeur efficace et productif. Et ça c'est bon pour vous et pour votre site web !!

Conclusion

La méthode JAMstack en utilisant WordPress (ou Strapi ou Contenful) pour le back-end, et Gatsby / React pour le front-end vous permet de créer des sites statiques, ultra rapides, sécurisés, pas de frais de maintenance, potentiellement pas de frais d'hébergement, un temps de développement et donc un coût de création ou de refonte de sites potentiellement réduits, et enfin des développeurs heureux : que demande le peuple !?

Depuis 2018, aux Etats-Unis cette méthode de développement - la JAMstack comme on dit dans le jargon - explose littéralement et commence aussi à bien se développer en France.

Alors, envie d'être à la pointe du développement moderne à moindre coût et de passer à la vitesse supérieure ? Ayez une longueur d'avance : contactez-moi pour en savoir plus !

Curieux mais pas encore convaincu par les atouts de la JAMstack avec Gatsby ? On en discute !

Retour aux articles