Novembre 3 2022

Headless WordPress : qu'est-ce que c'est et en avez-vous besoin ?

Séparez le backend et le frontend WordPress via l'approche Headless "headless".

Chez Managed Server, nous sommes de grands partisans de WordPress et de son écosystème. Nous l'utilisons également pour nos sites car nous trouvons vraiment que c'est le meilleur système de gestion de contenu, car les statistiques continuent de s'afficher année après année. Il est open source, polyvalent et, en un mot, il est incroyablement facile de comprendre pourquoi il alimente plus de 40 % de tous les sites Web sur Internet.

Avec la taille de l'√©cosyst√®me et de la communaut√© de d√©veloppeurs autour de WordPress, il n'est pas surprenant que les gens utilisent WordPress de diff√©rentes mani√®res. L'une de ces approches consiste √† utiliser WordPress comme un CMS sans t√™te, en abr√©g√©, nomm√© WordPress sans t√™te, qui devient de plus en plus populaire.

Dans ce guide, nous d√©taillerons tout ce que vous devez savoir sur WordPress Headless, ses avantages, ses inconv√©nients et plus encore gr√Ęce √† l'exp√©rience de premi√®re main de notre √©quipe.

Qu'est-ce que WordPress sans tête ?

Pour comprendre WordPress Headless, vous devez savoir ce qu'est WordPress monolithique. Monolithique, o WordPress dans sa forme traditionnelle, c'est WordPress tel que vous le connaissez. Il s'agit d'un syst√®me de gestion de contenu que vous pouvez utiliser pour g√©rer tout le contenu de votre site.

En général, WordPress a le backend (le système de gestion de contenu) et la couche de présentation, qui vous permet de concevoir votre site Web. Cependant, les sites Headless WordPress sont ceux qui s'appuient simplement sur WordPress comme système de gestion de contenu et utilisent une pile frontale différente pour afficher le contenu.

Cela permet une plus grande flexibilit√© en termes de d√©veloppement. Fondamentalement, avec l'aide de l'API REST, vous pouvez utiliser WordPress pour sa fonctionnalit√© de gestion de contenu en l'associant √† une interface cr√©√©e s√©par√©ment dans un cadre comme Vue.js o R√©agir (pour n'en nommer que quelques-uns, il existe une multitude d'autres frameworks et outils frontaux disponibles).

WordPress sans tête

WordPress est consid√©r√© comme une architecture CMS coupl√©e car tous les outils d'√©dition frontaux et les fonctionnalit√©s de gestion de contenu (√©dition) back-end sont coupl√©s. Cela permet aux √©quipes de d√©veloppeurs, d'√©diteurs, de r√©dacteurs, etc. de g√©rer √† la fois la couche de pr√©sentation et le contenu. Contrairement aux sites Web Headless WordPress qui suivent une architecture d√©coupl√©e o√Ļ la couche de pr√©sentation et le contenu sont, comme son nom l'indique, d√©coupl√©s.

REST, GraphQL et intégration de fichiers plats

Une configuration CMS sans tête utilise des API et des CDN pour restituer le contenu. Et il existe actuellement trois options : l'API REST, l'intégration de fichiers plats et GraphQL.

WordPress utilise l'API REST pour vous permettre de connecter l'interface au CMS. Une API REST est simplement une interface de programmation d'application qui suit les contraintes de l'architecture REST, fournissant une interface uniforme qui permet aux serveurs et aux clients de transférer des données entre eux. REST permet aux développeurs d'exposer et d'utiliser des données spécifiques, si le point de terminaison REST n'a pas les données directement disponibles, un développement supplémentaire sera nécessaire.

