Next.js SDK

Background

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

• подключение sdk c ssr, фукция getServerSideProps
• подключение sdk c ssr, фукция getInitialProps
• подключение sdk без ssr

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

Установка SDK

NPM

npm i expf-sigma-node.js

Yarn

yarn add 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

npm i expf-sigma-node.js

Yarn

yarn add 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

npm i expf-sigma.js

Yarn

yarn add 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 = 'AE541D2D-0A51-4BB8-90D5-947B9DE05DD9';
      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 />    </>  )}