Saltar al contenido principal
Hay disponible una integración lista para producción en este repositorio: https://github.com/Kameleoon/setup-engine-nextjs Asegúrese de sustituir el sitecode por el suyo en src/integrations/Kameleoon/sitecode.ts.
El dominio de su script de Kameleoon puede diferir entre proyectos. En función de su fecha de creación, sus proyectos pueden estar alojados en kameleoon.eu o en kameleoon.io. Utilice siempre el dominio mostrado para su proyecto dentro de la aplicación Kameleoon.

​
Visión general​

  1. Precargue el motor de Kameleoon para que el navegador lo descargue cuanto antes y lo almacene en caché.
  2. Aplique CSS anti-flicker para ocultar el contenido hasta que el motor esté listo, evitando saltos de diseño.
  3. Ejecute el motor después de la hidratación para evitar advertencias o discrepancias en la hidratación de React.

​
Componentes​

Esta integración utiliza dos componentes que trabajan conjuntamente para garantizar una carga fluida y evitar el flickering durante la hidratación.

​
1. Server Component​

Coloque este componente dentro del <head> de su layout principal. Sus responsabilidades son:
  • Inyectar CSS anti-flicker durante el SSR para evitar parpadeos de la UI.
  • Precargar el archivo engine.js para que la descarga comience lo antes posible.
// ⛔ 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 }}
            />
        </>
    );
}
Consulte KameleoonHead.tsx

​
2. Client Component​

Coloque este componente al principio del <body> para controlar con precisión los tiempos de ejecución. Este componente:
  • Elimina los estilos anti-flicker después de la hidratación.
  • Carga dinámicamente el engine.js de Kameleoon.
  • Garantiza que el script se cargue sin bloquear el renderizado.
"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;
}
Consulte KameleoonHydrationReady.tsx
Nota: El timeout anti-flicker predeterminado es de 500 ms. Ajuste kameleoonLoadingTimeout si es necesario.

​
Uso en RootLayout​

Ejemplo de cómo combinar ambos componentes: 
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <head>
                <KameleoonHead />
            </head>
            <body className={inter.className}>
                <KameleoonHydrationReady />
                {children}
            </body>
        </html>
    );
}
Consulte layout.tsx

​
Conclusiones clave​

  • Protección anti-flicker en SSR
  • Ejecución del script consciente de la hidratación
  • Carga asíncrona del motor
  • Timeout de respaldo para mayor fiabilidad
  • Sin scripts bloqueantes
  • Funciona con layouts de Next.js, streaming y React Server Components
Con esta configuración, su aplicación Next.js cargará Kameleoon de manera eficiente y evitará problemas relacionados con la hidratación.