Bootstrap the Statsig client SDK server-side with getClientInitializeResponse in Next.js to avoid a network round trip and flicker

Documented steps

1. Install the Node server SDK used for bootstrap generation: npm i statsig-node, plus the client bindings: npm i @statsig/react-bindings.
2. Server-side (e.g. app/statsig-backend.ts): import Statsig, { StatsigUser } from "statsig-node"; then start init once at module load: const isStatsigReady = Statsig.initialize(process.env.STATSIG_SERVER_KEY!, { environment: { tier: "development" } });
3. Write a helper that awaits readiness and builds the bootstrap payload: await isStatsigReady; const user = { userID: "a-user" }; const key = process.env.NEXT_PUBLIC_STATSIG_CLIENT_KEY!;
4. Generate the payload with the required hash option: const values = Statsig.getClientInitializeResponse(user, key, { hash: "djb2" });
5. Return it as JSON plus the user/key used: return { data: JSON.stringify(values), user, key };
6. Call this helper in a Server Component (e.g. the root layout) and pass the result as a bootstrapValues prop into a client component.
7. In the client component, add "use client" and import { useClientBootstrapInit, StatsigProvider, LogLevel } from "@statsig/react-bindings";
8. Hydrate the client synchronously from the server payload: const client = useClientBootstrapInit(bootstrapValues, { logLevel: LogLevel.Debug });
9. Render children inside the hydrated client, with no extra network fetch on mount: <StatsigProvider client={client}>{children}</StatsigProvider>
10. Use normal hooks (useGateValue, etc.) inside children exactly as with the async-init flow - values are already available, avoiding first-paint flicker.
11. Reference: https://docs.statsig.com/client/javascript-sdk/next-js/