Server-side Rendering

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

Example

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

Installation¶

Install both the JavaScript Server SDK and JavaScript Client SDKs.

npmyarn

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

yarn add @amplitude/skylab-js-client @amplitude/skylab-js-server

Initialize the Server SDK¶

On server startup, you should run initialize the Server SDK. To distinguish from the Client SDK Experiment object, Experiment has aliased the Experiment object from the Server SDK as ExperimentServer here.

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 mapping feature keys to variant values. You should store the result where your rendering code can access it in both server side and client side contexts.

const allFlags = await experimentServer.fetch({
  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. Here you need to instantiate a ExperimentClient that's accessible in the render scope (for example, a React ContextProvider). If you are in the server side context, create a new ExperimentClient every time. If you are in the client side, you should create a new ExperimentClient 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, we want to create a new ExperimentClient every time
    experimentClient = new ExperimentClient(
      'client-IAxMYws9vVQESrrK88aTcToyqMxiiJoR',
      {
        initialVariants: appProps['features'],
      },
    );
  } else if (!experiment) {
    // in the client, we only want to create the ExperimentClient once
    experimentClient = Experiment.initialize(
      'client-IAxMYws9vVQESrrK88aTcToyqMxiiJoR',
      {
        initialVariants: appProps['features'],
      },
    );
  }
}

// be sure to use a provider or store the ExperimentClient so that it is accessible in the render scope

Get variants on render¶

After the Client SDK is initialized, you can fetch the flag status in any component.

// experimentClient should be the same ExperimentClient instance that was instantiated in the previous step
'experimentClient.variant('flag-key');