Мое футбольное приложение работало идеально, пока не наступил игровой день
Создание футбольного приложения поначалу казалось простым делом.
Я планировал получать данные о матчах, показывать команды, счета и обновлять информацию каждые несколько секунд. Во время тестирования всё работало. Я использовал две вкладки и несколько тестовых матчей. Всё выглядело отлично.
Затем наступил первый загруженный игровой день.
Сотни пользователей одновременно открыли приложение. Запросы накладывались друг на друга. Казалось, что некоторые счета движутся в обратном порядке. Приложение запрашивало одни и те же данные отдельно для каждого посетителя.
Я понял, что live-приложение — это не просто веб-сайт, подключенный к API. Это система синхронизации данных.
Вот ошибки, которые я совершил, и то, как я их исправил:
Избегайте опроса (polling) только на стороне клиента Моя первая версия подразумевала, что каждый браузер запрашивает данные каждые пять секунд. 1 пользователь = 12 запросов в минуту. 1 000 пользователей = 12 000 запросов в минуту. Большинство запросов требовали одних и тех же данных.
Используйте запросы на стороне сервера Я перенес вызовы API на сервер. Это дает контроль над: • учетными данными API • кэшированием • ограничением частоты запросов (rate limiting) • обработкой ошибок • форматированием ответов
Никогда не используйте ключи в клиентском коде. Это небезопасно и дорого обойдется, если кто-то украдет ваш ключ.
Создайте слой маппинга (mapping layer) Я перестал передавать сырые данные API напрямую в компоненты. Если провайдер менял название поля, мой интерфейс ломался. Теперь я сначала преобразую данные провайдера в свой собственный внутренний формат. Это делает UI стабильным.
Используйте Server Components для скорости Вместо того чтобы показывать экран загрузки, я загружаю начальный список матчей на сервере. Пользователь сразу видит контент.
Внедрите «умный» опрос (smart polling) Приложение не должно обновляться, если нет активных матчей. Я добавил проверку, чтобы прекращать опрос, когда матчи заканчиваются. Это экономит огромное количество серверных ресурсов.
Исправьте состояние гонки (race conditions) Иногда запрос B возвращается раньше запроса A. Из-за этого кажется, что счета движутся назад. Я использую
AbortController, чтобы отменять старые запросы перед началом новых.Обрабатывайте ошибки корректно Если обновление не удалось, не показывайте пустой экран. Оставьте видимыми последние успешно полученные данные. Счет пятнадцатисекундной давности лучше, чем отсутствие счета.
Демо-версии нужно только отображать данные. Реальный продукт должен управлять кэшированием, безопасностью и состоянием.
Вы создавали live-приложения? Что сломалось, когда пришли реальные пользователи?
Source: https://dev.to/mihailove123/my-football-app-worked-perfectly-until-matchday-started-3i59