Design homepage viewport rendering with deduplication

Q: Design homepage viewport rendering with deduplication

This question evaluates system architecture and backend–client design competencies, including viewport-based fetching, cross-module deduplication, pagination/continuation tokens, caching and storage strategies, personalization and experimentation integration, and observability for low-latency, high-QPS services in the System Design domain.

Q: How do I approach System Design interview questions?

System Design questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master system design interviews.

Question

Loading...

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

Viewport-based rendering: efficiently fetch and render only visible items, and fetch additional items incrementally as the user scrolls.
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 .
Performance: low latency suitable for a home page; support very high QPS.
Personalization and experimentation: support A/B tests and different ranking strategies.
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).

Design homepage viewport rendering with deduplication

Quick Overview

Scenario

Requirements

Solution

Comments (0)