Hey you! Lại là mình đây! Trong bài viết này mình xin chia sẻ quá trình mình làm task - React Infinite Scrolling and Lazy Loading.

Demo React Infinite Scrolling and Lazy Loading

Infinite Scrolling là gì?

Infinite Scrolling là một kỹ thuật thiết kế web cho phép người dùng tiếp tục cuộn một trang mà không cần đến "cuối" của nó. Thiết lập cuộn vô hạn tải nội dung liên tục khi người dùng cuộn xuống trang, cung cấp lượng tài liệu ngày càng tăng và dường như không bao giờ kết thúc và loại bỏ nhu cầu phân trang. Ví dụ về Infinite Scrolling có rất nhiều trong thực tế như "Scrolling Load More" của Facebook và YouTube. Infinite Scrolling sẽ làm tăng trải nhiệm người dùng, thay cho việc phân trang người dùng phải mất thao tác di chuyển để button "Next Page" hoặc button "Number Page" rồi click => làm trải nghiệm người dùng bị ảnh hưởng.  Việc sử dụng Infinite Scrolling sẽ khác phục được điều đó. Tuy nhiên, nhược điểm của Infinite Scrolling đó là khiến người dùng mất thời gian và công sức nếu muốn nhận được dữ liệu ở gần cuối của danh sách. Ví dụ : Công ty Tony Tran có khoảng 1000 nhân viên, người dùng muốn nhận được thông tin của một ai đó ở gần cuối danh sách. Nếu sử dụng Infinite Scrolling thì người dùng phải scrolling rất nhiều lần. Để khắc phục vấn đề này cũng có cách. => Không kỹ thuật hay phương pháp nào là hoàn hảo cả.

Lazy Loading là gì?

Lazy loading là 1 kĩ thuật tối ưu khi làm web, thay vì tải toàn bộ trang web và render ngay từ đầu, kỹ thuật này cho phép tải ngay các thành phần cần thiết để hiển thị tới người dùng và trì hoãn các tài nguyên còn lại cho đến khi cần. Kỹ thuật lazy loading cũng được sử dụng rất nhiều trong thực tế như sử dụng Lazy Loading đối với ảnh, sử dụng Lazy Loading đối với hiển thị component trong React Js, Lazy Loading đối với danh sách. Lazy Loading đối với ảnh  Lazy Loading đối với danh sách  Trong thực tế việc xử lý dữ liệu trong kỹ thuật Infinite Scrolling and Lazy Loading sẽ căn cứ vào yêu cầu của dự án, có thể danh sách dữ liệu sẽ được lấy thông qua API một lần duy nhất ( allPages ) hoặc việc lấy dữ liệu sẽ được thực hiện thông qua mỗi lần gọi API với phân trang. ^^Trong bài viết này mình sẽ thực hiện gọi API với phân trang.^^

Dưới đây là quá trình mình làm task này

Trước tiên ta phải đi tìm một API Free nào đó để lấy dữ liệu. Và mình chọn https://newsapi.org/ tuy nhiên API này chỉ sử dụng được với domain localhost ( môi trường development ). Do nó free mà. nếu muốn sử dụng với môi trường Production thì tất nhiên phải bỏ $. Do vậy mình đã quyết định tự xây dựng API để đỡ phải phụ thuộc họ. Và mình cũng public tại đây : https://tran-dinh-thang-news-api.herokuapp.com/ Mô tả về dùng API : Cung cấp 3 params : q, page, pageSize. q : từ khóa muốn tìm kiếm. page : trang muốn hiển thị. pageSize : số lượng dữ liệu hiện thị tối đa một trang. Xây dựng Custom Hook useArticlesQuery thực việc xử lý vấn đề logic và gọi API .

Tiếp theo ta xây dựng giao diện : JSX

CSS

Xử lý việc nhận biết event khi người dùng scroll đến cuối danh sách :

Đặt ref tại item cuối cùng của danh sách : 

File Source : ArticlesPage.js

useArticlesQuery.js

Source Code : 

https://github.com/trandinhthangdev/react-infinite-scrolling-and-lazy-loading-from-api

Demo :

...