Configuration
+-
+
- + First, create a free{" "} + + GrowthBook Account + {" "} + and add a new SDK Connection, selecting JavaScript (or React) as the + language. + +
-
+ Next, create a
.env.localfile in the root of this + example with the following contents (fill in values with the ones + shown after creating your SDK Connection): +{`NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY= +NEXT_PUBLIC_GROWTHBOOK_API_HOST= +# Optional (only if you enabled encryption): +NEXT_PUBLIC_GROWTHBOOK_DECRYPTION_KEY= +`}+
+ -
+
+ Finally, create these two feature flags in your GrowthBook + account. These will be referenced in the examples below. +
+-
+
-
+ Key:
feature1, Type:{" "} +Boolean (true/false)+
+ -
+ Key:
feature2, Type:String+
+
+ -
+ Key:
Examples
+-
+
- + Dynamic Server Rendering - Use flags + within Server Components + +
- + Optimized Client Rendering - + Use flicker-free flags within Client Components + +
- + Server/Client Hybrid - Combine the above + two approaches in a single page + +
- + Static Pages - Use feature flags only + during build time + +
- + Streaming Server Components - + Supports experimental Partial Prerendering + +
- + Client Rendering (Unoptimized) - Fetch + and use flags client-side (flicker warning) + +
How it Works
+
+ There is a middleware.ts file that ensures a UUID cookie
+ is available before the first request is processed. This UUID is
+ shared between the client and server and is used to assign consistent
+ feature values to visitors when a percentage rollout or experiment is
+ running.
+
+ Feature and experiment definitions are fetched from the server in all + examples (except in the Unoptimized Client example). This ensures that + the values are known at the initial render time, which lets us avoid + the flicker commonly associated with client-side feature flags and + experiments. +
+
+ Server-fetched feature flags and experiment definitions are persisted
+ in the Next.js data cache for 60 seconds (configurable in{" "}
+ src/lib/growthbookServer.ts). For faster updates, there
+ is a POST /revalidate route handler that can be triggered
+ from an SDK Webhook in GrowthBook.
+
+ If an experiment is run server-side, data about which variation the
+ user saw is sent to the client where an analytics event is triggered
+ (or console.log in these examples). This happens via the{" "}
+ GrowthBookTracking client component defined in{" "}
+ src/lib/growthbookClient.ts.
+