Next.js et React pour l'IA : rendre les frameworks JavaScript visibles aux robots d'IA
React, Next.js et les frameworks similaires sont excellents — mais ils peuvent produire une page qui paraît parfaite à un humain et complètement vide pour un robot d’IA. La différence tient à l’endroit où votre contenu est rendu. Ce guide explique la seule question qui tranche, et comment tomber du bon côté.
La seule question qui décide de tout
Quand un robot d’IA (GPTBot, ClaudeBot, PerplexityBot, Google-Extended) récupère votre page, il lit le HTML que renvoie votre serveur. Il n’exécute généralement pas le JavaScript comme le fait un navigateur. La seule question qui compte est donc :
Votre texte est-il déjà dans le HTML que le serveur envoie — ou n’apparaît-il qu’après l’exécution du JavaScript dans le navigateur ?
Si votre contenu principal est construit dans le navigateur, le robot voit une coquille presque vide. → JavaScript et les robots d’IA
Next.js : généralement correct, si vous le laissez rendre côté serveur
Next.js peut être très adapté à l’IA, car il est conçu pour rendre côté serveur :
- App Router (Server Components) rend vos composants en HTML sur le serveur par défaut. Votre texte se retrouve dans le HTML initial — bien.
- Pages Router convient quand vous chargez votre contenu principal avec
getServerSideProps(SSR) ougetStaticProps(génération statique). Ces données sont intégrées au HTML.
Le piège, ce sont les données que vous récupérez uniquement dans le navigateur — par exemple dans un useEffect, ou avec une bibliothèque de données côté client, où la page arrive vide et se remplit après le chargement. Un composant "use client" convient pour l’interactivité, mais si les mots qui comptent n’arrivent qu’après une requête du navigateur, ils ne sont pas dans le HTML que lit le robot. Mettez votre contenu principal sur le chemin serveur.
SPA React pur : le cas difficile
Une app React uniquement côté client (Create React App, ou Vite sans rendu serveur) envoie généralement un <div id="root"></div> vide et dessine tout dans le navigateur. Pour un humain, c’est une page complète ; pour un robot d’IA, c’est blanc. Vos options :
- Passez à un framework qui rend côté serveur — Next.js, Remix ou Astro.
- Ajoutez un prérendu statique pour vos routes de contenu, afin que les robots reçoivent du vrai HTML.
N’oubliez pas les métadonnées et les données structurées
Rendre le texte côté serveur, c’est l’essentiel de la bataille, mais finissez le travail :
- Titre, description, canonical, Open Graph — utilisez l’API Metadata de Next.js (App Router) ou
next/head(Pages Router) pour qu’ils soient dans le HTML du serveur et non posés plus tard par le JavaScript. - Données structurées — produisez un
<script type="application/ld+json">rendu côté serveur pour que l’IA reçoive des faits explicites. → données structurées · sitemaps et canonical
La partie honnête
Vous n’avez pas à abandonner React. L’hydratation et l’interactivité riche sont tout à fait acceptables — l’IA lit le HTML initial, et votre app peut rester aussi dynamique que vous le souhaitez par-dessus. La solution n’est pas « utiliser moins de JavaScript », mais « s’assurer que la première réponse HTML contient déjà vos mots ». Le rendu serveur, la génération statique et les React Server Components y parviennent tous.
Comment vérifier
Ouvrez « Afficher le code source » (pas l’inspecteur — il montre le DOM en direct après le JS) ou exécutez curl https://votresite.fr et cherchez le texte réel de vos paragraphes. Si vous voyez votre titre et votre corps de texte, les robots aussi. Si vous voyez un <div id="root"> vide et un tas de balises de script, votre contenu est uniquement navigateur. Ou passez votre URL dans une vérification gratuite de visibilité pour l’IA et confirmez d’un coup d’œil.
En résumé
React et Next.js ne sont pas l’ennemi — le rendu uniquement dans le navigateur l’est. Gardez votre contenu principal sur le serveur (SSR, SSG ou Server Components), mettez les métadonnées et les données structurées dans le HTML du serveur, et vérifiez avec « Afficher le code source ». Commencez par l’introduction au GEO et JavaScript et les robots d’IA, et si l’IA ne vous cite toujours pas, voyez pourquoi mon site n’apparaît pas dans l’IA.