Passer au contenu principal
Une intégration prête pour la production est disponible dans ce dépôt : https://github.com/Kameleoon/setup-engine-nextjs Veillez à remplacer le sitecode par le vôtre dans src/integrations/Kameleoon/sitecode.ts.
Le domaine de votre script Kameleoon peut différer entre les projets. Selon leur date de création, vos projets peuvent être hébergés sous kameleoon.eu ou kameleoon.io. Utilisez toujours le domaine affiché pour votre projet dans l’application Kameleoon.

​
Vue d’ensemble​

  1. Préchargez le moteur Kameleoon afin que le navigateur le télécharge tôt et le mette en cache.
  2. Appliquez un CSS anti-flicker pour masquer le contenu jusqu’à ce que le moteur soit prêt, évitant ainsi les décalages de mise en page.
  3. Exécutez le moteur après l’hydratation pour éviter les avertissements ou désynchronisations d’hydratation React.

​
Composants​

Cette intégration utilise deux composants qui fonctionnent ensemble pour assurer un chargement fluide et empêcher le clignotement pendant l’hydratation.

​
1. Server Component​

Placez ce composant à l’intérieur de la balise <head> de votre layout principal. Ses responsabilités sont :
  • Injecter le CSS anti-flicker pendant le SSR pour prévenir les flashs d’interface
  • Précharger le fichier engine.js afin que le téléchargement commence dès que possible
// ⛔ No "use client" here - must stay server-side
import { SITECODE_SRC } from "./sitecode";

const ANTIFLICKER_CSS = `
html::after {
    content: '';
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 2147483647;
}`;

export function KameleoonHead() {
    return (
        <>
            {/* Preload the engine so browser begins downloading ASAP */}
            <link rel="preload" href={SITECODE_SRC} as="script" fetchPriority="high" />
            {/* Anti-flicker stylesheet injected during SSR */}
            <style
                id="kameleoonLoadingStyleSheet"
                suppressHydrationWarning
                dangerouslySetInnerHTML={{ __html: ANTIFLICKER_CSS }}
            />
        </>
    );
}
Voir KameleoonHead.tsx

​
2. Client Component​

Placez ce composant tout en haut de la balise <body> afin de contrôler précisément le moment d’exécution. Ce composant :
  • Supprime les styles anti-flicker après l’hydratation
  • Charge dynamiquement le engine.js de Kameleoon
  • Garantit que le script se charge sans bloquer le rendu
"use client";

import { useCallback, useEffect } from "react";
import { SITECODE_SRC } from "./sitecode";

export function KameleoonHydrationReady() {
    const removeAntiflickerStyles = useCallback(() => {
        const kameleoonLoadingTimeout = 500;
        window.kameleoonQueue = window.kameleoonQueue || [];
        window.kameleoonStartLoadTime = Date.now();

        window.kameleoonDisplayPage = function (fromEngine) {
            if (!fromEngine) {
                window.kameleoonTimeout = true;
            }
            document.getElementById("kameleoonLoadingStyleSheet")?.remove();
        };

        window.kameleoonDisplayPageTimeOut = setTimeout(
            window.kameleoonDisplayPage,
            kameleoonLoadingTimeout
        );
    }, []);

    const loadEngine = useCallback(() => {
        if (document.getElementById("kameleoon-engine")) return;

        const script = document.createElement("script");
        script.src = SITECODE_SRC;
        script.async = true;
        script.id = "kameleoon-engine";
        document.head.appendChild(script);
    }, []);

    // Execute Kameleoon after hydration
    useEffect(() => {
        removeAntiflickerStyles();
        loadEngine();
    }, [loadEngine, removeAntiflickerStyles]);

    return null;
}
Voir KameleoonHydrationReady.tsx
Note : Le timeout anti-flicker par défaut est de 500 ms. Ajustez kameleoonLoadingTimeout si nécessaire.

​
Utilisation dans RootLayout​

Exemple de combinaison des deux composants : 
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <head>
                <KameleoonHead />
            </head>
            <body className={inter.className}>
                <KameleoonHydrationReady />
                {children}
            </body>
        </html>
    );
}
Voir layout.tsx

​
Points clés​

  • Protection anti-flicker en SSR
  • Exécution du script consciente de l’hydratation
  • Chargement asynchrone du moteur
  • Timeout de secours pour la fiabilité
  • Aucun script bloquant
  • Fonctionne avec les layouts Next.js, le streaming et les React Server Components
Avec cette configuration, votre application Next.js chargera Kameleoon efficacement et évitera les problèmes liés à l’hydratation.