Une autre alternative est GraphQL (QL est l'abr√©viation de Query Language). GraphQL facilite l'interrogation des API avec des champs et des relations sp√©cifiques, comme vous le feriez avec une base de donn√©es. Il s'agit d'une am√©lioration significative et il existe un plug-in qui le rend une API GraphQL disponible sur WordPress . Cela peut signifier qu'aucun d√©veloppement suppl√©mentaire n'est n√©cessaire pour tirer parti du contenu du CMS puisque GraphQL y a d√©j√† acc√®s, le plus difficile est de demander les requ√™tes correctes et efficaces pour l'obtenir.

L'autre option est l'intégration de fichiers plats. L'intégration de fichiers plats vous permet d'exporter les données normalement fournies via REST ou GraphQL sous forme de fichier .JSON, permettant ainsi au serveur de les mettre en cache et elles n'ont pas besoin d'être générées à chaque requête, ce qui les rend beaucoup plus rapides. L'utilisation de cette méthode générera automatiquement un nouvel ensemble de fichiers .JSON à chaque modification de la base de données. Il s'agit généralement d'une implémentation sur mesure et pas seulement d'un plug-in. Par conséquent, un développeur est nécessaire pour le configurer.

Les avantages et les inconvénients de WordPress Headless

Maintenant que vous savez ce qu'est WordPress Headless et en quoi il est diff√©rent d'une configuration WordPress conventionnel, voici les avantages et les inconv√©nients que vous devez conna√ģtre avant de prendre une d√©cision.

Développement souple, de zéro.

Tout en utilisant WordPress comme syst√®me de gestion de contenu, le d√©couplage de WordPress donne √† vos d√©veloppeurs la flexibilit√© de construire avec leurs technologies frontales pr√©f√©r√©es, telles que des frameworks comme Next.js . Au niveau de la surface, cela signifie beaucoup plus de libert√© pour construire.

En surface, c'est fantastique. Mais cela signifie également que vous finissez par réinventer la roue pour les fonctionnalités de base, comme les plans de site et les permaliens, en vous assurant que les aperçus en direct du contenu des publications et des pages fonctionnent.

Et tu perds le la plupart Le flux de travail √©ditorial pour lequel WordPress est connu. La configuration de nouvelles pages devient souvent beaucoup plus compliqu√©e et n√©cessite que les d√©veloppeurs de secours d√©boguent lorsque les choses ne fonctionnent pas ils travaillent.

Créer des applications mobiles avec un backend WordPress

Un cas d'utilisation souvent négligé est que lorsque vous découplez WordPress, en l'utilisant exclusivement pour le backend, vous pouvez créer des applications mobiles.

Les applications sont complexes, bien plus que la cr√©ation de sites Web √† partir de z√©ro (c'est-√†-dire avec ou sans WordPress), donc si vous finissez par emprunter cette voie, alors que le contenu sera bas√© sur l'API, une grande partie du reste d√©pendra des fonctionnalit√©s de l'appareil. √† l'aide de frameworks comme React Native. Voici une excellente comparaison des diff√©rentes fa√ßons de cr√©er des applications mobiles √† partir de Scott Bollinger d'AppPresser. L'un d'eux est, comme vous l'avez peut-√™tre devin√©, AppPresser, qui en est une excellente impl√©mentation pour ceux qui veulent commencer tout de suite. Il est, bien s√Ľr, propuls√© par WordPress, utilisant des plugins WordPress, des th√®mes et des API REST pour alimenter les applications mobiles iOS et Android natives/hybrides.

Commencer avec une solution comme celle-ci vous fera gagner des semaines, voire des mois de temps de développement et s'appuiera finalement sur les années d'expérience de leur équipe en interne, après des années de travail sur des projets clients et de test de la plate-forme en production pour la perfectionner.

De meilleures performances, avec des compromis.

Il existe trois façons principales de développer Headless

  1. C√īt√© client: tout est construit sur le navigateur en utilisant javascript avec le contenu charg√© depuis le serveur lors de la connexion. Par exemple, l'utilisation de React en tant que moteur obtient les donn√©es via, par exemple, l'API REST. Lorsque la page est modifi√©e, il y a une demande de donn√©es suppl√©mentaires √† l'API et une nouvelle page est cr√©√©e sur le client. Le plus souvent utilis√© dans les applications √† page unique (SPA)
  2. Publication statique : tout est d√©j√† compil√© et export√© en HTML, CSS et JS sur le serveur. Puisqu'il ne sert que des fichiers statiques, ne g√©n√©rant pas dynamiquement la page, cela peut √™tre stock√© sur un serveur ou un CDN de tr√®s faible puissance. Cette m√©thode est tr√®s rapide. Cela se fait souvent avec quelque chose comme Next.js. Lorsque la page est √©dit√©e, une nouvelle page HTML est t√©l√©charg√©e depuis le serveur et affich√©e. Utilis√© le plus souvent sur des sites qui ne changent pas souvent, tels que des sites de brochures ou de documentation.
  3. Pages isomorphes : la premi√®re page Web accessible est Server Side Render (SSR) au format HTML, mais toutes les autres pages suivantes sont g√©n√©r√©es c√īt√© client si le client est en mesure de le faire. Si le client est incapable de g√©n√©rer la page, il la demandera au serveur. Le plus souvent utilis√© sur les applications Web progressives (PWA), les sites hautement dynamiques ou ceux qui doivent servir des navigateurs Web plus anciens. Souvent un cadre tel que Svelte.kit.

Méthodes n. 1 et n. 3 peut utiliser des fichiers de données plats pour générer le HTML, ce qui les rend comparables à un site publié statique, mais l'utilisation de REST ou de GraphQL les ralentira légèrement car il faudra peut-être générer du contenu JSON à chaque requête.

Si des √©l√©ments tels que du contenu g√©n√©r√© par l'utilisateur (formulaires ou commentaires) sont n√©cessaires, ces trois fa√ßons de travailler deviennent beaucoup plus complexes que dans WordPress standard. Prenons par exemple un formulaire de contact, le formulaire doit √™tre construit pour fonctionner c√īt√© client et pouvoir envoyer ses informations via Javascript/AJAX au serveur, o√Ļ elles sont ensuite v√©rifi√©es, d√©sinfect√©es et plac√©es dans la gestion du plug-in du formulaire de contact syst√®me. Comme il s'agit d'une mani√®re compl√®tement diff√©rente de travailler, il ne peut pas compter sur le cr√©ateur du plugin de formulaire de contact pour fournir ceci ou quoi que ce soit comme le pot de miel et d'autres protections anti-spam qui continueront de fonctionner. Vous aurez peut-√™tre besoin d'un d√©veloppeur pour cr√©er un point de terminaison REST et le faire fonctionner selon vos besoins. Beaucoup plus complexe.

Les commentaires sont, en th√©orie, beaucoup plus simples car les points de terminaison REST existent d√©j√†, mais vous aurez toujours besoin d'un d√©veloppeur pour vous permettre de r√©cup√©rer les commentaires approuv√©s et de les pr√©senter dans une mise en page en fil de discussion, de t√©l√©charger de nouveaux commentaires dans le processus d'approbation et, bien s√Ľr, de g√©rer le spam. . Lors du d√©veloppement de Headless, il reste encore beaucoup √† faire pour atteindre les m√™mes objectifs qui ressortent des patterns avec WordPress ou qui sont possibles avec certains plugins.

La perception de un important s√©curit√©? 

Il y a beaucoup de désinformation sur la sécurité de WordPress Headless. Effectuer une configuration de site statique avec un CDN est une bonne mesure préventive contre les attaques DDoS. Mais à terme, n'importe quel serveur peut être victime d'une attaque DDoS si vous ne mettez pas en place les systèmes nécessaires (ex : Cloudflare, etc.). Les configurations WordPress découplées fonctionnent avec WordPress installé sur un domaine ou sous-domaine séparé, avec le frontend sur le domaine standard.

Par exemple, si nous devions utiliser ce site Web, nous continuerions √† utiliser ManagedServer.it comme notre site accessible au public tout en ayant wp.Managed Server.com mis en place comme un espace o√Ļ notre √©quipe peut publier des articles de blog et g√©rer les parties du site qu'elle peut.

Et par exemple, utiliser une interface Next.js comme exemple signifierait la possibilit√© d'utiliser RSS (rendu c√īt√© serveur), o√Ļ le HTML de la page est g√©n√©r√© √† chaque requ√™te, ou SSG (g√©n√©ration statique), o√Ļ le HTML de la page est g√©n√©r√© au moment de la compilation. La g√©n√©ration statique permet de r√©utiliser le HTML pour chaque requ√™te en lui permettant d'√™tre mis en cache √† partir d'un CDN.

Dans tous les cas, la couche de pr√©sentation communique toujours et demande du contenu √† la couche de contenu ex√©cutant WordPress. Cela signifie que la zone o√Ļ vous h√©bergez le La couche de gestion de contenu pour la configuration sans t√™te de WordPress continuerait √† ex√©cuter WordPress.

Pour r√©sumer, la r√©ponse est s√©curit√© est meilleur sur les sites Web Headless WordPress que les sites qui fonctionnent avec la configuration conventionnelle est que √ßa peut √™tre. En termes simples, car il s'agit d'une configuration moins courante. Ce que nous entendons par l√†, c'est que la vraie raison pour laquelle certains essaient de peindre la perception qu'il y a des probl√®mes de s√©curit√© avec les sites ex√©cutant WordPress est que tant de sites ex√©cutent WordPress et que les choses sont compl√®tement flexibles ; donc √©videmment, vous pouvez construire ou installer quelque chose qui n'est pas fiable, il en va de m√™me si vous construisez avec headless et √† peu pr√®s n'importe quelle autre pile.

Lorsque vous travaillez avec un fournisseur d'h√©bergement WordPress qui offre une expertise en mati√®re de s√©curit√©, d'√©volutivit√© et de performances comme nous le faisons chez Managed Server, il est toujours possible de s√©curiser vos sites sans sacrifier tout ce que vous pouvez faire avec WordPress, en ayant √† passer par un d√©veloppement co√Ľteux. reconstruire √† partir de z√©ro.

Autres inconvénients que vous pouvez rencontrer avec Headless

Les co√Ľts de WordPress Headless

Nous l'avons d√©j√† mentionn√© bri√®vement, mais en bref, Headless WordPress peut co√Ľter assez cher. Pas seulement en termes de co√Ľts de d√©veloppement, mais peut-√™tre plus important encore, de tempo. 

Votre groupe perd la capacité de se déplacer rapidement et d'itérer sans avoir à compter sur des ingénieurs internes (ou une agence).

Pour les √©quipes au rythme rapide qui ne voient pas leurs sites comme statiques, c'est un compromis qui n'en vaut finalement pas la peine. Nous avons vu de nos propres yeux comment des entreprises √† 8 chiffres, qui ont clairement les ressources pour g√©rer WordPress Headless en interne, choisissent de passer √† une configuration Headless et finissent par revenir parce que ce qu'elles ne pouvaient pas se permettre, c'√©tait la perte de temps, la flexibilit√© d'agir rapidement. et finalement donner √† plus d'une poign√©e de personnes de leur √©quipe le contr√īle de travailler sur leur site.

Les bons développeurs qui savent ce qu'ils font peuvent être difficiles à trouver

WordPress Headless est encore une configuration relativement nouvelle. Ainsi, bien que trouver des développeurs JavaScript familiers avec JavaScript (et des frameworks comme React, Vue, Svelte, Gatsby) ne soit pas particulièrement difficile du tout - et peut-être même plus facile que de trouver de grands développeurs WordPress en ce moment, ceux qui le connaissent réellement. niveau frontal avec WordPress d'une manière conventionnelle qui adhère à toutes les meilleures pratiques a tendance à être plus difficile à trouver.

Pas toujours plus rapide que le cache périphérique avec Full Page Cache

Il existe des chemins plus faciles, et peut-être meilleurs, vers un site Web plus rapide.

La plupart des entreprises qui envisagent une architecture sans tête devraient corriger leur hébergement avant de prendre une décision beaucoup plus compliquée. Non seulement cela est beaucoup plus facile à faire, mais vous constaterez également rapidement des améliorations significatives sans un énorme investissement initial. Sans investir dans la reconstruction de votre site et renoncer à tous les avantages de votre installation WordPress dans son état actuel.

Quand devriez-vous éviter WordPress sans tête ?

En règle générale, WordPress Headless ne convient pas à la plupart des entreprises qui construisent avec WordPress. Bref, ceux qui :

  • Vous voulez √©viter de conserver deux couches distinctes (la couche de contenu et la couche de pr√©sentation).
  • Je ne veux pas abandonner le flux de travail √©ditorial et de gestion de contenu pour lequel WordPress est connu.
  • Donnez √† leur √©quipe le contr√īle et la flexibilit√© n√©cessaires pour travailler sans avoir √† d√©pendre constamment de vos d√©veloppeurs.
  • Vous voulez √©conomiser des ressources (temps et argent).
  • Il n'y a pas de d√©veloppeurs exp√©riment√©s disponibles pour faire les bons choix sur la fa√ßon dont le syst√®me est construit.
  • Vous cherchez √† embaucher des int√©rimaires ou √† faire appel √† une agence pour d√©velopper votre site en vue d'√©volutions ult√©rieures ?

√Ä qui s'adresse WordPress Headless ? 

Headless WordPress peut être une bonne option pour votre équipe si :

  • Votre √©quipe de d√©veloppement conna√ģt bien la cr√©ation de frameworks JavaScript, et trouver un d√©veloppeur WordPress n'est pas une option (pour une raison quelconque). Mais souhaite √©galement continuer √† utiliser WordPress comme syst√®me de gestion de contenu, WordPress Headless peut √™tre une bonne option.
  • Votre √©quipe souhaite obtenir des r√©sultats sp√©cifiques, tels que la continuit√© entre la conception d'une plate-forme SaaS d√©j√† construite, ce qui rendrait plus difficile leur reconstruction et leur maintenance dans WordPress. Dans ce cas, s√©parer les couches de contenu et de pr√©sentation peut √™tre une bonne option.
  • Vous √™tes d√©termin√© √† ne pas construire dans les limites des th√®mes WordPress et ne comptez pas sp√©cifiquement sur les fonctionnalit√©s suppl√©mentaires offertes par les plugins.
  • En tant qu'employeur, vous souhaitez continuellement former votre personnel technique avec les derni√®res comp√©tences et savoir qu'en leur fournissant ces connaissances, ils sont plus susceptibles de rester avec vous plus longtemps.
  • Votre objectif est d'effectuer des optimisations de n -i√®me degr√© sur toutes les parties de la pile.

Bilan après action : évaluer l'absence de tête comme solution

Certains veulent explorer Headless parce que c'est la nouvelle chose brillante avec laquelle peu d'autres travaillent. Non parce que c'est vraiment la meilleure solution pour un probl√®me sp√©cifique qui autrement ne serait pas r√©alisable. En tant que sous-produit, la plupart des sites qui adoptent l'approche sans t√™te entrent dans la cat√©gorie d'ing√©nierie excessive sans le besoin. 

Il va sans dire qu'il existe √©galement des impl√©mentations et des sc√©narios WordPress Headless int√©ressants o√Ļ cela peut √™tre un excellent choix. Ceux o√Ļ le choix est ce qui permet aux √©quipes de cr√©er des sites Web incroyables qui conduisent au r√©sultat qu'ils essaient d'atteindre.

Vous vous demandez toujours si WordPress Headless correspond √† ce que votre √©quipe recherche ? Ne h√©sitez pas √† r√©servez un appel avec nous et nous serons heureux de parler des probl√®mes que vous rencontrez et d'envisager la mise en Ňďuvre de WordPress Headless √† r√©soudre.

Ou, si ce guide a déjà répondu à toutes vos questions et que vous êtes prêt à essayer l'approche Managed Server :

Int√©ress√© par un h√©bergement g√©r√© qui est empiriquement plus rapide ? Essayez notre approche de l'h√©bergement WordPress:

  • √Čvolutivit√© : lors de tests de charge de travail d'utilisateurs r√©els, le serveur g√©r√© a fourni un temps de r√©ponse moyen de 65 ms, 4,9 fois plus rapide que les meilleurs temps de r√©ponse.
  • Les temps de chargement globaux les plus rapides : Les temps de chargement moyens des pages de 1,26 seconde nous placent en t√™te de la liste des r√©sultats mondiaux de WebPageTest.
  • La vitesse de traitement la plus rapide : Les serveurs g√©r√©s offrent des vitesses de base de donn√©es jamais vues auparavant, traitant 2,44 fois plus de requ√™tes par seconde que la moyenne et ex√©cutant PHP 2,6 fois plus rapidement que le deuxi√®me meilleur !
  • S√©curit√© et disponibilit√© parfaites : Avec une disponibilit√© de 100 % sur tous les moniteurs et une note A + sur notre impl√©mentation SSL, vous pouvez √™tre assur√© que votre site est en ligne et s√©curis√©.

Vous avez des doutes ? Vous ne savez pas par o√Ļ commencer ? Contactez-nous


Nous avons toutes les réponses à vos questions pour vous aider à faire le bon choix.

Discute avec nous

Discutez directement avec notre support avant-vente.

0256569681

Contactez-nous par téléphone pendant les heures de bureau 9h30 - 19h30

Contactez-nous en ligne

Ouvrez une demande directement dans l'espace contact.

INFORMATIONS

ManagedServer.it est le premier fournisseur italien de solutions d'hébergement hautes performances. Notre modèle d'abonnement est abordable et prévisible, afin que les clients puissent accéder à nos technologies d'hébergement fiables, à nos serveurs dédiés et au cloud. ManagedServer.it offre également d'excellents services d'assistance et de conseil sur l'hébergement des principaux CMS Open Source tels que WordPress, WooCommerce, Drupal, Prestashop, Magento.

Remonter en haut