Lazy loading là gì? Cách implement trong React?

Lazy loading trì hoãn tải resource đến khi thực sự cần — giảm initial load time và Time to Interactive.

• Ảnh — <img loading='lazy'> native: browser tự tải khi scroll gần đến; không dùng cho LCP image.
• Component React — const HeavyChart = React.lazy(() => import('./HeavyChart')) + <Suspense fallback={<Spinner/>}>; chunk được split tự động và load on demand. Dùng cho component nặng: chart library, editor, PDF viewer.
• Next.js — dynamic(() => import('./Map'), { ssr: false }) cho component chỉ chạy được trên browser.
• Route-based — mỗi route một chunk với React Router + React.lazy(); đây là pattern chuẩn.
• Preload trước khi cần — gọi import('./HeavyPage') trong onMouseEnter để giảm perceived latency khi user sắp navigate.
• Intersection Observer — API detect element vào viewport để trigger lazy load; nền tảng của nhiều lazy-loading library.

Đánh đổi: lazy loading tạo waterfall (request phải chờ parent component render xong) — cẩn thận với critical path, chỉ lazy-load phần thật sự non-critical.