Кейс
Olexa Studio
Цей сайт — наш власний продукт, який ми задумали, написали й підтримуємо. Він є вітриною наших підходів до розробки: від архітектури до дрібних деталей, що забезпечують стабільність і швидкість.
Задача: багатомовність і швидкість
Нам був потрібен сайт, що представлятиме студію на трьох мовах — українській, англійській та івриті — без шкоди для швидкості завантаження. Окремим викликом стала версія для івриту: потрібно було забезпечити коректне відображення письма справа наліво (RTL) та простежити, щоб вилки цін не читалися навпаки. Це типова задача для проєктів, що виходять на міжнародний ринок.
Інша вимога — сайт мав бути статичним, тобто максимально швидким для відвідувача та пошукових систем. Замість того, щоб збирати сторінку в браузері, сервер одразу віддає готовий HTML. Це досягається завдяки фреймворку Astro. Розміщення на Cloudflare Pages дозволяє доставляти контент з найближчого до користувача сервера, що додатково прискорює завантаження.
Ми також подбали про логіку перемикання мов. Жодна мова не живе в корені домену: корінь лише визначає мову — за вибором, який людина вже зробила, за мовою браузера або за країною. Адреса з мовою не перенаправляється ніколи, тож перемикач мов не повертає людину туди, звідки вона пішла. Для пошуковиків кожна сторінка чітко вказує на свої альтернативні мовні версії.
Рішення: статичний сайт з серверними функціями
Основою сайту є фреймворк Astro з Tailwind для стилів. Це дозволяє створювати швидкі статичні сторінки, які легко підтримувати й розширювати. Усі тексти винесені в окремі мовні файли. Це спрощує їх переклад і редагування, а також дає змогу автоматично перевіряти повноту перекладу для кожної з трьох мов.
Для обробки заявок з форм, як-от брифу, ми використовуємо безсерверні функції Cloudflare. Коли ви заповнюєте форму, дані відправляються на функцію, яка надсилає нам лист і одночасно передає заявку в наш внутрішній клієнтський кабінет. Кабінет — окремий застосунок на Next.js з базою PostgreSQL у Docker. Публічний сайт лишається статичним, а все, що потребує бази даних, живе в кабінеті.
Досвід створення багатомовних сайтів, зокрема з письмом справа наліво, переноситься на проєкти, що потребують кількох мовних версій. Ми знаємо, як структурувати контент, налаштувати адреси сторінок і забезпечити коректне технічне відображення.
Контроль якості та автоматизація
Щоб помилки не доходили до живого сайту, ми написали власні автоматичні перевірки. Скрипт локально, без доступу до мережі, перевіряє зібраний сайт: чи на місці заголовки, чи правильні канонічні адреси та посилання на мовні версії, чи коректно згенерована карта сайту. Знайдена помилка завершує перевірку з кодом помилки, і таку збірку ми не викочуємо.
Цей набір перевірок замінив нам платний сервіс, що коштував би $83 на місяць за аудит лише кількох сторінок. Такий підхід до автоматизації дозволяє виявляти проблеми на ранньому етапі, а не після того, як їх помітять користувачі чи пошукові системи.
Ми також контролюємо, як наш контент використовується. У файлі robots.txt ми прямо заборонили навчати великі мовні моделі на текстах сайту, хоча дозволили пошуковикам та AI-асистентам індексувати й цитувати його. Це приклад того, як можна керувати доступом до свого контенту на технічному рівні.