> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Implementación con Next.js
> Esta guía explica cómo precargar con , y cómo ejecutar el script para garantizar una experiencia de usuario fluida.
Hay disponible una **integración lista para producción** en este repositorio: [https://github.com/Kameleoon/setup-engine-nextjs](https://github.com/Kameleoon/setup-engine-nextjs)
Asegúrese de **sustituir el sitecode por el suyo** en [`src/integrations/Kameleoon/sitecode.ts`](https://github.com/Kameleoon/setup-engine-nextjs/blob/main/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 `` 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.
```css theme={null}
// ⛔ 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 */}
{/* Anti-flicker stylesheet injected during SSR */}
);
}
```
Consulte [`KameleoonHead.tsx`](https://github.com/Kameleoon/setup-engine-nextjs/blob/main/src/integrations/Kameleoon/KameleoonHead.tsx)
***
### 2. `Client Component`
Coloque este componente **al principio del ``** 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.
```javascript theme={null}
"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`](https://github.com/Kameleoon/setup-engine-nextjs/blob/main/src/integrations/Kameleoon/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:
```js theme={null}
export default function RootLayout({ children }) {
return (
{children}
);
}
```
Consulte [`layout.tsx`](https://github.com/Kameleoon/setup-engine-nextjs/blob/main/src/app/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.