Постановка задачи
Передо мной стояла задача создать веб-платформу для небольшой компании по аренде автомобилей в Чишинёе, Молдова. Платформа должна была поддерживать каталог автомобилей с динамическим ценообразованием, систему бронирования, калькулятор стоимости услуг, мультиязычный интерфейс (румынский, русский, английский языки) и панель администратора.
Бюджет был ограничен, поэтому дорогостоящие решения типа платных сервисов за $200/мес не подходили.
Выбор технологий
После анализа доступных вариантов я остановился на следующем стеке:
- Frontend: Vanilla JS + Bootstrap + библиотека локализации i18next
- Backend: Node.js + Express
- База данных: Supabase (на основе PostgreSQL)
- Хостинг: фронтенд размещён на Vercel, а серверный API — на отдельном сервере
- CDN: Cloudflare
Почему не выбрал React? Для простого лендинга с формой бронирования использование фреймворков было бы избыточным. Ванильный JavaScript быстрее рендерится, что критично для показателей Core Web Vitals и поисковой оптимизации.
Структура проекта
├── public/
│ ├── index.html
│ ├── cars.html
│ ├── sofer-treaz.html # Услуга трезвого водителя
│ ├── css/
│ ├── js/
│ │ ├── i18n-init.js
│ │ ├── dynamic-cars-loader.js
│ │ └── validation-booking.js
│ └── locales/
│ ├── ro.json
│ ├── ru.json
│ └── en.json
├── server/
│ ├── api/
│ │ ├── cars.js
│ │ ├── bookings.js
│ │ └── fee-settings.js
│ └── supabase.js
Мультиязычная оптимизация под SEO
В Молдове распространены три языка: румынский, русский и английский. Я использовал библиотеку i18next вместе с файлами переводов формата JSON для каждого языка. Однако возникла проблема: примерно в 30% случаев Google индексирует страницы без выполнения JavaScript-кода, то есть атрибуты data-i18n остаются неотображёнными, и робот видит только текст на языке по умолчанию (румынском).
Решение заключалось в том, чтобы добавить статический контент на всех языках прямо внутри страниц там, где это важно для поисковых систем. Атрибуты data-i18n использовались лишь для элементов интерфейса вроде кнопок или форм.
<!-- Статичный блок для SEO -->
<p>Închirieri auto Chișinău — текст на румынском...</p>
<p>Аренда авто Кишинёв — текст на русском...</p>
<p>Car rental Chisinau — текст на английском...</p>
Также были добавлены метатеги hreflang, несмотря на одинаковый URL для разных языков.