I used Netflix subscription to understand their frontend system & API design.

This was originally posted at my blog.

If you browse Netflix, you will notice that it provides a seamless and faster experience.

The homepage loads swiftly; movie suggestions appear almost instantly. Clicking on a title brings up the details without delay, and playback begins in a second.

All these things work because the Netflix team carefully planned the frontend system, API schema, image compression and formats, and structure.

We will discuss these practices and system design, taking notes on implementing them in other applications.

API

GraphQL
Netflix uses GraphQL APIs to fetch data from servers. The structure for each API is well defined.

There are APIs such as

1. Movie listing API
2. Movie details API
3. Token APIs

The APIs’ latency is within the milliseconds range and likely loads from the cache.

It demonstrates the scale of system design, the load those servers have, and how they deliver quickly.

Netflix Frontend System Design: Strategies and learnings

This section will examine how Netflix built its frontend system to provide an excellent experience.

Pre-fetching

In pre-fetching data is downloaded/fetched before the user performs an action or reaches that portion.

The Netflix frontend mostly prefetches data. It doesn't always wait for user actions to fetch the required data. Instead, it anticipates and performs in the background.

Initial Page Load

When the user reaches the profiles section, the website fetches data for the initial section of the homepage. The data usually includes

1. Thumbnail URLs
2. Title and relevant info
3. categories, etc.

So, when you visit your profile section, the Netflix website has required data available to show to the user when they visit the next homepage of their profile.

Hovering over a title

As mentioned earlier, Netflix prefetches some data required for the initial view but loads additional data per the user's action.

Now, when you hover over an image, it will

1. Download a quick view video of the title
2. Download extra information for the hover box and details modal
3. Fetch th e suggested movies’ IDs

The first two actions provide data for the hovered view, and if the user clicks on the modal, it will show the details for that movie/series.

However, it only fetched the movie IDs of the suggested one, and fetched relevant info only when the user opened the details of the movie.

This is a better choice because the user opening the details modal is optional, and the movie detail API's bandwidth and latency are reduced.

Once the details model is opened, as shown in the image above, it will load the movie trailer or image and related info, and download data for suggested titles as per the movie IDs fetched in the previous steps.

Learning

Design UI/UX and APIs to show minimum details first if there are too many items on the listing

If the user hovers over or loads an item, load the additional data.

For further peripheral items, such as suggested listings, fetch data on demand only.

The API's latency should be double-digit milliseconds at max to load and show content quickly.

Lazy loading

The Netflix app doesn't load all sections at once.

Instead, when a user scrolls down, different titles against each category are shown as per the categories set by the system based on the user's history or preference.

As expected, the data for the next categories is fetched as the user scrolls down, and roughly the next 5-6 category sections are already preloaded with that data.

Here, Netflix provides a seamless UX and demonstrates effective API and data management.

Learning

1. Loading all data simultaneously might slow the rendering and impact the experience.
2. So, always fetch and show relevant data only on the frontend and load more as the user scrolls.
3. The APIs should be designed to return data in chunks faster.

Images

The images are heavily compressed as per the place.

For thumbnails, the average size is 20-30 KB.

The images shown during the sneak peek are almost 0 bits due to the blob structure being used.

The reasons are quite logical.

The thumbnail size is small, around 300 by 160, and mostly the title and a picture of the user's preference are shown.

Here, showing high-quality images comprising hundreds of KBs doesn't make sense.

It will slow down the loading because hundreds of titles are shown simultaneously.

Learning

1. If you have an e-commerce store or some app where images are shown,
2. Compress and create images as per different view sizes
3. Always load minimal-size photos for the first view, such as on product listing pages.
4. If the user hovers and the size of the viewport changes, only then will a higher quality image be loaded.
5. By doing this, you will

• Load the website faster
• Provide a better experience
• Save the customer's internet data

Conclusion

I hope you have learnt how to build performant frontend systems at scale to serve millions of users and maintain consistency.