Найти фильм и не потерять список
Каталог фильмов с жанрами, рейтингами TMDB, избранным и списками «посмотреть». Сделан так, чтобы оставаться быстрым поверх большого чужого каталога.
Личный проект Mykhailo Plokhin. В разработке.
Next.js · TypeScript · Tailwind CSS · Prisma · TMDB API
Задача
Каталог фильмов — это в основном чужие данные. Работа в том, чтобы он оставался быстрым и надёжным, когда источник тормозит или меняется.
- Запрос к TMDB на каждый визит делает плохой день TMDB вашим плохим днём.
- Если всё рендерить в браузере, медленный телефон долго ждёт первый постер.
- Списки принадлежат конкретному человеку, их нельзя кэшировать как каталог.
Как устроено
Страницы каталога рендерятся на сервере и кэшируются на час. Только личные данные — избранное и списки — читаются из базы.
Ключевые решения
Каждое решение и альтернатива, которую оно обошло.
Кэшировать страницы каталога на час
Каталог одинаковый для всех, поэтому он рендерится раз в час, а не на каждый визит. Если TMDB лежит, посетители видят чуть устаревшие данные, а не ошибку.
Страницы фильмов рендерятся на сервере
Страницы фильмов, Top Rated и New Releases приходят готовым HTML, и медленный телефон не ждёт JavaScript. Главная страница каталога пока рендерится в браузере — это следующее в списке.
База только для личных данных
Избранному и спискам нужно настоящее чтение по пользователю; всё остальное в базу не ходит.
Цифры
Wovie в разработке, у него есть публичное демо и открытый исходный код.
| Показатель | Что значит | Основание |
|---|---|---|
| < 90msПереход между страницами | Целевое время перехода — пока не измерено.Цель | Цель |
| 1 hОбновление каталога | Страницы каталога рендерятся один раз и обновляются каждый час.Проверено | Проверено |
- Цель
- — На что рассчитана система — не измеренный результат
- Проверено
- — Проверено в коде или на рабочей версии
Нужно что-то похожее?
Опишите задачу в паре строк. Ответит человек из команды.
Обсудить проект