{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"A/B-тестирование и эксперименты помогут вам создать культуру роста. Вместо того, чтобы гадать, какой опыт лучше всего подойдет вашим пользователям, вы можете строить, итерировать и адаптировать, опираясь на данные, чтобы создать максимально эффективный пользовательский интерфейс.\n\nВ этой статье вы узнаете, как мы создали высокопроизводительный механизм экспериментов для vercel.com с использованием Next.js и Vercel Edge Config, позволяющий нашим разработчикам создавать эксперименты, которые загружаются мгновенно с нулевым кумулятивным сдвигом макета (CLS) и отличным опытом разработчиков.","type":"unstyled","key":"dbh4p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эксперименты имеют значение\nЭксперименты - это способ проверить, как разные версии вашего приложения работают с пользователями. С помощью одного развертывания вы можете предоставить разный опыт для разных пользователей.\n\nХотя эксперименты могут быть невероятно полезными, исторически сложилось так, что в Интернете сложно проводить отличные тесты:\n\nПри рендеринге на стороне клиента (CSR) ваши эксперименты оценивают, какую версию вашего приложения увидит пользователь после загрузки страницы. Это приводит к плохому UX, поскольку вашим пользователям придется ждать загрузчика, пока эксперимент будет оценен и в конечном итоге отображен, создавая смещение макета.\nРендеринг на стороне сервера (SSR) может замедлить время отклика страницы, поскольку эксперименты оцениваются по требованию. Пользователям приходится ждать экспериментов по аналогичному графику, как и CSR - но смотреть на пустую страницу, пока не будет выполнена вся работа по созданию и обслуживанию страницы.\nЭти стратегии приводят к плохому пользовательскому опыту и дают вам плохие данные о ваших экспериментах. Поскольку вы ухудшаете время загрузки, вы негативно влияете на то, что должно было стать вашей контрольной группой.\n\nМиллисекунды составляют миллионы, поэтому использование правильных стратегий рендеринга имеет большое значение. Медленное время загрузки дает вам неточные результаты и ложные впечатления о ваших экспериментах.","type":"unstyled","key":"das25"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Определение механизма экспериментов","type":"header-two","key":"beq0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nДля наших инженеров, которые не работают с экспериментами каждый день, мы хотели создать простой, стандартизированный путь к эффективным, высокопроизводительным экспериментам. Нашими требованиями были:\n\n-Нулевое воздействие на конечных пользователей\n-Автоматическое сохранение пользователей в их \"экспериментальном ведре\" с помощью нашего поставщика флагов возможностей\n-Отправка событий в наше хранилище данных, когда пользователи дают согласие.\n-Отличный опыт разработчика \"из коробки\".\nИспользуя правильные инструменты, мы знали, что можем улучшить как работу наших внутренних разработчиков, так и работу конечных пользователей.\n\nИспользование Edge Config для повышения скорости чтения\nVercel Edge Config - это хранилище данных JSON, которое позволяет считывать динамические данные как можно ближе к пользователям. Edge Config считывает данные в течение 15 мс при P99 или даже 0 мс в некоторых сценариях.","type":"unstyled","key":"dh6cu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":249,"offset":0,"style":"ITALIC"}],"text":"import { NextResponse } from 'next/server'\nimport { get } from '@vercel/edge-config'\n\nexport const config = { matcher: '/welcome' }\n\nexport async function middleware() {\n const greeting = await get('greeting')\n return NextResponse.json(greeting)\n}","type":"unstyled","key":"6qaq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы используем Edge Config Integration от Statsig для автоматического заполнения Edge Config, подключенного к нашему проекту, правилами оценки эксперимента. После этого мы можем легко получать результаты наших экспериментов в нашем коде.","type":"unstyled","key":"52o3g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":493,"offset":0,"style":"ITALIC"}],"text":"import { EdgeConfigDataAdapter } from 'statsig-node-vercel'\nimport statsig from 'statsig-node'\n\nasync function initializeStatsig() { \n const dataAdapter = new EdgeConfigDataAdapter(\n process.env.STATSIG_EDGE_CONFIG_ITEM_KEY,\n process.env.STATSIG_EDGE_CONFIG,\n )\n\n await statsig.initialize(process.env.STATSIG_SERVER_KEY, { dataAdapter })\n}\n\nasync function getExperiment(userId, experimentName) {\n await initializeStatsig()\n return statsig.getExperiment({ userId }, experimentName)\n}","type":"unstyled","key":"4eu21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"82hav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование Next.js для высокопроизводительного и гибкого опыта","type":"header-two","key":"71dl8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В качестве высокоуровневого обзора мы собираемся:\n\n -Создадим безопасность типов для нашего кода\n -Предварительно отрендерить наши эксперименты на сервере\n -Предоставлять правильные варианты страниц нашим пользователям, используя их cookies\n -Автоматически перехватывать события с помощью React Context","type":"unstyled","key":"dod7r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание экспериментов в коде","type":"header-three","key":"80unq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы создать наиболее предсказуемый опыт разработчиков для себя и наших коллег, мы создали безопасный с точки зрения типов единый источник истины для нашего монорежима. Каждый эксперимент определяет возможные значения для каждого параметра вместе с путями, на которых эксперимент активен. Первое значение в каждом массиве - это значение по умолчанию для параметра.","type":"unstyled","key":"9go7e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":310,"offset":0,"style":"ITALIC"}],"text":"export const EXPERIMENTS = {\n pricing_redesign: {\n params: {\n enabled: [false, true],\n bgGradientFactor: [1, 42]\n },\n paths: ['/pricing']\n },\n skip_button: {\n params: {\n skip: [false, true]\n },\n // A client-side experiment won't need path values\n paths: []\n }\n} as const","type":"unstyled","key":"6heun"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Варианты экспериментов перед рендерингом","type":"header-three","key":"bfrhd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Динамические маршруты позволяют пользователям Next.js создавать шаблоны страниц, которые изменяют то, что они отображают, используя параметры в маршруте. Для наших целей мы закодируем варианты эксперимента в имени пути страницы. Мы предоставим эти данные через мощные API Next.js для получения данных: getStaticProps и getStaticPaths.\n\nДвижок, который мы создали, предлагает обернутую версию getStaticPaths, которая создает пути для всех вариантов страницы. Каждый путь представляет собой закодированную версию хэша значений эксперимента для данного пути, то есть мы храним значения эксперимента в самом URL.\n\nКаждый параметр эксперимента имеет несколько вариантов, поскольку на странице может быть много экспериментов. Все возможные комбинации значений экспериментов для каждого пути могут привести к длительному времени сборки, если на странице много экспериментов с большим количеством вариаций. Чтобы решить эту проблему, мы вычисляем первые n комбинаций с помощью функции генератора и предварительно рендерим только эти вариации, установив по умолчанию 100 вариаций страницы для каждого пути.","type":"unstyled","key":"2ekis"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пути, не сгенерированные во время сборки, возвращаются к шаблонам Next.js \"Incremental Static Generation\" или \"Incremental Static Regeneration\" в зависимости от того, указали ли вы интервал повторной проверки. Решение о том, сколько страниц вы хотите предварительно отрендерить, является компромиссом между временем сборки и влиянием задержки начального рендеринга для первого посетителя инкрементально статически отрендерированной страницы.\n\nДвижок также имеет обертку для getStaticProps, где мы декодируем параметр из URL, чтобы получить экспериментальные значения для использования в наших страницах. Мы также позаботились о том, чтобы придать нашей обертке тот же тип, что и getStaticProps, чтобы наши коллеги по команде могли использовать знакомый API.\n\nПоскольку это статически генерируемые страницы, значения доступны во время сборки. Если собрать вместе обёртки getStaticPaths и getStaticProps нашего движка, наш код будет выглядеть примерно так:","type":"unstyled","key":"btea6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":780,"offset":0,"style":"ITALIC"}],"text":"// Your encoding implementation\nimport { encodeVariations, decodeVariations } from './encoders'\n\nexport function experimentGetStaticPaths(\n path,\n maxGeneratedPaths = 100\n) {\n return (context) => {\n const paths = encodeVariations(path, maxGeneratedPaths)\n\n return {\n paths,\n fallback: 'blocking',\n }\n }\n}\n\n\nexport function experimentGetStaticProps(pageGetStaticProps) {\n return async (context) => {\n const { props: pageProps, revalidate } = await pageGetStaticProps(context)\n\t const encodedRoute = context.params?.experiments\n\n // Read from URL or use default values\n const experiments = decodeVariations(encodedRoute) ?? EXPERIMENT_DEFAULTS\n\n return {\n props: {\n ...pageProps,\n experiments\n },\n revalidate\n }\n}","type":"unstyled","key":"d9tjm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, когда мы собираемся провести эксперимент, мы можем написать:","type":"unstyled","key":"84jtb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":237,"offset":0,"style":"ITALIC"}],"text":"export const getStaticPaths = experimentGetStaticPaths(\"/pricing\")\n\nexport const getStaticProps = experimentGetStaticProps(async () => {\n const { prices } = await fetchPricingMetadata()\n\n return {\n props: {\n prices\n }\n }\n})","type":"unstyled","key":"2s26c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Предоставление экспериментов пользователям","type":"header-three","key":"72k2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для того чтобы наши пользователи попадали на правильные варианты страниц, мы используем перезапись в Next.js Middleware.\n\nЕсли пользователь уже посещал сайт vercel.com, перезапись выполняется на основе существующего cookie пользователя.\nЕсли у пользователя нет cookie, Middleware считывает данные из Edge Config и кодирует значения, определяя маршрут для вариации. Благодаря скорости Edge Config мы знаем, что у нашего пользователя не будет задержки при загрузке страницы.\nКогда вы используете перезапись в Middleware, ваш пользователь все еще видит /pricing в строке браузера, даже если вы предоставили /pricing/0p0v0, статически предварительно отрендеренную версию страницы с экспериментальными значениями.","type":"unstyled","key":"ccjv0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":533,"offset":0,"style":"ITALIC"}],"text":"import { NextResponse } from 'next/server'\n\nasync function getExperimentsForRequest(req) {\n const cookie = getExperimentsCookie(req)\n const experiments = cookie \n ? parseExperiments(cookie)\n : readExperimentsFromEdgeConfigAndUpdateCookie(req)\n\n return experiments\n}\n\nexport async function middleware(req) {\n const experiments = await getExperimentsForRequest(req)\n const path = getPathForExperiment(experiments, req)\n\n return NextResponse.rewrite(new URL(path, req.url))\n}\n\nexport const config = {\n matcher: '/pricing'\n}","type":"unstyled","key":"d1ff"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":204,"offset":305,"style":"ITALIC"}],"text":"Значение cookie - это параметры эксперимента, назначенные с помощью интеграции Statsig Edge Config, которую мы настроили ранее. Наши пользователи попадают в \"ведра\" на основе значений, которые им присваивает интеграция Statsig, разумно управляя тем, какие пользователи получают те или иные эксперименты.\n\nПримечание: существует возможность того, что cookie-файл клиента устареет и окажется рассинхронизированным с нашей конфигурацией экспериментов. В ближайшее время мы рассмотрим, как сохранить куки свежими. ","type":"unstyled","key":"d13d3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nПользователь получает страницу, которая была отрисована на сервере, поэтому наши компоненты React, использующие хук useExperiment нашего движка, уже знают свои значения, что приводит к отсутствию смены макета.","type":"unstyled","key":"8r4e4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":328,"offset":0,"style":"ITALIC"}],"text":"function Pricing({ prices }) {\n const { enabled, bgGradientFactor } = useExperiment(\"pricing_redesign\")\n\n return (\n

Pricing

\n {\n enabled ? \n \n : \n }\n

\n )\n}","type":"unstyled","key":"212g6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, когда у нас есть правильный UX, нам нужно собрать, изучить и проанализировать данные о наших экспериментах на предмет их эффективности.","type":"unstyled","key":"akqje"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оценка успеха","type":"header-three","key":"dch87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используя наши предыдущие помощники typesafe, мы создали контекст React, который хранит значения эксперимента для текущей страницы, автоматически сообщая о событии EXPERIMENT_VIEWED в наше хранилище данных.","type":"unstyled","key":"3e3lu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":488,"offset":0,"style":"ITALIC"}],"text":"export function trackExperiment(experimentName) {\n analytics(EXPERIMENT_VIEWED, getTrackingMetadataForExperiment(experimentName))\n}\n\nconst Context = createContext()\n\nexport function ExperimentContext({\n experiments,\n path,\t\n children\n}) {\n useEffect(() => {\n for (const experimentName of getExperimentsForPath(path)) {\n trackExperiment(experimentName);\n }\n }, [])\n\n return (\n \n {children}\n \n )\n}","type":"unstyled","key":"7t60j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После сбора достаточного количества данных мы можем использовать наши внутренние инструменты визуализации данных, чтобы оценить эффективность наших экспериментов и уверенно решить, что отправлять дальше.","type":"unstyled","key":"a68o9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обработка экспериментов на стороне клиента","type":"header-two","key":"1d93p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не каждый эксперимент будет происходить при первой загрузке страницы, поэтому нам все равно нужно уметь обрабатывать эксперименты на стороне клиента. Например, эксперимент может быть отображен в модальной или всплывающей подсказке.\n\nВ этих случаях мы используем наш React hook на стороне клиента, поскольку нам не нужно беспокоиться о первоначальной загрузке.","type":"unstyled","key":"bgtuj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"ITALIC"}],"text":"components/PricingModal.ts","type":"unstyled","key":"daitv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":407,"offset":0,"style":"ITALIC"}],"text":"function PricingModal() {\n // Fully-typed `skip` from EXPERIMENTS constant under the hood \n const { skip } = useClientSideExperiment(\"skip_button\")\n\n return (\n \n Invite Teammates\n Add members to your team.\n Ok\n {skip ? Skip : null}\n \n )\n}","type":"unstyled","key":"13utg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С помощью этого хука мы считываем данные непосредственно из cookie, чтобы узнать, к какому экспериментальному ведру принадлежит наш пользователь, и отобразить желаемый пользовательский интерфейс для этого эксперимента. Для этих экспериментов нам не понадобится рендеринг на стороне сервера, генерация статики или маршрутизация, поскольку пользователь уже взаимодействует с нашим пользовательским интерфейсом.","type":"unstyled","key":"dupek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обеспечение сохранения свежести экспериментов","type":"header-two","key":"all2l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользователь может оказаться с несвежим или устаревшим файлом cookie в своем браузере, пока мы обновляем наши эксперименты за кулисами. Чтобы исправить это, мы сохраняем куки теплыми с помощью фонового фетчера с интервалом в 10 минут.","type":"unstyled","key":"4jd25"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поскольку мы используем Edge Function в сочетании с Edge Config, мы можем быть уверены, что это фоновое обновление выполняется молниеносно, избегая холодного старта и используя мгновенное чтение Edge Config.","type":"unstyled","key":"1osuq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эффективные эксперименты, каждый раз","type":"header-two","key":"b3leg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С помощью Next.js и Edge Config мы создали механизм экспериментов, в котором:\n\nНаши пользователи не будут испытывать Cumulate Layout Shift в результате эксперимента.\nМы можем проводить множество экспериментов на уровне страниц и компонентов на каждой странице и между страницами.\nМы можем быстрее и безопаснее отправлять эксперименты в Vercel и проводить итерации.\nМы можем собирать ценные знания о том, что лучше всего работает для наших пользователей, не жертвуя производительностью страницы.\nЗа последние несколько месяцев мы поставили множество различных экспериментов с нулевым CLS на vercel.com, и нам не терпится продолжить улучшать ваш опыт, получая новые данные.","type":"unstyled","key":"8bd59"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3l58d"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":63,"offset":19}],"inlineStyleRanges":[],"text":"Криво переведено с https://vercel.com/blog/zero-cls-experiments-nextjs-edge-config","type":"unstyled","key":"bnb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если интересно подобное, пишите, продолжу эксперименты с таким контентом","type":"unstyled","key":"pna8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"Z1IACohU1oVYjoKUJxvO"}],"entityMap":{"0":{"data":{"url":"https://vercel.com/blog/zero-cls-experiments-nextjs-edge-config"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}