> ## Documentation Index
> Fetch the complete documentation index at: https://launchdarkly.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Bootstrapping

<View title="Developer" />

<View title="Federal docs" />

<View title="EU docs" />

This topic explains how the bootstrapping feature works in the LaunchDarkly SDKs that support it.

## About the bootstrapping feature

The bootstrapping feature lets you decrease startup times for client-side SDKs by providing them with an initial set of flag values that are immediately available during client initialization. The SDK serves these values to the end user before it has established a connection to LaunchDarkly so there is no inconsistency in the flag variations they receive.

You typically obtain the bootstrap flag values from a server SDK. The server sends to the browser an HTML page containing the JavaScript and the feature flags your site needs during the initial page render. Your site then bootstraps the LaunchDarkly client using the provided flags during client initialization in the `start()` function. Feature flags are ready immediately, and clients always receive the latest feature flag values.

Bootstrapping using server-rendered content requires additional setup, but it provides several benefits over using only cached flag values in local storage:

* It provides flag values the very first time a customer visits a page.
* The values are up-to-date even if there is a lag between page visits.
* Bootstrapping from a server does not rely on a customer's privacy settings to function.

Some SDKs support providing bootstrap values in the `identify()` function in addition to `start()`. Providing values in `identify()` lets you use bootstrap values after an anonymous context logs in as an identified user.

## Bootstrapping using server-rendered content

All of the server-side SDKs have a function, named some variation of `allFlagsState`, to evaluate flags on behalf of a specified user or context. We recommend populating the initial set of bootstrap values with a JSON object containing flag metadata derived from calling the server-side SDK's all flags method.

If your back end passes values to your front end on page load, you can call your server-side SDK's all flags function on page load and pass the results as a parameter to your front-end initialization code, usually via the `start()` function. To learn more, read [Getting all flags](/docs/sdk/features/all-flags).

