Comment faire un site Jamstack avec WordPress et Nuxt ?

Comment faire un site Jamstack avec WordPress et Nuxt JS ?

Souvent, nous nous retrouvons dans la position où nos clients veulent un système de gestion de contenu (CMS et ultérieur) qui leur permettra d’éditer leurs pages sans avoir à connaître le code HTML pour le faire.

C’est alors généralement un choix entre un CMS sur mesure et WordPress (récemment, bien que nous voyions de plus en plus de CMS « Headless » arriver, ainsi que l’alternative très valable des options de CMS démarquées ou statiques).

Dans notre cas, nous avons opté pour WordPress pour plusieurs raisons :

  • C’est un CMS solide avec des années et des années d’expérience sur le terrain
  • Les problèmes de sécurité ont maintenant presque disparu, compte tenu des mises à jour de sécurité automatiques à partir de la version 4.7 (je me trompe peut-être sur la version, ne me citez pas là-dessus).
  • L’API WordPress REST nous donne accès à plusieurs champs (et à des champs personnalisés) sans avoir besoin de servir l’ensemble du front-end avec WordPress.

Notre développeur backend était également plus familier avec PHP, Laravel et WordPress que d’autres technologies, donc heureusement, nous avons finalement opté pour WordPress.

Les 2 technologies utilisées : 

WordPress : Utiliser WordPress comme un CMS headless avec l’API REST. Avec WordPress, vous avez deux solutions. Utiliser WordPress dans son intégralité ou séparer le back du front en conservant votre CMS uniquement pour ce qu’il sait faire de mieux : gérer des contenus. Le principe du headless consiste à séparer le front du back-office. On conserve WordPress pour gérer ses contenus, pas pour les afficher (la gestion des thèmes devient obsolète). L’API REST est intégré au cœur de WordPress depuis maintenant 4 ans. 

L’avantage d’utiliser le CMS Headless WordPress

Être une plate-forme open-source ; WordPress offre une grande flexibilité pour créer tout type de site Web. L’utilisation de WordPress en tant que CMS sans tête vous permet de créer le front-end de votre application Web à l’aide de n’importe quelle technologie Web et de gérer son contenu à l’aide de l’un des CMS les plus populaires.

Nuxt :

Nuxt.js est une bibliothèque JavaScript gratuite et open source basée sur Vue.js , Node.js , Webpack et Babel.js . Nuxt s’inspire de Next.js,qui est un framework d’objectif similaire, basé sur React.js.

Vue est un framework frontal similaire à Angular ou React… un peu. Il existe de nombreux articles de comparaison sur React par rapport à Vue, et la plupart souligneront que Vue est davantage un framework alors que React est une bibliothèque. N’abordons pas cela pour ce post. Pour cet article, nous supposerons que Vue et React offrent essentiellement la même chose pour les développeurs frontaux et travailleront avec leurs homologues de serveur Nuxt et Next respectifs.

Vous pouvez considérer Nuxt comme Next mais pour Vue au lieu de React. Donc, si vous cherchez à écrire un site WordPress sans tête et que vous souhaitez utiliser Vue, Nuxt peut être une excellente option à utiliser comme framework côté serveur. Il prend en charge le rendu côté serveur et la génération de sites statiques similaires à Next et est généralement un cadre avisé qui vous aide à créer un site Web frontal. Avant de plonger dans Nuxt, discutons d’abord de la configuration de WordPress pour le headless.

Le framework est présenté comme un « méta-framework pour les applications universelles ». Le terme universel est utilisé ici dans le sens que l’objectif du cadre est de permettre aux utilisateurs de créer des vues Web en JavaScript en utilisant le système de composant de fichier unique Vue.js.

Étant donné que Nuxt n’a pas de couche de données intégrée comme GraphQL, le moteur Nuxt ne sait pas comment générer automatiquement toutes les routes dynamiques pour le contenu d’une base de données externe. Les développeurs doivent spécifier comment générer ces itinéraires à l’aide de la propriété dans nuxt.config.js. Ce travail supplémentaire entraîne une complexité et un temps de construction éventuellement lent, ce qui entraîne une rentabilité, en particulier lorsque la plupart des services d’hébergement tels que Netlify facturent en fonction du temps de construction.

Wordpress et Nuxt

Envie d’un site Jamstack avec WordPress & Nuxt JS ?

Nous pouvons vous accompagner avec Agily grâce à nos offres de développement web. Notre equipe technique se fera un plaisir d’échanger avec vous et vous conseiller pour que votre projet soit un succès. 

Envie d’en savoir plus sur Jamstack ?

Vous avez un projet en tête ?

Discutons-en ! 

Découvrez nos autres articles de blog

Loading...