WordPress propulse encore plus de 40 % du web mondial en 2026, et son API REST intégrée depuis la version 4.7 en fait une plateforme backend idéale pour des applications mobiles. Plutôt que de construire une API from scratch, vous bénéficiez d’un CMS éprouvé pour la gestion du contenu, d’une API REST complète avec authentification JWT, et d’un écosystème de plugins massif. Associé à React Native via Expo, ce couple permet de livrer une app mobile iOS et Android avec un effort de développement considérablement réduit.
Architecture headless WordPress + React Native
L’architecture headless consiste à découpler le backend WordPress — qui gère le contenu et l’API — du frontend qui le présente. Dans cette configuration, WordPress ne s’occupe que de la persistance des données, de l’administration du contenu et de l’exposition des endpoints REST. React Native consomme ces endpoints pour afficher le contenu dans l’application mobile, avec ses propres composants et sa propre logique de navigation.
Les endpoints REST de WordPress couvrent nativement les articles (posts), les pages, les médias, les catégories, les tags, les commentaires et les utilisateurs. Tous ces types de contenu sont accessibles via des URLs standardisées au format /wp-json/wp/v2/resource. Des plugins comme WooCommerce, Advanced Custom Fields ou The Events Calendar exposent leurs propres namespaces d’API, élargissant considérablement le contenu disponible pour votre app mobile.
Par rapport à l’approche native iOS/Android avec Swift et Kotlin, React Native offre un codebase unique pour les deux plateformes. Par rapport au développement d’une Progressive Web App, l’app React Native bénéficie d’un accès aux APIs natives (caméra, notifications push, biométrie, stockage sécurisé) et d’une distribution via les stores officiels. Le compromis performance/productivité penche clairement en faveur de React Native pour la plupart des projets de contenu.
Exploration des endpoints REST WordPress
Avant d’écrire une seule ligne de code React Native, prenez le temps d’explorer les endpoints disponibles sur votre WordPress. L’URL /wp-json/ liste tous les namespaces enregistrés. L’URL /wp-json/wp/v2/ liste les routes disponibles dans le namespace principal. En développement, l’outil Postman ou HTTPie permet d’explorer et de tester rapidement les endpoints avec les différents paramètres de filtrage.
Le paramètre _embed est particulièrement précieux : il permet de récupérer en une seule requête l’article ET ses ressources liées — image à la une, auteur, catégories et tags. Sans _embed, récupérer ces informations nécessiterait quatre requêtes supplémentaires par article. Cette optimisation est critique pour les performances mobiles, où la latence réseau peut être significative et la batterie une ressource à ménager.
Les paramètres de pagination X-WP-Total et X-WP-TotalPages sont retournés dans les headers HTTP plutôt que dans le body JSON. Ce choix de conception permet de paginer efficacement sans alourdir chaque réponse. Votre code React Native doit donc lire ces headers pour implémenter une pagination infinie ou un contrôle de page, comme illustré dans l’exemple de hook ci-dessous.
Configuration du projet Expo et premier hook de données
Expo est le choix recommandé pour démarrer un projet React Native en 2026. Il simplifie considérablement la configuration de l’environnement de développement, le processus de build et la distribution sur les stores. La commande npx create-expo-app mon-blog-wp –template blank-typescript crée un projet TypeScript prêt à l’emploi. Le SDK Expo fournit des modules pour les fonctionnalités natives les plus courantes.
Le hook usePosts ci-dessous illustre le pattern de base pour consommer l’API WordPress en React Native. Il gère le chargement, les erreurs, la pagination et l’annulation des requêtes avec AbortController. Ce hook peut être réutilisé dans tous vos écrans qui affichent des listes d’articles, avec différents paramètres per_page et page selon le contexte.
Pour la gestion d’état globale, React Query (maintenant TanStack Query) est devenu le standard pour les applications React Native qui consomment des API REST. Il apporte la mise en cache automatique, la déduplication des requêtes, le refetch en arrière-plan et la gestion optimiste des mutations. La configuration de base pour WordPress avec React Query ne nécessite que quelques lignes dans le composant racine de l’application.
// hooks/usePosts.js - Fetch articles WordPress
import { useState, useEffect } from "react";
const API_BASE = "https://votre-site.com/wp-json/wp/v2";
export function usePosts(perPage = 10, page = 1) {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [totalPages, setTotalPages] = useState(0);
useEffect(() => {
const controller = new AbortController();
fetch(`${API_BASE}/posts?per_page=${perPage}&page=${page}&_embed=1`, {
signal: controller.signal
})
.then(r => {
setTotalPages(parseInt(r.headers.get("X-WP-TotalPages")));
return r.json();
})
.then(data => { setPosts(data); setLoading(false); })
.catch(e => { if (e.name !== "AbortError") setError(e); });
return () => controller.abort();
}, [perPage, page]);
return { posts, loading, error, totalPages };
}
Authentification JWT pour les utilisateurs connectés
Pour les fonctionnalités qui nécessitent une authentification — commentaires, favoris, profil utilisateur, contenu réservé aux abonnés — WordPress propose plusieurs approches. Le plugin JWT Authentication for WP REST API est le plus populaire : il ajoute un endpoint /wp-json/jwt-auth/v1/token qui retourne un token JWT en échange des identifiants WordPress de l’utilisateur. Ce token est ensuite inclus dans le header Authorization de chaque requête authentifiée.
Côté React Native, le stockage sécurisé du token JWT est critique. N’utilisez jamais AsyncStorage pour des données sensibles comme des tokens d’authentification — il n’est pas chiffré. Le package expo-secure-store utilise le Keychain iOS et les équivalents Android pour un stockage sécurisé chiffré par l’OS. Le token JWT doit y être sauvegardé dès la connexion et effacé lors de la déconnexion.
La gestion de l’expiration du token JWT demande une attention particulière. Les tokens JWT WordPress ont généralement une durée de validité d’une semaine, mais cette valeur est configurable via un filtre WordPress. Implémentez une logique de refresh automatique dans votre client HTTP — si une requête retourne une 401, tentez de renouveler le token avant de forcer la reconnexion de l’utilisateur. Une session expirée en pleine utilisation de l’app est une expérience très frustrante.
Affichage du contenu HTML WordPress dans React Native
Le contenu des articles WordPress est stocké en HTML, et React Native n’a pas de composant natif pour rendre du HTML. La bibliothèque react-native-render-html est la solution de référence : elle parse le HTML et le convertit en composants React Native natifs. Elle supporte les images, les liens, les listes, les tableaux et la personnalisation complète du rendu via les props customHTMLElementModels et renderersProps.
Les images embarquées dans le contenu HTML méritent une attention particulière. react-native-render-html les affiche via le composant Image de React Native, mais sans gestion automatique du ratio d’aspect ou du lazy loading. Le package @native-html/plugins propose des renderers enrichis pour les images, les iframes et les tableaux. Pour un rendu de haute qualité, définissez toujours une largeur maximale pour les images et gérez leur ratio d’aspect de façon dynamique.
Les blocs Gutenberg génèrent du HTML sémantique standard, ce qui est une bonne nouvelle pour react-native-render-html. Cependant, les styles inline générés par Gutenberg peuvent ne pas correspondre visuellement à votre design React Native. La bonne approche est de mapper les classes CSS Gutenberg vers vos propres styles via les props tagsStyles et classesStyles de react-native-render-html plutôt que d’essayer d’appliquer les CSS WordPress dans React Native.
Navigation entre écrans et deep linking
React Navigation est la bibliothèque de navigation standard pour React Native. Pour une application de blog WordPress, l’architecture typique combine un Stack Navigator pour la navigation principale (liste d’articles → détail) avec un Bottom Tab Navigator pour les grandes catégories. Expo Router, basé sur React Navigation, propose une approche file-based routing similaire à Next.js qui simplifie la structuration des écrans.
Le deep linking permet d’ouvrir directement un article spécifique depuis une notification push, un lien partagé ou un email. La configuration dans Expo Router est relativement simple : vous définissez un scheme dans app.json et associez des patterns d’URL aux écrans correspondants. Un lien monblog://article/mon-slug ouvre directement l’écran de détail avec le bon slug WordPress, qui est ensuite utilisé pour fetcher le contenu via l’API.
Les notifications push pour un blog WordPress peuvent être gérées via Firebase Cloud Messaging (FCM) avec expo-notifications côté React Native, et via des plugins WordPress comme Push Notification pour WordPress côté backend. La logique de notification peut déclencher une alerte sur l’app des abonnés à chaque nouvel article publié, en envoyant le slug dans le payload de notification pour un deep linking direct vers le contenu.
Optimisations performances et mode offline
Les performances d’une application React Native de contenu dépendent principalement de la qualité de la mise en cache. React Query met en cache les réponses en mémoire par défaut, mais ce cache disparaît lors de la fermeture de l’app. Pour un mode offline partiel, @tanstack/query-persist-client-core avec expo-secure-store ou AsyncStorage permet de persister le cache sur disque entre les sessions. Les articles récemment consultés restent ainsi disponibles sans connexion.
Les images sont souvent le goulot d’étranglement des performances mobiles. expo-image, la bibliothèque d’images d’Expo, intègre un cache disque persistant, le blurhash pour un placeholder élégant pendant le chargement, et des transitions CSS-like. Configurez des URL d’images redimensionnées côté WordPress en utilisant l’API de paramètres d’image (?w=800&h=400) ou un plugin de CDN comme Cloudinary pour ne jamais charger des images plus grandes que l’écran.
La virtualisation des longues listes est gérée automatiquement par FlatList en React Native, mais sa configuration par défaut n’est pas toujours optimale. Pour une liste d’articles, définissez windowSize={5} pour limiter le rendu aux éléments proches de la position actuelle, initialNumToRender={5} pour un premier rendu rapide, et maxToRenderPerBatch={3} pour éviter les freezes lors du scroll rapide. Ces ajustements peuvent faire passer le scroll de saccadé à parfaitement fluide.
Publication sur les stores et intégration CI/CD avec EAS
Expo Application Services (EAS) est la solution de build et de déploiement cloud d’Expo. EAS Build compile votre application React Native sans avoir besoin d’un Mac pour iOS ou d’un environnement Android Studio configuré localement. La commande eas build –platform all lance un build iOS et Android en parallèle dans le cloud. Pour les projets open source ou les petites équipes, le tier gratuit offre suffisamment de builds mensuels.
La soumission aux stores est automatisable via EAS Submit : eas submit –platform ios et eas submit –platform android uploadent respectivement sur App Store Connect et le Google Play Console. La première soumission nécessite une configuration manuelle des métadonnées dans les consoles stores, mais les soumissions suivantes peuvent être entièrement automatisées. Couplé à un pipeline GitHub Actions, chaque tag Git peut déclencher automatiquement un build et une soumission.
Pour les mises à jour de contenu qui ne modifient pas le code natif — corrections de bugs JavaScript, nouveaux composants, mises à jour de style — EAS Update permet de pousser des mises à jour over-the-air sans repasser par les stores. Les utilisateurs téléchargent la nouvelle version JavaScript en arrière-plan et la voient au prochain lancement de l’app. Cette capacité est particulièrement précieuse pour corriger rapidement un bug critique sans attendre le cycle de validation des stores.
Commentaires (0)
Laisser un commentaire
Les commentaires sont modérés. Questions WordPress, cybersécurité ou dev web bienvenues.