System DesignInfinite scroll feed cần kết hợp nhiều kỹ thuật để vừa mượt vừa hiệu quả. Dùng Intersection Observer gắn vào một sentinel element ở cuối danh sách, khi element này xuất hiện trong viewport thì tự động trigger load thêm dữ liệu.
Để hiển thị hàng nghìn items mà không lag, dùng virtual list với react-window hoặc @tanstack/virtual để chỉ render những items đang nhìn thấy trên màn hình. Về phía API, nên dùng cursor-based pagination thay vì offset vì cursor không bị trùng lặp data khi có bài viết mới, kết hợp React Query useInfiniteQuery để quản lý cache và fetch states.
Ngoài ra cần xử lý restore scroll position khi user navigate đi rồi quay lại, hiển thị skeleton loading cho UX tốt hơn, và debounce scroll events để tránh gọi API quá nhiều lần.