landing-hero.js
Hero demo for the landing page: classic cache-aside read flow with a cache miss and DB fill. Single scenario, autoplay-friendly.
Классический cache-aside read паттерн: клиент тянет ленту, API сначала пробует Redis-кэш, при промахе идёт в Postgres и заполняет кэш на следующий запрос.
client — браузер пользователя, открывает GET /timelineapi — Go/Node-сервис, отвечает за маршрутизацию и orchestrationcache — Redis, TTL 30 секунд на ключ timeline:<user_id>db — Postgres, источник истины (tweets таблица)Group frontend отделён от backend для наглядности — на проде эти ноды живут в разных VPC.
Cache miss read (тот, что играет в анимации):
[REQUEST] — клиент шлёт GET /timeline, попадает на API[CACHE] — API дергает Redis на ключ timeline:42[MISS] — Redis возвращает nil[QUERY] — API делает SELECT * FROM tweets WHERE user_id=42 ORDER BY created_at DESC LIMIT 50[ROWS] — Postgres возвращает 50 строк (≈80ms)[FILL] — API кладёт результат в Redis с TTL 30s[200 OK] — итоговый response клиенту (≈180ms total)При последующих запросах в течение 30s шаги 4-6 пропускаются — латентность падает до ~10ms.
SET NX на lock-ключ или ProbabilisticEarlyExpiration.DEL timeline:<user_id> или версионный ключ.