For a demonstration of bootstrapping from the server, visit our [hello-bootstrap GitHub repository](https://github.com/launchdarkly/hello-bootstrap).

You can also use LaunchDarkly's edge SDKs to access flag values without processing delays. To learn more, read [Edge SDKs](/docs/sdk/edge). For an example, read [Using LaunchDarkly with Cloudflare Workers](/docs/guides/infrastructure/cloudflare-workers).

## Compatibility with local storage caching

Some newer client SDKs support bootstrapping flag values in addition to caching flag evaluations for unique contexts. When flag evaluations are cached to local storage, on subsequent launches the SDK reads the cached values before any network connection is established. The client still initializes and connects to LaunchDarkly's service to fetch the most recent flag values, but it is not dependent on those values to reach its `ready` state.

The following SDKs enable local storage caching by default, and you can configure both bootstrapping and local caching independently:

* JavaScript SDK v4.x
* React Web SDK

Other SDKs use the same implementation for both bootstrapping and local storage caching. For these SDKs you cannot configure both bootstrapped flag values and local storage caching. The following SDKs use a single `bootstrap` configuration parameter to either provide bootstrap flag values or enable local storage caching, but not both:

* JavaScript SDK v3.x
* Electron
* Node.js (client-side)

Using local storage caching instead of bootstrap server values can be useful if you can't dynamically add bootstrapping data to your page. However, using only local storage caching has these downsides:

* The first time the customer visits your site, local storage is empty. This means the customer receives the site's default behavior, as specified in the [fallback values](/docs/home/getting-started/vocabulary#fallback-value) you provide, before the values from feature flags load. Only after the customer's second visit does the page use the values in local storage. It's important to choose effective fallback values to limit rendering delays.
* If there is a long time between page visits, the values stored in local storage may be out of date.
* Some customers have privacy settings that block sites from using their browser's local storage.
* Flag changes that happen while the customer is on the page automatically update the local storage cache, keeping it in sync with the server. However, if the customer is not on the page when the flag change happens, the flag value in local storage may go out of sync with the server. The next time this customer visits that page, they could experience a flicker because of the client using the previous flag value from local storage.

For an example of using local storage without bootstrapping on a static site, read [Configure local storage for cached contexts](/docs/guides/flags/static-sites#configure-local-storage-for-cached-contexts).

To learn more, read [Caching contexts to local storage](/docs/sdk/features/local-storage).

## Client-side SDKs

The bootstrapping feature is available in the following client-side SDKs:

* [Electron](#electron)
* [JavaScript](#javascript)
* [Node.js (client-side)](#nodejs-client-side)
* [React Server Wrapper](#react-server-wrapper)
* [React Web](#react-web)
* [Vue](#vue)

### Electron

<Accordion title="Expand Electron code sample">
  You can use bootstrapping on the Electron SDK with values provided by LaunchDarkly-enabled code on the backend.

  You can use it to set the feature flags to any values you want:

  <CodeGroup>
    ```js title="JavaScript" lines wrap theme={null}
    const client = LaunchDarkly.initializeInMain(
      'example-client-side-id',
      user,
      {
        bootstrap: {
          flagKey1: flagValue1,
          flagKey2: flagValue2
        }
      }
    );
    ```

    ```ts title="TypeScript" lines wrap theme={null}
    import * as LaunchDarkly from 'launchdarkly-electron-client-sdk';

    const options: LaunchDarkly.LDOptions = {
      bootstrap: {
        flagKey1: flagValue1,
        flagKey2: flagValue2,
      },
    };

    const client = LaunchDarkly.initializeInMain('example-client-side-id', user, options);
    ```
  </CodeGroup>

  If you provide bootstrap flag values you cannot enable caching to local storage. To learn more, read [Caching contexts to local storage](/docs/sdk/features/local-storage).
</Accordion>

### JavaScript

<Accordion title="Expand JavaScript code sample">
  To bootstrap flags from server-rendered content using the JavaScript SDK, populate the initial set of bootstrap values with a JSON object containing flag metadata derived from calling the [server-side SDK's all flags method](/docs/sdk/features/all-flags#server-side-sdks).

  In JavaScript SDK v4.x you can provide server flag values in the `bootstrap` option to `start()` or `identify()`. This lets you use server-provided values immediately without waiting for client-side initialization. It also lets you use bootstrap values after an anonymous context logs in as an identified user.

  In JavaScript SDK v3.x you can provide the `bootstrap` option only once, during initialization. This lets you bootstrap initial flag values for an anonymous context, but does not allow for bootstrapping after the context logs in as an identified user. Using `bootstrap` with server-rendered content also disables caching context to local storage with SDK v3.x. To learn more, read [Caching contexts to local storage](/docs/sdk/features/local-storage).

  Here is an example, which assumes you pass the flags on page load:

  <CodeGroup>
    ```js title="JavaScript SDK, v4.x+" lines wrap theme={null}
    import { createClient } from '@launchdarkly/js-client-sdk';

    const context = { kind: 'user', key: 'example-user-key'};

    const client = createClient(
      'example-client-side-id', 
      context
    );

    // bootstrapData is the result of your server-side SDK call to get all flags
    const flags = JSON.parse(bootstrapData)
    const options = { bootstrap: flags }

    client.start(options);
    ```

    ```js title="JavaScript SDK, v3.x" lines wrap theme={null}
    // bootstrapData is the result of your server-side SDK call to get all flags
    const flags = JSON.parse(bootstrapData)

    function onPageLoad(flags) {
      // ...
      const options = { bootstrap: flags };
      const client = LDClient.initialize(
        'example-client-side-id',
        context,
        options
      );

      // ...
    }
    ```

    ```ts title="JavaScript SDK, v3.x (TypeScript)" lines wrap theme={null}
    import * as LDClient from 'launchdarkly-js-client-sdk';
    import { LDContext, LDFlagSet, LDOptions } from 'launchdarkly-js-client-sdk';

    // bootstrapData is the result of your server-side SDK call to get all flags
    const flags: LDFlagSet = JSON.parse(bootstrapData)

    function onPageLoad(flags: LDFlagSet) {
      // ...
      const context: LDContext = { kind: 'user', key: 'example-user-key'}
      const options: LDOptions = { bootstrap: flags };
      const client = LDClient.initialize('example-client-side-id', context, options);
      // ...
    }
    ```
  </CodeGroup>

  If you can invoke your backend dynamically, such as in Ruby with a template directory, you can inline the function invocation and request that the SDK return only the client-side flags.

  Here is an example of how to bootstrap flags into the JavaScript client, if you acquire the flags from a Ruby template directive:

  <CodeGroup>
    ```js title="JavaScript SDK, v4.x+" lines wrap theme={null}
    import { createClient } from '@launchdarkly/js-client-sdk';

    const context = { kind: 'user', key: 'example-user-key'};

    const client = createClient(
      'example-client-side-id', 
      context
    );

    client.start({
      // Load values from a Ruby template directive
      bootstrap: <%= client.all_flags_state(user, {client_side_only: true}).to_json %>
    });
    ```

    ```js title="JavaScript SDK, v3.x" expandable lines wrap theme={null}
    const client = LDClient.initialize(
      'example-client-side-id',
      context,
      options = {
        // Load values from a Ruby template directive
        bootstrap: <%= client.all_flags_state(user, {client_side_only: true}).to_json %>
      }
    );

    try {
      await client.waitForInitialization(5);
      proceedWithSuccessfullyInitializedClient();
    } catch(err) {
      // Client failed to initialized or timed out
      // variation() calls return fallback values until initialization completes
    }
    ```
  </CodeGroup>

  You can also read about [How to bootstrap when serving from a CDN, not a backend](https://support.launchdarkly.com/hc/en-us/articles/13689250919195-How-to-bootstrap-when-serving-from-a-CDN-not-a-backend).
</Accordion>

### Node.js (client-side)

<Accordion title="Expand Node.js (client-side) code sample">
  You can use bootstrapping on the Node.js (client-side) SDK with values provided by LaunchDarkly-enabled code on the backend. You can populate the initial set of bootstrap values with a JSON object containing flag metadata derived from calling the [server-side SDK's all flags method](/docs/sdk/features/all-flags#server-side-sdks).

  You can use it to set the feature flags to any values you want:

  <CodeGroup>
    ```js title="Node.js (client-side) SDK, v3 (JavaScript)" lines wrap theme={null}
    // bootstrapData is the result of your server-side SDK call to get all flags
    const flags = JSON.parse(bootstrapData)

    function onPageLoad(flags) {
      // ...
      const options = { bootstrap: flags };
      const client = LDClient.initialize(
        'example-client-side-id',
        context,
        options
      );

      // ...
    }
    ```

    ```ts title="Node.js (client-side) SDK, v3 (TypeScript)" lines wrap theme={null}
    import * as LDClient from 'launchdarkly-node-client-sdk';
    import { LDContext, LDFlagSet, LDOptions } from 'launchdarkly-node-client-sdk';

    // bootstrapData is the result of your server-side SDK call to get all flags
    const flags: LDFlagSet = JSON.parse(bootstrapData)

    function onPageLoad(flags: LDFlagSet) {
      // ...
      const context: LDContext = { kind: 'user', key: 'example-user-key'}
      const options: LDOptions = { bootstrap: flags };
      const client = LDClient.initialize('example-client-side-id', context, options);
      // ...
    }
    ```
  </CodeGroup>

  If you provide bootstrap flag values you cannot enable caching to local storage. To learn more, read [Caching contexts to local storage](/docs/sdk/features/local-storage).
</Accordion>

### React Server Wrapper

<Accordion title="Expand React Server Component support sample">
  Starting from version 4.x of the React Web SDK, you can use our [React Server Component support](/docs/sdk/client-side/react/react-web#react-server-component-support)
  to facilitate a special kind of bootstrapping through our
  `LDIsomorphicProvider`.

  If you want to take full advantage of React Server Components for faster load time
  and continue getting live updates in the client, here's how:

  <CodeGroup>
    ```js title="JavaScript" expandable lines wrap theme={null}
    // app/page.tsx (Server Component)
    import { init } from '@launchdarkly/node-server-sdk';
    import { createLDServerSession, LDIsomorphicProvider } from '@launchdarkly/react-sdk/server';

    const ldBaseClient = init(process.env.LAUNCHDARKLY_SDK_KEY!);

    export default async function Page() {
      await ldBaseClient.waitForInitialization({ timeout: 10 });

      const session = createLDServerSession(ldBaseClient, {
        kind: 'user',
        key: 'user-key',
        name: 'Sandy',
      });

      return (
        <LDIsomorphicProvider
          session={session}
          clientSideId={process.env.LAUNCHDARKLY_CLIENT_SIDE_ID!}
        >
          <App />
        </LDIsomorphicProvider>
      );
    }
    ```
  </CodeGroup>

  `LDIsomorphicProvider` is an async React Server Component that evaluates all flags on the server and bootstraps the client-side SDK with those values. This allows the client-side SDK to start immediately with real values instead of defaults.

  After hydration, the client SDK opens a streaming connection and live flag updates propagate normally to all hooks.

  Server Components inside the provider tree can call `session.boolVariation(...)` directly. Client Components use the standard hooks, such as `useBoolVariation`. They read from the bootstrapped data on first render and receive live updates afterwards.

  Here is a list of available properties for `LDIsomorphicProvider`:

  <table>
    <thead>
      <tr>
        <th>Property</th>
        <th>Type</th>
        <th>Required</th>
        <th>Description</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><code>session</code></td>
        <td><code>LDServerSession</code></td>
        <td>Yes</td>
        <td>A session created by <code>createLDServerSession</code>. Provides the evaluation context and all-flags state.</td>
      </tr>

      <tr>
        <td><code>clientSideId</code></td>
        <td><code>string</code></td>
        <td>Yes</td>
        <td>Your LaunchDarkly client-side ID.</td>
      </tr>

      <tr>
        <td><code>options</code></td>
        <td><code>LDReactProviderOptions</code></td>
        <td>No</td>
        <td>Additional options forwarded to the underlying client provider, such as <code>ldOptions</code>, <code>startOptions</code>, <code>deferInitialization</code>, and <code>reactContext</code>. The bootstrap field is overridden automatically.</td>
      </tr>
    </tbody>
  </table>
</Accordion>

For a complete working application, read the [isomorphic provider example](https://github.com/launchdarkly/js-core/tree/main/packages/sdk/react/examples/react-server-example).

### React Web

<Accordion title="Expand React Web code sample">
  In the React Web SDK v4.0 and later, `bootstrap` is a top-level option on `createLDReactProvider`. It accepts a plain key-value object, such as `{ 'example-flag-key': true }`, or the output of the server-side SDK's `allFlagsState().toJSON()`, which includes `$flagsState` and `$valid` metadata.

  To bootstrap flags in the React Web SDK, we recommend populating the initial set of bootstrap values with a JSON object containing flag metadata derived from calling the [server-side SDK's all flags method](/docs/sdk/features/all-flags#server-side-sdks).

  Here is an example that assumes you pass the flags on page load:

  <CodeGroup>
    ```js title="React Web SDK v4.0" lines wrap theme={null}
    import { createLDReactProvider } from '@launchdarkly/react-sdk';

    // bootstrapData is the result of your server-side SDK call to get all flags
    const flags = JSON.parse(bootstrapData);

    const LDProvider = createLDReactProvider(
      'example-client-side-id',
      { kind: 'user', key: 'example-user-key' },
      {
        bootstrap: flags,
      },
    );
    ```
  </CodeGroup>

  You can also pass bootstrap data through [`startOptions.bootstrap`](https://launchdarkly.github.io/js-core/packages/sdk/react/docs/interfaces/client.LDStartOptions.html). The top-level `bootstrap` option is merged into `startOptions.bootstrap` when the client starts. If you provide both, the top-level value takes precedence.

  <CodeGroup>
    ```js title="React Web SDK v4.0" lines wrap theme={null}
    import { createLDReactProvider } from '@launchdarkly/react-sdk';

    const LDProvider = createLDReactProvider(
      'example-client-side-id',
      { kind: 'user', key: 'example-user-key' },
      {
        startOptions: {
          bootstrap: flags,
        },
      },
    );
    ```
  </CodeGroup>

  If you are migrating from the React Web SDK v3.x, the `bootstrap` option used to be nested inside `options`. To learn more, read the [React Web SDK 3.x to 4.0 migration guide](/docs/sdk/client-side/react/web-migration-3-to-4#bootstrap-is-now-a-top-level-option).
</Accordion>

### Vue

<Accordion title="Expand Vue code sample">
  The Vue SDK accepts bootstrap data in the `bootstrap` option when you install the `LDVuePlugin` plugin or create a provider with `createLDProvider`. You can also set `bootstrap` inside `startOptions`. If you set both, the top-level `bootstrap` value takes precedence.

  Here is an example that assumes you pass the flags on page load:

  <CodeGroup>
    ```ts title="Vue SDK v3.0" lines wrap theme={null}
    import { createLDProvider } from '@launchdarkly/vue-client-sdk'

    // bootstrapData is the result of your server-side SDK call to get all flags
    const flags = JSON.parse(bootstrapData)

    export const LDProvider = createLDProvider(
      'example-client-side-id',
      { kind: 'user', key: 'example-user-key' },
      {
        bootstrap: flags
      }
    )
    ```
  </CodeGroup>

  Here is the same data passed through `startOptions` instead:

  <CodeGroup>
    ```ts title="Vue SDK v3.0" lines wrap theme={null}
    import { createLDProvider } from '@launchdarkly/vue-client-sdk'

    // bootstrapData is the result of your server-side SDK call to get all flags
    const flags = JSON.parse(bootstrapData)

    export const LDProvider = createLDProvider(
      'example-client-side-id',
      { kind: 'user', key: 'example-user-key' },
      {
        startOptions: {
          bootstrap: flags
        }
      }
    )
    ```
  </CodeGroup>
</Accordion>