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

Sunction.store — онлайн-магазин оптики с каталогом почти на 100 000 товаров. Мы развиваем проект с клиентом уже почти 5 лет. В этот раз обновили дизайн сайта, оптимизировали его и вывели магазин на международный рынок.

1. Редизайн: фишки, которые реально помогают продавать

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

Страница товара

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

Страницы брендов

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

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

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

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

2. Адаптация: 10 валют, контакты и доставка в страны

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

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

Что изменилось технически

• Цены и валюта. Когда меняется страна, меняется и валюта, в которой указаны цены. Соответственно, пересчитывается сумма и добавляется нужный значок. Плюс мы сократили длинные числа при конвертации, например, пишем не 8 000 000 UZS, а 8000К UZS.

• Номер телефона. Когда пользователь переходит в корзину, в поле ввода телефона уже есть код нужной страны. Но если регион надо поменять, это легко сделать вручную, нажав на значок флажка.

• Контакты на одноимённой страничке. Для России адрес и телефон указаны в Москве, для других стран — в Казахстане.

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

Как это работает

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

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

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

Какой баг мы нашли

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

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

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

3. SEO: разгрузка серверов

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

В чём суть

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

Что мы сделали

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

1. На этапе SSR проверяем дату последнего изменения страницы (данные с бэкенда плюс дата сборки нашего фронта).

2. Сравниваем с тем, что передаёт робот.

3. Если ничего не изменилось — отвечаем кодом 304 Not Modified.

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

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

• Готовность к расширению. Сайт теперь работает в 9 странах. Когда бизнес разрастётся ещё больше, мы легко добавим 10 или 15 страну — это будет вопрос нескольких часов, а не месяцев.

• Экономия ресурсов сервера. SEO-доработка снизила количество холостых обращений поисковиков. Сервер не дёргается по пустякам — трафик и вычислительные мощности расходуются только на реальных пользователей.

• Рост конверсии. Промоплашки, модалка «Хочу скидку», увеличение картинок на мобилках, карточки с фичами — всё это работает на то, чтобы пользователь быстрее принял решение и оформил заказ. Удобный и красивый интерфейс продаёт лучше, чем просто красивый.

• Техническая готовность к будущему. Следующие доработки обойдутся дешевле и быстрее.