# Faust.js : le framework de WP Engine pour un headless WordPress clé en main

> WP Engine propose Faust.js, un framework Next.js pensé spécifiquement pour WordPress headless. Authentification, prévisualisation, hooks React : analyse.

- Auteur : Clément Hadrot
- Publié le : 2022-11-24
- Mis à jour le : 2022-11-24
- Catégorie : Headless & API
- URL : https://wpmoderne.dev.wordpress-developpement.fr/headless/faustjs-framework-wp-engine-nextjs-headless/

## L’essentiel

- FaustProvider et useQuery simplifient l'intégration WPGraphQL
- La prévisualisation des brouillons est gérée nativement
- Le framework reste très lié à l'écosystème WP Engine

Construire un frontend Next.js pour WordPress headless, à la main, avec WPGraphQL, demande de résoudre soi-même plusieurs problèmes récurrents : authentification, prévisualisation des brouillons, gestion du cache, hooks pour interroger GraphQL proprement depuis les composants React. WP Engine, hébergeur spécialisé WordPress, a lancé Faust.js pour répondre précisément à ces besoins avec un framework prêt à l'emploi, construit au-dessus de Next.js.

Cet article analyse ce que Faust.js apporte concrètement par rapport à une intégration Next.js et WPGraphQL faite manuellement, ses forces, ses limites, et pour quel type de projet il est réellement pertinent.

## Ce que Faust.js installe automatiquement

Faust.js se compose de deux parties : un plugin WordPress (WPGraphQL for WordPress et WPGraphQL Faust, un plugin complémentaire) et un package npm côté Next.js. Une fois les deux connectés, plusieurs mécanismes deviennent disponibles sans configuration manuelle :

- Un `FaustProvider` qui encapsule l'application Next.js et gère la connexion au client GraphQL Apollo sous-jacent
- Un hook `useQuery`, une surcouche autour d'Apollo Client, pour interroger le schéma WPGraphQL directement depuis les composants
- Une gestion native de la prévisualisation des brouillons, avec redirection automatique du bouton « Aperçu » WordPress vers le frontend
- Une authentification préconfigurée basée sur les mots de passe d'application, avec gestion de session côté client

## Un exemple de composant avec useQuery

```
import { gql, useQuery } from '@faustwp/core';

const REQUETE_ARTICLES = gql`
  query DerniersArticles {
    posts(first: 5) {
      nodes {
        title
        slug
        excerpt
      }
    }
  }
`;

export default function ListeArticles() {
  const { data, loading, error } = useQuery( REQUETE_ARTICLES );

  if ( loading ) return <p>Chargement...</p>;
  if ( error ) return <p>Une erreur est survenue.</p>;

  return (
    <ul>
      {data.posts.nodes.map( ( article ) => (
        <li key={article.slug}>{article.title}</li>
      ) )}
    </ul>
  );
}
```

Ce code ressemble fortement à une intégration Apollo Client classique, mais la configuration du client, la gestion des tokens d'authentification et la connexion à l'endpoint GraphQL sont entièrement prises en charge par le `FaustProvider`, sans configuration manuelle supplémentaire.

> L'essentiel à retenir : FaustProvider et useQuery simplifient l'intégration WPGraphQL ; La prévisualisation des brouillons est gérée nativement ; Le framework reste très lié à l'écosystème WP Engine

## La prévisualisation, gérée sans effort

C'est probablement l'argument le plus convaincant de Faust.js. Nous avions détaillé, dans un article précédent, la complexité de la mise en place manuelle d'une prévisualisation des brouillons en headless : filtre `preview_post_link`, route de vérification côté frontend, gestion de token sécurisé. Faust.js fournit cette mécanique préconfigurée dès l'installation du plugin correspondant, ce qui représente un gain de temps de développement notable sur un projet lancé de zéro.

## Les limites à connaître

Faust.js n'est pas neutre dans son positionnement. Le framework est développé et maintenu par WP Engine, un hébergeur commercial spécialisé WordPress, et certaines fonctionnalités avancées (déploiement simplifié, intégration poussée avec l'infrastructure) sont optimisées pour un hébergement sur leur propre plateforme. Rien n'empêche d'utiliser Faust.js avec un hébergement WordPress classique, mais l'expérience la plus fluide reste pensée pour cet écosystème.

Autre point d'attention : Faust.js impose une dépendance forte à WPGraphQL et à Apollo Client. Un projet qui souhaiterait rester sur l'API REST native, ou utiliser un autre client GraphQL, ne tirera pas parti de l'essentiel de ce que propose le framework.

> Faust.js vaut le détour pour un projet lancé de zéro, avec Next.js et WPGraphQL déjà retenus comme socle technique. Pour un projet existant, avec une architecture déjà en place, la migration vers Faust.js représente un investissement qui doit être pesé face au gain réel apporté.

## Pour qui c'est pertinent

- Une nouvelle équipe qui démarre un projet headless et souhaite éviter de reconstruire l'authentification et la prévisualisation à la main
- Un projet déjà hébergé ou envisageant un hébergement chez WP Engine
- Une équipe déjà à l'aise avec GraphQL et Apollo Client, pour qui la surcouche Faust.js ajoute peu de friction supplémentaire

## En résumé

Faust.js répond à des problèmes réels et récurrents des projets headless WordPress avec Next.js : authentification, prévisualisation, intégration GraphQL simplifiée. C'est un choix pertinent pour démarrer rapidement un nouveau projet, à condition d'accepter sa dépendance à WPGraphQL et son positionnement proche de l'écosystème WP Engine. Pour une équipe qui préfère garder un contrôle total sur chaque brique, une intégration manuelle reste une alternative tout à fait légitime, au prix d'un temps de développement initial plus long.