Server-side rendering

Use the JavaScript Server SDK and JavaScript Client SDK together to create a server-side rendered experience.

For a complete example, go to the experiment-node-server demo app on GitHub.

Installation

Install both the JavaScript Server SDK and JavaScript Client SDK.

bash

npm install --save @amplitude/experiment-js-client @amplitude/experiment-node-server

Initialize the Server SDK

On server startup, initialize the Server SDK. To distinguish it from the Client SDK Experiment object, this example aliases the Server SDK Experiment object as ExperimentServer.

let ExperimentServer;
if (typeof window === 'undefined') {
  console.debug('Initializing Server Experiment');
  ExperimentServer = require('@amplitude/experiment-node-server').Experiment.initialize(
    'server-IAxMYws9vVQESrrK88aTcToyqMxiiJoR',
    { debug: true },
  );
}

export { ExperimentServer };

Fetch variants on request

On each request, fetch variants using the server-side SDK. The result is a plain JavaScript object that maps feature keys to variant values. Store the result where your rendering code can access it in both server-side and client-side contexts.

const allFlags = await experimentServer.fetchV2({
  id: 'userId',
});

// store the result where the rendering code can access it
global.appProps = { flags: allFlags };

Initialize the Client SDK on render

At the start of your server-side render, initialize the Client SDK with the fetched variants. Instantiate an ExperimentClient that the render scope can access (for example, through a React ContextProvider). In the server-side context, create a new ExperimentClient every time. In the client-side context, create a new ExperimentClient only if one doesn't already exist.

import { ExperimentClient } from '@amplitude/experiment-js-client';

let experimentClient;

const render = (appProps) => {
const isServerSide = typeof window === 'undefined';
  if (isServerSide) {
    console.debug('Initializing Client Experiment');
    // on the server, create a new ExperimentClient every time
    experimentClient = new ExperimentClient(
      'client-IAxMYws9vVQESrrK88aTcToyqMxiiJoR',
      {
        initialVariants: appProps['features'],
      },
    );
  } else if (!experiment) {
    // in the client, only create the ExperimentClient once
    experimentClient = Experiment.initialize(
      'client-IAxMYws9vVQESrrK88aTcToyqMxiiJoR',
      {
        initialVariants: appProps['features'],
      },
    );
  }
}

// use a provider or store the ExperimentClient so the render scope can access it

Get variants on render

After you initialize the Client SDK, fetch the flag status in any component.

// experimentClient should be the same ExperimentClient instance from the previous step
experimentClient.variant('flag-key');

Was this helpful?