experimental: embed bootstrap data

[dferber90]

Goal

The goal is to make it possible to experiment on marketing pages without causing layout shift, while still being able to serve the different variants from a CDN.

Constraints

We do not want to use client-side experimentation as it leads to layout shift. We can not have any information about the user on the cached page itself as it would lead to cache poisoning or very bad cache hit rates.

However, the flags client (eg Statsig) must still be aware of the experiment running on the server and must be able to bootstrap itself so it can track events.

Approach

1. Browser requests page
2. Edge Middleware bootstraps Statsig from Edge Config and determines the Evaluation Context (eg user)
3. Using the precompute pattern, Edge Middleware rewrites the request to serve the correct variant
4. Edge Middleware embeds the Statsig bootstrap file and the Evaluation Context in the response by rewriting the HTML
5. Browser sees the correct variant of the page immediately, and can bootstrap itself without any further network requests through the data embedded in the HTML

This solves multiple problems

• the exact evaluation context used by Edge Middleware when determining the state of feature flags is available to the client
• high cache hit ratios as the variants of the page are now cache-able and can be served from the CDN, as they do not contain any user-specific information
• browser can bootstrap the Statsig SDK without a network request from the embedded datafile and evaluation context

Added methods

We're adding several methods to the Flags SDK to make this nicer to work with.

• embedBootstrapData(response, data): Response call this from Edge Middleware to embed data into the response
• <FlagBootstrapData /> render this in a top-level layout, its contents will be replaced by embedBootstrapData
• useBootstrapData() a hook which returns the data embedded by embedBootstrapData

Snapshot release

You can try out this logic in the flags@4.1.0-4ebe698e-20250613112000 snapshot release.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flags-sdk-snippets	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 22, 2025 0:56am
flags-sdk-sveltekit-snippets	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 22, 2025 0:56am
shirt-shop	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 22, 2025 0:56am

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​sveltejs/​adapter-vercel@​5.6.3 ⏵ 5.7.2	+1		+1	-1
	@​types/​react-dom@​19.0.4 ⏵ 19.1.6	+1		+1
	@​types/​react-dom@​19.0.4 ⏵ 18.3.7	+1		+2
	statsig-node-lite@​0.4.2 ⏵ 0.4.4			+1	+3
	@​types/​react@​19.0.10 ⏵ 19.1.8	+1		+1
	@​sveltejs/​kit@​2.20.2 ⏵ 2.21.5		+5	+1
	@​types/​node@​22.13.10 ⏵ 22.15.31			+1
	@​tailwindcss/​postcss@​4.0.13 ⏵ 4.1.10	+1		+3
	postcss@​8.5.3 ⏵ 8.5.5	+1		+1	+1
	@​eslint/​eslintrc@​3.3.0 ⏵ 3.3.1
	next@​15.4.0-canary.77
	react@​19.2.0-canary-526dd340-20250602 ⏵ 19.2.0-canary-a00ca6f6-20250611
	@​headlessui/​react@​2.2.0 ⏵ 2.2.4			+1
	react@​19.2.0-canary-526dd340-20250602 ⏵ 19.1.0			+1
	@​launchdarkly/​vercel-server-sdk@​1.3.23 ⏵ 1.3.30	-3
	tailwindcss@​4.0.13 ⏵ 4.1.10			+1
	@​openfeature/​server-sdk@​1.17.1 ⏵ 1.18.0	+1			-2
	svelte@​5.23.0 ⏵ 5.34.1
	prettier-plugin-svelte@​3.3.3 ⏵ 3.4.0	+1
	typescript@​5.8.3
	react-dom@​19.0.0 ⏵ 19.1.0	+1		+1
	eslint@​9.22.0 ⏵ 9.28.0
	svelte-check@​4.1.5 ⏵ 4.2.1

View full report

[socket-security]

All alerts resolved. Learn more about Socket for GitHub.

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report