Выход на новые рынки без необходимости перенастраивать сайт: опыт Sunction.store

Привет, это Лиза из Лиги А. Мы делаем сложные цифровые сервисы для стартапов и растущего бизнеса. Любим, когда сайт не только красивый, но и быстрый, удобный и готовый к развитию. Sunction.store — онлайн-магазин оптики с каталогом почти на 100 000 товаров — как раз такой. Мы развиваем проект с клиентом уже почти 5 лет. В этот раз обновили дизайн, вывели магазин на международный рынок и даже немного поговорили с роботами (в хорошем смысле). Ниже — честный рассказ о том, как мы всё это сделали: с задачами, правками и примерами. Поехали.

Теперь подробнее.

Сначала клиент пришёл с задачей на редизайн: не просто перекрасить кнопки в другой цвет, а отрисовать элементы для удобства и конверсии.

Мы добавили промоплашки с акциями, чтобы встроить рекламу прямо в нужное место, не разрывая контекст. Сделали модалку «Хочу скидку» — теперь можно собирать лиды, не дожидаясь, пока пользователь дойдёт до корзины. А на мобилках и планшетах сделали увеличение картинки по нажатию: потому что люди хотят рассмотреть оправу, прежде чем отдать за неё деньги.

Там мы добавили возможность вставлять в баннер не только логотип компании, но и видео. Страница сразу становится живее — это не ещё одна карточка бренда, а уже полноценная история. Плюс поменяли вид кнопок категорий: они стали компактнее (так что на экран помещается больше кнопок за раз) и симпатичнее.

Длинные тексты про историю бренда на мобилках стали сворачиваться до трёх строк. Экран не перегружен, но кто хочет — раскроет страницу и получит всю информацию.

Ещё добавили карточки с фишками бренда. Ключевые преимущества вынесли в отдельный блок, чтобы они не терялись в простыне текста. А на карточки товара добавили несколько новых стикеров и перерисовали старые. Теперь акции и особые предложения, например, «Новинка» и «Доставка за 24 часа», реально бросаются в глаза.

Отдельная история — фотохромные линзы. Для них мы сделали анимацию затемнения. Как это работает: берём два одинаковых изображения (светлые и тёмные линзы), накладываем одно поверх другого и поочерёдно анимируем прозрачность одного из них. Решение простое, но эффектное. Пользователь сразу видит магию в действии — анимация работает на продажу лучше любого описания.

Пока работали над редизайном, бизнес клиента рос. Появилась новая задача: адаптировать сайт для онлайн-покупок в других странах. Всё это звучало как «интернационализация». Поясним. Сначала магазин работал только в России, а клиент уже планировал продавать очки в Азербайджане, Грузии, Белоруссии, Казахстане и не только. Надо было адаптировать сайт, не переписывая всё с нуля.

Но адаптация — это не перевод. Язык мы оставили русский, а вот кое-какие вещи поменяли.

Ещё подкрутили метатеги, чтобы они соответствовали международному сайту. Но это уже мелочи.

В URL есть код страны — например, /az для Азербайджана. Когда пользователь заходит на сайт, мы определяем его страну по IP и показываем плашку: «Ваш регион — Азербайджан. Оставляем так?». Удобно и заботливо.

Дальше вставляем код страны в специальный заголовок запроса к бэкенду. Бэкенд смотрит на этот заголовок и возвращает данные (цены, номер телефона, контакты), соответствующие Азербайджану. Всё происходит за секунду.

Технический нюанс для тех, кто в теме. Мы боялись, что придётся мигрировать на новую версию Next.js. Но оказалось, что наша 12-я версия уже поддерживает базовую адаптацию. Мы указали набор локалей — и фреймворк сам начал генерировать страницы с кодами стран. Так у нас появилась возможность получать код региона с помощью средств, предоставляемых фреймворком, именно когда это нужно в нашей работе.

На тестовом сервере всё работало идеально. Но под нагрузкой начались странности: редким пользователям показывались цены не того региона, в котором они находились. Сначала мы грешили на бэкенд. Потом одновременно с клиентом поняли, в чём дело. Оказалось, при большом трафике запросы от разных пользователей влияли друг на друга.

Как так вышло? При серверном рендеринге (SSR) мы использовали общий объект для хранения настроек региона. В браузере такой подход работает без проблем — там пользователь только один и настройки у него тоже одни, пока он сам их не изменит. А на сервере, где одновременно обрабатываются сотни запросов, этот объект мог «перезаписываться» одним запросом в тот момент, когда другой ещё не завершился. В программировании это называется мутацией общего объекта. Отсюда и путаница с регионами.

Клиент поставил временную заплатку. А мы взялись за основательное решение: заменили мутацию на передачу параметра во все запросы к бэкенду. Теперь каждый SSR-запрос получает свой собственный параметр региона, независимый от других. Путаница исключена, сайт работает стабильно.

Параллельно с основными задачами сделали одну неочевидную, но важную вещь. Каталог Sunction.store разрастался, и поисковые роботы начали создавать заметную нагрузку на сервер. Надо было сделать так, чтобы они не грузили его, если на странице не было никаких изменений.

Когда робот (Яндекс или Google) приходит на страницу, он проверяет, изменилась ли она с прошлого визита. Если нет — незачем каждый раз отдавать все данные, можно передать сигнал, что всё по-старому. Это от нас и требовалось настроить.

Реализовали работу с заголовками Last-Modified и If-Modified-Since:

Робот уходит, сервер не нагружается. Как итог: индексация проходит эффективнее, ресурсы тратятся экономнее.

Наша позиция простая: нерешаемых задач не бывает. Когда не хватает опыта, привлекаем ИИ. Так мы превращаем «я не умею» в «я разобрался и сделал». Конкретно для этой задачи попросили ChatGPT подсказать направление. Дальше действовали сами: проверили информацию и взяли в работу.

Над проектом работали два разработчика. Андрей начинал редизайн, делал страницы товара. Юра вёл проект дальше: закончил редизайн, закрыл всю адаптацию и SEO. Работа заняла примерно три месяца с перерывами на согласования.

Бизнес клиента продолжает развиваться, а мы будем рядом — с новыми идеями и для других проектов. Например, готовы ускорять страницы каталогов и брендов за счёт поэтапной подгрузки информации: сначала будут подгружаться картинки и текст, а потом детали вроде слайдеров.

***

Есть похожая задача? Нужно адаптировать интернет-магазин под новые рынки, ускорить его или просто «причесать» код? Пишите мне в телеграм @gingerliza Посмотрим, что можно сделать, и предложим решение, которое не сломает то, что уже работает.