coresmith.dev
← Все работы

Createli Group — мебель на заказ

Сайтрумынскийодинв работеОткрыть сайт
Проблема

Одна мастерская, два покупателя без ничего общего.

Createli делает мебель из дерева на заказ для дома и оснащает школы и детские сады. Семья, выбирающая кухню, и снабженец, закупающий сорок парт, ищут разные страницы и читают разные слова. Один сайт должен был обслужить обоих, не превратившись в каталог, который не служит никому.

Подход

Развилка стоит на первом экране.

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

Товары — это данные, а не страницы. У каждого своя маршрутизация, сгенерированная из API, поэтому новый товар — строка в базе, а не деплой.

Архитектура

React спереди, статический HTML на сборке.

Vite и React, за ними Express API. Каждый маркетинговый маршрут и каждая страница товара рендерятся headless-браузером во время сборки, поэтому краулер или соцсеть получают полный HTML с мета этой страницы — а не пустую оболочку, которая заполняется только после JavaScript.

Пререндер работает против локального сервера, а не против живого сайта. Так сборка замкнута сама на себя: ни один деплой не зависит от того, что предыдущий ещё жив.

ReactViteTypeScriptTailwindshadcn/uiExpressPuppeteer prerenderreact-helmet-asyncPM2nginx
Результат

Тринадцать маршрутов приходят целыми.

0,000сдвиг макета
2,3 скрупнейшая отрисовка
13маршрутов в пререндере

Измерено на живом сайте: ничего не смещается, пока страница грузится, а крупнейший элемент отрисовывается внутри порога «хорошо» у Google.

Нужно что-то похожее?

Начать проект