Какие есть подходы для работы с timezone пользователя при SSR?

При серверном рендеринге (SSR) даты генерируются на сервере, но должны отображаться в соответствии с часовым поясом пользователя. Если этого не сделать, пользователи в разных регионах увидят некорректное время, что ухудшит пользовательский опыт, особенно в календарях, системах бронирования или лентах событий.

Основные подходы к определению временной зоны

• Через HTTP-заголовки: Клиент может отправить временную зону в кастомном заголовке (например, X-User-Timezone: America/New_York). Браузеры также передают локаль в Accept-Language, но она не всегда точно отражает часовой пояс.
• Через Cookies: При первом посещении можно определить или запросить зону, сохранить её в cookie и передавать при каждом запросе.
• По IP-адресу: Серверные сервисы (например, MaxMind) позволяют приблизительно определить регион по IP, но этот метод не точен для VPN или мобильных сетей.
• Через настройки профиля: Самый надёжный способ — позволить пользователю явно выбрать часовой пояс в настройках аккаунта и хранить его в базе данных.

Обработка на сервере и клиенте

Все даты в базе данных и внутренней логике должны храниться в UTC. При SSR сервер получает информацию о временной зоне пользователя, конвертирует UTC-даты в эту зону и вставляет отформатированные строки в HTML. На клиенте JavaScript может перепроверять и корректировать отображение, если нужно.

Пример кода (Node.js с Express)

// Серверная часть (Express + date-fns-tz)
const express = require('express');
const { format, utcToZonedTime } = require('date-fns-tz');

const app = express();

app.get('/api/events', (req, res) => {
    // 1. Получаем временную зону из заголовка, cookie или БД
    const userTimeZone = req.headers['x-user-timezone'] || 'UTC';
    
    // 2. Дата из БД в UTC
    const eventDateUtc = new Date('2023-12-25T10:00:00Z');
    
    // 3. Конвертируем в зону пользователя
    const userDate = utcToZonedTime(eventDateUtc, userTimeZone);
    
    // 4. Форматируем для отображения
    const formattedDate = format(userDate, 'yyyy-MM-dd HH:mm', { timeZone: userTimeZone });
    
    // 5. Передаём в шаблон (например, для SSR)
    res.render('event', { date: formattedDate, timeZone: userTimeZone });
});

На клиенте можно использовать Intl API для проверки или повторного форматирования, если зона изменилась.

Вывод

Используйте комбинированный подход: определите зону через заголовки или IP при первом визите, предложите пользователю подтвердить её в настройках и храните в базе. Всегда работайте с датами в UTC на сервере, конвертируя только на этапе рендеринга. Это обеспечит консистентность данных и корректное отображение для пользователей по всему миру.