use experimental bootstrap data embedding

Author: dferber90

flags-sdk/experimentation-statsig/app/layout.tsx

@@ -1,6 +1,7 @@
 import { VercelToolbar } from '@vercel/toolbar/next'
 import type { Metadata } from 'next'
 import { Toaster } from 'sonner'
+import { FlagBootstrapData } from 'flags/react'
 
 import './globals.css'
 import { ExamplesBanner } from '@/components/banners/examples-banner'
@@ -22,13 +23,7 @@ export default function RootLayout({
         {children}
         <Toaster />
         <VercelToolbar />
-        <script
-          id="embed"
-          // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
-          dangerouslySetInnerHTML={{ __html: '' }}
-          suppressHydrationWarning
-          type="application/json"
-        />
+        <FlagBootstrapData />
       </body>
     </html>
   )

flags-sdk/experimentation-statsig/middleware.ts

@@ -3,7 +3,6 @@ import { precompute } from 'flags/next'
 import { productFlags } from '@/flags'
 import { getStableId } from './lib/get-stable-id'
 import { getCartId } from './lib/get-cart-id'
-import { HTMLRewriter } from 'htmlrewriter'
 import { statsigAdapter } from '@flags-sdk/statsig'
 import { identify } from './lib/identify'
 import { embedBootstrapData } from 'flags/next'

flags-sdk/experimentation-statsig/package.json

@@ -23,9 +23,8 @@
     "@vercel/toolbar": "0.1.33",
     "motion": "12.17.0",
     "clsx": "2.1.1",
-    "flags": "^4.0.0",
+    "flags": "4.1.0-c84914eb-20250613112941",
     "nanoid": "5.1.2",
-    "htmlrewriter": "^0.0.12",
     "next": "15.4.0-canary.79",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

flags-sdk/experimentation-statsig/pnpm-lock.yaml

@@ -15,6 +15,7 @@ import {
   useClientBootstrapInit,
 } from '@statsig/react-bindings'
 import { StatsigAutoCapturePlugin } from '@statsig/web-analytics'
+import { useBootstrapData } from 'flags/react'
 import { createContext, useMemo, useState, useEffect } from 'react'
 
 export const StatsigAppBootstrapContext = createContext<{
@@ -25,16 +26,6 @@ export const StatsigAppBootstrapContext = createContext<{
   error: null,
 })
 
-export function useEmbed<T>(id: string, initialData?: T) {
-  const [data, setData] = useState<T | undefined>(initialData || undefined)
-  useEffect(() => {
-    // biome-ignore lint/style/noNonNullAssertion: <explanation>
-    const text = document.getElementById(id)!.textContent
-    setData(text ? JSON.parse(text) : undefined)
-  }, [id])
-  return data
-}
-
 function BootstrappedStatsigProvider({
   user,
   values,
@@ -62,13 +53,12 @@ export function StaticStatsigProvider({
   children: React.ReactNode
 }) {
   // wait for the script#embed to appear and read its contents as json
-  // TODO use actual embed library
-  const data = useEmbed<{
+  const data = useBootstrapData<{
     statsigUser: StatsigUser
     clientInitializeResponse: Awaited<
       ReturnType<typeof Statsig.getClientInitializeResponse>
     >
-  }>('embed')
+  }>()
 
   const values = useMemo(
     () => (data ? JSON.stringify(data.clientInitializeResponse) : null),