서버측 렌더링

JavaScript 서버 SDK와 JavaScript 클라이언트 SDK를 함께 사용하여 서버측 렌더링 환경을 생성하십시오.

완전한 예제를 보려면 GitHub의 experiment-node-server 데모 앱으로 이동하십시오.

설치

JavaScript 서버 SDK와 JavaScript 클라이언트 SDK를 모두 설치합니다.

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

서버 SDK 초기화

서버 스타트업 시 서버 SDK를 초기화합니다. 이 예제에서는 클라이언트 SDK Experiment 객체와 구별하기 위해 서버 SDK Experiment 객체를 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 };

요청 시 변형 가져오기

각 요청마다 서버측 SDK를 사용하여 변형을 가져옵니다. 그 결과, 피쳐 키를 변형 값에 매핑하는 일반 JavaScript 객체가 생성됩니다. 렌더링 코드가 서버측 및 클라이언트측 컨텍스트 모두에서 해당 결과에 액세스할 수 있는 위치에 결과를 저장합니다.

const allFlags = await experimentServer.fetchV2({
  id: 'userId',
});
// store the result where the rendering code can access it
global.appProps = { flags: allFlags };

렌더링 시 클라이언트 SDK 초기화

서버측 렌더링을 시작할 때 가져온 변형으로 클라이언트 SDK를 초기화합니다. 렌더 스코프가 접근할 수 있는 ExperimentClient를 인스턴스화합니다(예를 들어, React ContextProvider를 통해). 서버 측 컨텍스트에서는 매번 새로운 ExperimentClient를 생성합니다. 클라이언트측 컨텍스트에서는 ExperimentClient가 존재하지 않는 경우에만 새로 생성하십시오.

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

렌더링할 때 변형 가져오기

클라이언트 SDK를 초기화한 후 임의의 구성 요소에서 플래그 상태를 가져옵니다.

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

이 내용이 도움이 되었나요?