Bootstrapped flags

We’ve added support for server-side rendering with bootstrapped flags for faster initial page load times.

With getFlagsForBootstrap() in the Node SDK and ReflagBootstrappedProvider in the React SDK, you can evaluate flags on the server and pass them to your client-side applications.

This eliminates the loading delay that users experience when flags are fetched on the client. With bootstrapped flags, they’re evaluated server-side and immediately available when your app loads.

How it works

On your server, use getFlagsForBootstrap() to get serializable flag data:

const client = new ReflagClient();
await client.initialize();

const { context, flags } = client.getFlagsForBootstrap({
  user: { id: "john_doe", name: "John Doe" },
  company: { id: "acme_inc", name: "Acme, Inc." },
  other: { location: "US", platform: "web" },
});

Then on the client, use ReflagBootstrappedProvider instead of the regular ReflagProvider:

function App({ bootstrappedFlags }) {
  return (
    <ReflagBootstrappedProvider
      publishableKey="your-key"
      flags={bootstrappedFlags}
    >
      <YourApp />
    </ReflagBootstrappedProvider>
  );
}

Your flags are now immediately available without any loading state:

function FeatureComponent() {
  const { isEnabled } = useFlag("new-feature");
  return isEnabled ? <NewFeature /> : <OldFeature />;
}

Beyond faster initial page loads, bootstrapped flags can help with SEO as search engines see the correct content immediately as well as improved UX with no loading flicker when features conditionally render. It also works with static generation to evaluate flags at build time for static sites.

The method returns raw flag data without wrapper functions, making it JSON serializable for easy server-to-client transfer. You can also use it with a bound client for simpler APIs:

const boundClient = client.bindClient({
  user: { id: "john_doe" },
  company: { id: "acme_inc" },
});

const bootstrappedFlags = boundClient.getFlagsForBootstrap();

For more details, check out the updated Node SDK docs and React SDK docs.