Rendu JavaScript

Pourquoi c'est important pour la visibilité IA

Comment nous le mesurons

Comment s'améliorer

• 1

  Passez au rendu côté serveur pour les pages riches en contenu

  Si vous utilisez React, Vue ou Angular, adoptez le SSR (server-side rendering) ou le SSG (static site génération) pour les pages qui doivent être visibles par l'IA. Next.js, Nuxt et Angular Universal le prennent tous en charge. Le SSR garantit que votre contenu est dans le HTML avant toute exécution JavaScript, ce qui le rend immédiatement visible pour les robots d'IA.

• 2

  Pré-rendez le contenu critique dans la charge HTML initiale

  Même sans SSR complet, assurez-vous que les titres, le texte principal et les données clés sont présents dans le HTML initial. Chargez paresseusement les widgets interactifs et les éléments d'interface non essentiels, mais ne chargez jamais paresseusement le contenu principal. La première réponse HTML doit contenir tout ce qu'un robot d'IA doit comprendre sur la page.

• 3

  Auditez votre dépendance au JS avec un test HTML brut

  Affichez le code source de votre page (pas l'inspecteur, le vrai code source). Si la zone de contenu principale est vide ou ne contient que des références à des bundles JavaScript, les robots d'IA voient la même absence. Comparez la source avec la page rendue et identifiez quels blocs de contenu manquent.

• 4

  Déplacez le contenu récupéré par API vers un chargement côté serveur

  Si votre page récupère du contenu depuis une API côté client (useEffect, fetch au montage), déplacez cette récupération côté serveur. Dans Next.js, utilisez les server components ou getServerSideProps. Les données doivent arriver sous forme HTML, pas comme un appel API côté client que les robots d'IA n'exécuteront jamais.

• 5

  Testez avec JavaScript désactivé dans votre navigateur

  Désactivez JavaScript dans les paramètres de votre navigateur et chargez votre page. Ce que vous voyez est ce que voient les robots d'IA. Si la page est vide ou si le contenu principal manque, vous avez une dépendance au rendu JavaScript à corriger.

Exemples de code

// app/products/[id]/page.tsx -- Server Component (default in Next.js App Router)
export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id); // Fetched on server

  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <ul>
        {product.features.map(f => <li key={f}>{f}</li>)}
      </ul>
    </main>
  );
}

// Avoid this pattern for content pages
'use client';
import { useEffect, useState } from 'react';

export default function ProductPage({ params }) {
  const [product, setProduct] = useState(null);

  useEffect(() => {
    fetch(`/api/products/${params.id}`)
      .then(res => res.json())
      .then(setProduct);
  }, []);

  if (!product) return <div>Loading...</div>;
  return <h1>{product.name}</h1>;
}

Questions fréquentes