Le problème du SEO avec les SPA

Les Single Page Applications (SPA) comme celles créées avec Create React App posent un défi majeur pour le SEO : le contenu est généré côté client via JavaScript.

Quand un crawler visite votre site, il voit souvent :

<div id="root"></div>

Au lieu du contenu réel de votre page. Même si Googlebot exécute le JavaScript, ce n'est pas garanti pour tous les moteurs de recherche.

Les solutions disponibles

Il existe plusieurs approches pour résoudre ce problème :

1. Server-Side Rendering (SSR) - Next.js, Remix
2. Static Site Generation (SSG) - Gatsby, Astro
3. Pré-rendu statique - react-snap, prerender.io

Le pré-rendu avec react-snap

Le pré-rendu est l'approche la plus simple pour une SPA existante. react-snap utilise Puppeteer pour :

1. Lancer votre application en local
2. Visiter chaque route
3. Capturer le HTML rendu
4. Sauvegarder les fichiers HTML statiques

// Configuration dans package.json
{
  "scripts": {
    "postbuild": "react-snap"
  },
  "reactSnap": {
    "source": "build",
    "inlineCss": true
  }
}

L'hydratation React

Pour que react-snap fonctionne, il faut utiliser hydrateRoot au lieu de createRoot quand le DOM est déjà pré-rendu :

const rootElement = document.getElementById('root');

if (rootElement.hasChildNodes()) {
  ReactDOM.hydrateRoot(rootElement, <App />);
} else {
  ReactDOM.createRoot(rootElement).render(<App />);
}

Les meta tags dynamiques

Chaque page doit avoir ses propres meta tags pour un bon référencement. Avec react-helmet-async, on peut les définir dynamiquement :

import { Helmet } from 'react-helmet-async';

const BlogPost = ({ title, description }) => (
  <>
    <Helmet>
      <title>{title} - Mon Site</title>
      <meta name="description" content={description} />
      <meta property="og:title" content={title} />
    </Helmet>
    {/* contenu */}
  </>
);

Le sitemap

N'oubliez pas de mettre à jour votre sitemap.xml avec toutes les URLs de votre site. Cela aide les moteurs de recherche à découvrir vos pages.

Conclusion

Le pré-rendu statique est une excellente solution pour améliorer le SEO d'une SPA React sans migrer vers un framework SSR. Combiné avec des meta tags dynamiques et un sitemap, votre contenu sera correctement indexé par les moteurs de recherche.