Как Whop увеличил Real Experience Score на 200% с помощью Next.js App Router

Миграция на Next.js и App Router помогла маркетплейсу цифровых товаров Whop добиться роста Real Experience Score на 200% и улучшить взаимодействие с пользователями. Рассказываем, как компания перешла с Ruby on Rails на современный стек и какие результаты это принесло. Whop, онлайн-маркетплейс циф

Whop перешел с Ruby on Rails на Next.js и App Router

Whop, онлайн-маркетплейс цифровых продуктов, поставил перед собой цель кардинально улучшить как опыт разработчиков, так и конечных пользователей. Для этого компания решила модернизировать технологический стек. Первым шагом стал отказ от Ruby on Rails в пользу Next.js. Затем последовало постепенное внедрение App Router — нового маршрутизатора, представленного в Next.js 13. Результат не заставил себя ждать: Real Experience Score (RES) — метрика, оценивающая восприятие производительности пользователем, — вырос на 200%. Это позволило Whop не только ускорить загрузку страниц, но и повысить конверсию и удовлетворенность клиентов.

Предыстория и контекст

До миграции Whop использовал Ruby on Rails, который со временем перестал справляться с растущими требованиями к производительности и масштабируемости. Команда искала решение, которое позволило бы сочетать серверный рендеринг с динамическими возможностями одностраничных приложений. Выбор пал на Next.js — популярный React-фреймворк, предоставляющий гибкие инструменты для создания веб-приложений. Однако даже после перехода на Next.js компания столкнулась с проблемами производительности из-за устаревшей архитектуры маршрутизации. App Router, основанный на React Server Components, предложил новый подход к рендерингу и загрузке данных, что и стало ключом к улучшению показателей.

Как App Router повлиял на производительность?

App Router в Next.js 13 и выше использует серверные компоненты React, которые рендерятся на сервере и отправляют клиенту только готовый HTML. Это радикально сокращает объем JavaScript, необходимого для первоначальной загрузки страницы. Для Whop это означало, что страницы стали загружаться быстрее, а взаимодействие с интерфейсом стало более отзывчивым. Кроме того, App Router поддерживает потоковую передачу данных (streaming), что позволяет отображать контент частями, не дожидаясь полной загрузки всех данных. В результате пользователи видят значимый контент раньше, что положительно сказывается на Real Experience Score.

Технические детали миграции

Переход на App Router происходил поэтапно. Whop начал с переписывания ключевых страниц, таких как страница продукта и оформления заказа, используя серверные компоненты. Это позволило снизить время до первого байта (TTFB) и время до интерактивности (TTI). Команда также внедрила автоматическую оптимизацию изображений и кэширование на уровне фреймворка. Важно отметить, что Whop сохранил часть существующего кода на Ruby on Rails для внутренних административных интерфейсов, но все пользовательские страницы были переведены на Next.js. Такой подход минимизировал риски и позволил постепенно оценивать результаты.

Кого затронет и как

Улучшение производительности напрямую повлияло на пользователей Whop — покупателей и продавцов цифровых товаров. Более быстрая загрузка страниц и плавный интерфейс снизили процент отказов и увеличили время, проведенное на сайте. Для разработчиков компании переход на современный стек означает более простую поддержку и возможность использовать последние возможности React и Next.js. В более широком контексте кейс Whop демонстрирует, что миграция на App Router может быть оправдана для проектов, где критична скорость загрузки и взаимодействие с пользователем. Российские и СНГ-компании, использующие Ruby on Rails или старые версии Next.js, могут взять этот опыт на заметку.

Какие метрики производительности улучшились после миграции на App Router?

Помимо роста Real Experience Score на 200%, Whop зафиксировал улучшение таких ключевых показателей, как First Contentful Paint (FCP) и Largest Contentful Paint (LCP). Время загрузки страниц сократилось в среднем на 40%, а показатель отказов уменьшился на 15%. Эти изменения напрямую повлияли на конверсию: количество завершенных покупок выросло на 12%. App Router также позволил снизить нагрузку на сервер благодаря эффективному кэшированию и уменьшению объема передаваемых данных.

Что будет дальше

Whop планирует продолжить оптимизацию, внедряя Partial Prerendering (PPR) — экспериментальную функцию Next.js, которая комбинирует статический и динамический рендеринг. Это может дать дополнительный прирост производительности. Кроме того, компания рассматривает возможность использования Edge Runtime для обработки запросов еще ближе к пользователю. В целом, успех Whop подтверждает, что инвестиции в современный стек окупаются за счет улучшения пользовательского опыта и бизнес-показателей.

Итог

Миграция Whop на Next.js с App Router позволила увеличить Real Experience Score на 200%, что напрямую сказалось на удовлетворенности пользователей и конверсии. Этот пример показывает, как правильный выбор технологий может кардинально улучшить производительность веб-приложения. Следите за развитием Next.js и App Router — возможно, ваш проект станет следующим, кто выиграет от этих инноваций.