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

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 />
</>
)
}