Implementación con Next.js

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

Precargue el motor de Kameleoon para que el navegador lo descargue cuanto antes y lo almacene en caché.
Aplique CSS anti-flicker para ocultar el contenido hasta que el motor esté listo, evitando saltos de diseño.
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.

Inicio

Experimentación web

Experimentación de funcionalidades

Conceptos clave

Privacidad y conformidad

Herramientas para desarrolladores

Visión general

Componentes

1. `Server Component`

2. `Client Component`

Uso en `RootLayout`

Conclusiones clave

​Visión general

​Componentes

​1. Server Component

​2. Client Component

​Uso en RootLayout

​Conclusiones clave

Visión general

Componentes

1. `Server Component`

2. `Client Component`

Uso en `RootLayout`

Conclusiones clave