I recreated the Netflix Clone I created from the following post, where I used The Movie Database (TMDb) to fetch the movie images and posters to populate the Netflix Clone.
I created a version 2 of the Netflix Clone because the first version was running slow. I received feedback to use Web.dev Measure to see how well the first version performance was and that's where I found out it was loading much more data than it needed to.
One of the bigger differences from version 1 to version 2 was that in version 1 I was using React Class Components and in version 2 I switched to React Functional Components.
In version 1 I was using ajax calls to fetch the api information. In version 2 I updated the calls to use axios to fetch the api to help the performance. Even though this step did not help a huge amount in performance, it did cut down the amount of javascript code that is needed to make the api calls compared to using ajax.
I also used React Lazy Load Image Component as all the movie and tv show images. This helps with performance because if the image is not in the window view the image does not get loaded so a lot less data needs to load to view the page and this helps on the performance a lot.
Loadable Components is also used in version 2. Loadable lets the Netflix Clone to render a dynamic import as a regular component so the component will be loaded in a separate bundle also improving the Netflix Clone performance.
I have learned a lot from recreating the Netflix Clone and also from the helpful feedback I have received. If you have any other feedback I would really appreciate it. I think it's a great way of learning and seeing someone else's perspective of something.
Top comments (2)
NIce Clone... check mine out ( netflix-build-rl.web.app)... Feedback will be highly appreciated...
@rickielive Nice Clone. I like the sign in feature and I also like to fade in nav bar on scroll.