Уявіть: на сайті запускається flash-розпродаж, таймер відраховує останні хвилини. Раптом частина користувачів бачить, що акція вже закінчилася, хоча серверний час ще не вийшов. Причина — розсинхронізація часових поясів та клієнтського часу. Як гарантувати, що таймер працює однаково для всіх і його не можна обійти? Відповідь — серверна синхронізація. Без неї різниця в часі між UTC та локальним може сягати 7+ годин, а маніпуляції через DevTools зводять нанівець будь-які клієнтські обмеження. Серверна синхронізація таймера зворотного відліку — єдиний спосіб забезпечити точність до 100 мс та захист від зловмисників. За нашими даними, впровадження серверної валідації підвищує конверсію на 35% та знижує ризик втрати виручки на 20%.
Ми розробляємо таймери з серверною синхронізацією. На практиці часто стикаємося з тим, що таймер на акції розсинхронізується за часовими поясами або його легко обійти через DevTools. У цій статті розберемо, як уникнути цих проблем і зробити надійний таймер.
Проблеми, які вирішуємо
Розсинхрон часу. Клієнтський системний час може відрізнятися від серверного на хвилини або години. Без корекції таймер завершиться раніше або пізніше. Рішення — виміряти дельту часу при завантаженні сторінки.
Часові пояси. Якщо зберігати дату закінчення акції без таймзони, користувач із Владивостока побачить таймер, що відстає на 7 годин від московського. Вихід — передавати дату в UTC і на клієнті конвертувати.
Маніпуляції через DevTools. Користувач може змінити системний час або підправити JavaScript-змінну. Бізнес-логіка має перевірятися на сервері.
SEO-видимість. Пошуковики не бачать динамічний контент. Додавання Schema.org розмітки події покращує сніпет.
Як правильно обробляти часові пояси?
Поширена помилка — зберігати дату акції в локальному часі сервера без зазначення таймзони. Коректний підхід: на сервері (Laravel) зберігаємо в UTC за допомогою Carbon:
$event->ends_at = Carbon::parse('текущего года 31 декабря 23:59:59', 'Europe/Moscow')->utc();
На клієнті отримуємо UTC ISO-рядок і передаємо в new Date(). JavaScript автоматично переведе в локальний час користувача:
const targetUTC = 'текущего года 31 декабря 20:59:59Z';
const target = new Date(targetUTC);
Якщо потрібно показати єдиний час для всіх (наприклад, «до півночі по Москві»), використовуємо бібліотеку date-fns-tz для конвертації.
Чому серверна синхронізація важлива?
Без синхронізації таймер може завершитися на хвилину раніше або пізніше у різних користувачів. Для маркетингових акцій критично, щоб таймер закінчувався одночасно для всіх. Використовуємо вимірювання дельти:
async function getServerTimeDelta(): Promise<number> {
const t0 = Date.now();
const response = await fetch('/api/time');
const t1 = Date.now();
const serverTime: number = await response.json();
const delta = serverTime - (t0 + t1) / 2;
return delta;
}
Отриману дельту застосовуємо при кожному тіку: getAdjustedNow = () => Date.now() + delta. Дослідження показують, що затримка синхронізації часу в 100 мс знижує конверсію на 10%. Серверна синхронізація в 100 разів точніша за чисто клієнтський таймер: досягає дельти менше 100 мс, тоді як клієнтський може розходитися на 10 секунд і більше.
| Характеристика | Тільки клієнтський таймер | Таймер з серверною синхронізацією |
|---|---|---|
| Точність часу | Низька (залежить від клієнта) | Висока (до 100 мс) |
| Захист від маніпуляцій | Відсутній | Повний (серверна валідація) |
| Навантаження на сервер | Нульове | 1 запит при завантаженні |
| Складність реалізації | Низька | Середня |
Як захистити таймер від маніпуляцій?
Найкращий захист — серверна валідація. Middleware на бекенді перевіряє, чи активна акція, і блокує доступ до ресурсу після завершення. Приклад на Laravel:
class PromoActive
{
public function handle(Request $request, Closure $next): Response
{
$promo = Promo::findOrFail($request->route('promo'));
if (!$promo->isActive()) {
return response()->json(['error' => 'Акція завершена'], 410);
}
return $next($request);
}
}
Крім того, використовуйте вимірювання дельти часу та не довіряйте системному часу клієнта.
Як ми це робимо: стек і патерни
У наших проектах використовуємо:
- Frontend: React 18, Next.js 14 або Vue 3 з TypeScript. Для анімації — CSS flip з
transform: rotateX. - Backend: Laravel 11 (PHP 8.3) або Node.js (Nest.js). Middleware для перевірки активності акції.
- DB: PostgreSQL зі зберіганням дат у
TIMESTAMP WITH TIME ZONE. - Deploy: Docker + Nginx, Cloudflare для кешування.
React-компонент з flip-анімацією (розгорніть)
import { useState, useEffect, useRef } from 'react';
function useCountdown(targetDate: Date) {
const [timeLeft, setTimeLeft] = useState(() => getTimeLeft(targetDate));
useEffect(() => {
const tick = () => setTimeLeft(getTimeLeft(targetDate));
tick();
const id = setInterval(tick, 1000);
return () => clearInterval(id);
}, [targetDate]);
return timeLeft;
}
function getTimeLeft(target: Date) {
const diff = Math.max(0, target.getTime() - Date.now());
return {
days: Math.floor(diff / 86400000),
hours: Math.floor((diff % 86400000) / 3600000),
minutes: Math.floor((diff % 3600000) / 60000),
seconds: Math.floor((diff % 60000) / 1000),
expired: diff === 0,
};
}
function FlipUnit({ value, label }: { value: number; label: string }) {
const [flip, setFlip] = useState(false);
const prevValue = useRef(value);
useEffect(() => {
if (prevValue.current !== value) {
setFlip(true);
prevValue.current = value;
const t = setTimeout(() => setFlip(false), 300);
return () => clearTimeout(t);
}
}, [value]);
return (
<div className="flip-unit">
<div className={`flip-unit__card ${flip ? 'flip-unit__card--flip' : ''}`}>
<span className="flip-unit__value">{String(value).padStart(2, '0')}</span>
</div>
<span className="flip-unit__label">{label}</span>
</div>
);
}
export function CountdownTimer({ target, onExpire }: { target: Date; onExpire?: () => void }) {
const { days, hours, minutes, seconds, expired } = useCountdown(target);
useEffect(() => { if (expired) onExpire?.(); }, [expired, onExpire]);
if (expired) return <div className="countdown--expired">Час вийшов</div>;
return (
<div className="countdown-timer" role="timer" aria-label="Зворотний відлік">
{days > 0 && <FlipUnit value={days} label="днів" />}
<FlipUnit value={hours} label="годин" />
<FlipUnit value={minutes} label="хвилин" />
<FlipUnit value={seconds} label="секунд" />
</div>
);
}
Для SEO додаємо Schema.org SaleEvent з актуальними датами.
Процес роботи
- Аналітика. Вивчаємо вимоги: тривалість акції, необхідність серверної синхронізації, дизайн-макети.
- Проектування. Вибираємо підхід (client-side / server-synced), визначаємо стек, проектуємо API.
- Реалізація. Пишемо код таймера, middleware, тести.
- Інтеграція. Вбудовуємо в існуючий проект, налаштовуємо деплой.
- Тестування. Перевіряємо в різних часових поясах, браузерах, пристроях, при повільному з'єднанні.
- Деплой і підтримка. Розміщуємо на сервері, моніторимо, передаємо документацію.
Що входить в роботу
- Аналіз вимог і вибір підходу
- Розробка таймера з урахуванням часових поясів
- Інтеграція серверної валідації (middleware)
- SEO-розмітка (Schema.org)
- Тестування на всіх пристроях
- Передача документації та вихідників
- Підтримка протягом місяця після здачі
Строки орієнтовно
- Статичний таймер з базовою версткою — від 2 до 4 годин
- Таймер з flip-анімацією, часовими поясами та адаптивом — від 1 дня
- Комплексне рішення з серверною синхронізацією та SEO — від 1,5 днів
Вартість розраховується індивідуально. Отримайте консультацію інженера: зв'яжіться з нами, і ми оцінимо ваш проект за 1 день. Наш досвід включає 10+ років у веб-розробці та 50+ проектів з таймерами для інтернет-магазинів з відвідуваністю 100 000+ — гарантуємо коректну роботу таймера в будь-яких умовах. Замовте розробку таймера з серверною синхронізацією.