Design homepage viewport rendering with deduplication

Design the backend + client interaction to support **viewport rendering** for a streaming service’s home page (rows of videos/tiles). ### Scenario - The home page is personalized and contains multiple “modules” (rows) such as “Continue Watching”, “Trending”, “Because you watched X”, etc. - The UI renders only what is currently visible in the user’s viewport and fetches more as the user scrolls. ### Requirements 1. **Viewport-based rendering:** efficiently fetch and render only visible items, and fetch additional items incrementally as the user scrolls. 2. **No duplicates on the page:** ensure that across all modules currently shown (and as the user scrolls), the user does **not see the same video/title twice**. 3. **Performance:** low latency suitable for a home page; support very high QPS. 4. **Personalization and experimentation:** support A/B tests and different ranking strategies. 5. **Observability:** be able to measure duplicates, latency, and engagement. Explain APIs, data flow, storage/caching, deduplication strategy, pagination/continuation tokens, and how you handle edge cases (e.g., content removed mid-scroll, retries, personalization model updates).