Skip to main content

FAQ

Which component should I use — MVTScripts or MVTOrchestrator?​

Use MVTScripts in the App Router (app/layout.tsx). It is a Server Component, needs no 'use client', and runs before hydration so there is no content flash. Use MVTOrchestrator for the Pages Router (pages/_app.tsx) or when you can't edit layout.tsx.

Do I need 'use client' with MVTScripts?​

No. MVTScripts is a Server Component — add it directly to layout.tsx with no directive. MVTOrchestrator, on the other hand, must live in a client component.

Is this safe with SSR?​

Yes. MVTScripts renders <script> tags into the server HTML directly. MVTOrchestrator runs all DOM access inside useEffect, which only executes in the browser, and renders {children} on the server.

Can I use multiple project keys on the same page or site?​

No. Use a single orchestratorKey for the whole website, mounted once at the root. Rendering different keys on the same page is not supported and logs an error as a safety check.

Can I change the engine URL (e.g. for staging)?​

Yes. Pass the engineUrl prop. It defaults to the production CDN (https://cdn.splitlab.io/cdn/engine.js); point it at https://staging-svc.splitlab.io/scripts/engine.js for staging.

Can I disable anti-flicker in development?​

Yes. Pass antiFlickerEnabled={false}:

<MVTScripts
  orchestratorKey="abc123xyz"
  antiFlickerEnabled={process.env.NODE_ENV === 'production'}
/>

What happens if the engine script fails to load?​

The anti-flicker timeout (default 3000ms) removes the hidden style so the page becomes visible even if the engine never loads. Experiment variants simply won't be applied.

Can I use this with other React frameworks?​

MVTOrchestrator works with any React app (Vite, CRA, etc.) as long as it runs in a client component context. MVTScripts relies on React Server Components, which are a Next.js feature.

Does this work with TypeScript?​

Yes. Full type support is included, with MVTScriptsProps and MVTOrchestratorProps exported:

import type { MVTScriptsProps, MVTOrchestratorProps } from '@splitlabio/nextjs-orchestrator';

How do I get my project key?​

Check your Splitlab dashboard on the website's install / SmartCode screen, or contact Splitlab support.

What browsers are supported?​

All modern browsers with ES2019+ JavaScript, React 18+, and standard DOM APIs (document.createElement, document.head.appendChild).