Перейти к основному содержимому

Next.js SDK

Background​

Для рендеринга результата экспериментов и фича флагов на стороне сервера в своих приложениях нужно подключить серверный sdk expf-sigma-node.js. Next.js имеет две функции для рендеринга на стороне сервера: getInitialProps и getServerSideProps.

Если нет необходимости рендеринга на стороне сервера можно подключить клиентский sdk expf-sigma.js, результат экспериментов и фича флагов можно получить в компонентах.

Подключение sdk c ssr, функция getServerSideProps​

Установка SDK​

npm i expf-sigma-node.js

Подключение SDK​

Создайте и экспортируйте вспомогательные асинхронные функции.

/helpers/sigma.js

import Sigma from 'expf-sigma-node.js';

const token = <TOKEN>;

export const sigmaGetExperimentParam = async (expId, paramName, userProps = {}) => {
  const userData = userProps;
  const sigma = new Sigma(token, userData);

  const variant = await sigma.getExperiment(expId).then(
    (res) => res.getParamValue(paramName)
  );
  
  if (variant) return variant;
  return;
}

export const sigmaGetAllUserExperiments = async (userProps = {}) => {
  const userData = userProps;
  const sigma = new Sigma(token, userData);

  const userSigmaExps = await sigma.getAllUserExperiments()

  if (userSigmaExps) return userSigmaExps;
  return;
}

Страница с экспериментом​

В примере показано, как получить данные эксперимента и предварительно отобразить результат.

  • страница запускается во время запроса, и эта страница будет предварительно визуализированная с возвращенными реквизитами.
  • реквизиты передаются в качестве аргументов компонентам
  • на странице подключен скрипт для передачи данных в GA
  • для того чтобы отправить данные в GA, на странице подключен скрипт "https://www.googletagmanager.com/gtag/js" и хук useEffect()
  • подробнее о getServerSideProps
/pages/InnerPage/index.js

import BannerName from '../../components/BannerName.js';
import { sigmaGetExperimentParam, sigmaGetAllUserExperiments } from "../../helpers/sigma.js";
import React from 'react';
import Script from 'next/script'

export default function InnerPage({ isBannerNameExperiment, allExperiments }) {
  React.useEffect( () => {
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments) };
    gtag('event', 'get', { 
      event_category: 'check', 
      event_action: 'check', 
      dimension1: allExperiments });
    console.log(window.dataLayer)
  }, []);

  return (
    <>
      <Script 
        src='https://www.googletagmanager.com/gtag/js?id=UA-000000-1' 
        strategy='beforeInteractive'
      />
      <main>
        {isBannerNameExperiment &&  <BannerName /> }
      </main>
    </>
  )
}

export const getServerSideProps = async ({ res, req }) => {
  const userId = userCooKieId || req.userId; // кука или любой id

  const isBannerNameExperiment = await sigmaGetExperimentParam(<expId>, <expParam>, { userId });
  const allExperiments = await sigmaGetAllUserExperiments({ userId });

  return {
    props: {
      isBannerNameExperiment,
      allExperiments,
    },
  }
}

Подключение sdk c ssr, функция getInitialProps​

Установка SDK​

npm i expf-sigma-node.js

Подключение SDK​

Создайте и экспортируйте вспомогательные асинхронные функции.

/helpers/sigma.js

import Sigma from 'expf-sigma-node.js';

const token = <TOKEN>;

export const sigmaGetExperimentParam = async (expId, paramName, userProps = {}) => {
  const userData = userProps;
  const sigma = new Sigma(token, userData);

  const variant = await sigma.getExperiment(expId).then(
    (res) => res.getParamValue(paramName)
  );
  
  if (variant) return variant;
  return;
}

export const sigmaGetAllUserExperiments = async (userProps = {}) => {
  const userData = userProps;
  const sigma = new Sigma(token, userData);

  const userSigmaExps = await sigma.getAllUserExperiments()

  if (userSigmaExps) return userSigmaExps;
  return;
}

Страница с экспериментом​

В примере показано, как получить данные эксперимента и предварительно отобразить результат.

  • динамический импорт вспомогательных функций в теле InnerPage.getInitialProps
  • подробнее о getInitialProps
/pages/InnerPage/index.js

import BannerName from '../../components/BannerName.js';

function InnerPage({ isBannerNameExperiment, allExperiments }) {
  return (
    <>
      <main>
        {isBannerNameExperiment &&  <BannerName /> }
      </main>
    </>
  )
}

InnerPage.getInitialProps = async () => {
  const sigma = await import('../../helpers/sigma.js')
  const userId = userCooKieId || req.userId; // кука или любой id

  const isBannerNameExperiment = await sigma.sigmaGetExperimentParam(<expId>, <expParam>, { userId });
  const allExperiments = await sigma.sigmaGetAllUserExperiments({ userId });

  return { isBannerNameExperiment, allExperiments }
  }
}

export default InnerPage;

Подключение sdk без ssr​

Установка SDK​

npm i expf-sigma.js

Подключение SDK​

Создайте hook, который будет содержать настройки sdk и результаты экспериментов, фича флагов.

./src/hooks/useSigma.js

import Sigma from "expf-sigma.js";
import { useEffect, useState } from 'react';

export function useSigma () {
  const [sigma, setSigmaState] = useState({});

  useEffect(() => {
    const sigmaData =  async () => {
      const sigma = new Sigma();
      const token = <TOKEN>;

      sigma.init({
        token,
        userData: {
          email: '1ex@mail.ru',
        },
      });

      const browserName = await sigma.checkFlag('browser_name');
      const buttonColor = await sigma.checkFlag('button_color');
      const exParam = await sigma.getExperiment('param').then((res) => res.getParamValue('param_name'));

      setSigmaState({
        browserName,
        buttonColor,
        exParam
      });
    }

    sigmaData();
  }, []);

  return [sigma];
}

В компонентах вызвать hook, например:

./src/components/Title.js

import { useSigma } from "../hooks/useSigma";

export default function Title() {
  const [sigma] = useSigma();

  return (
    <h1>{sigma.browserName}</h1>
  );
}

Чтобы подключить компонент с hook useSigma, нужно отключить ssr и динамически импортировать

import dynamic from 'next/dynamic';
const DynamicComponentWithNoSSR = dynamic(
  () => import('../../components/Title.js'),
  { ssr: false }
)

export default function ClientSide() {
  return (
    <>
      <DynamicComponentWithNoSSR />
    </>
  )
}